https://github.com/raruto/leaflet-ui

Leaflet presets for common user interface customizations
https://github.com/raruto/leaflet-ui

controls default-ui layers leaflet map

Last synced: about 1 year ago
JSON representation

Leaflet presets for common user interface customizations

• Host: GitHub
• URL: https://github.com/raruto/leaflet-ui
• Owner: Raruto
• License: gpl-3.0
• Created: 2019-06-24T22:50:05.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-20T18:09:44.000Z (over 3 years ago)
• Last Synced: 2025-03-24T04:43:38.755Z (about 1 year ago)
• Topics: controls, default-ui, layers, leaflet, map
• Language: JavaScript
• Homepage: https://raruto.github.io/leaflet-ui
• Size: 2.96 MB
• Stars: 29
• Watchers: 1
• Forks: 4
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# leaflet-ui

[![NPM version](https://img.shields.io/npm/v/leaflet-ui.svg?color=red)](https://www.npmjs.com/package/leaflet-ui)

[![License](https://img.shields.io/badge/license-GPL%203-blue.svg?style=flat)](LICENSE)

Leaflet presets for common user interface customizations

_For a working example see [demo](https://raruto.github.io/leaflet-ui/examples/leaflet-ui.html)_



    



* * *

## How to use

1.  **include CSS & JavaScript**

    ```html

    

    ...

     html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } 

    

    

    

    

    ...

    

    ```

2.  **choose a div container used for the slippy map**

    ```html

    

    ...

      


    ...

    

    ```

3.  **create your first simple “leaflet-ui” slippy map**

    ```html

    

      var map = L.map('map', {

        center: [41.4583, 12.7059],

        zoom: 5,


        // Optional customizations

        mapTypeId: 'topo',

        mapTypeIds: ['streets', 'terrain', 'satellite', 'topo'],

        gestureHandling: true,

        zoomControl: true,

        pegmanControl: true,

        locateControl: true,

        fullscreenControl: true,

        layersControl: true,

        minimapControl: true,

        editInOSMControl: true,

        loadingControl: true,

        searchControl: true,

        disableDefaultUI: false,

        // Experimental feature

        rotate: true,

      });

      map.once('idle',function(){ /* Waiting for map init */});

    

    ```

* * *

**Compatibile with:** leaflet@1.6.0

* * *

**Contributors:** [Raruto](https://github.com/Raruto/leaflet-ui)