leaflet-ui

Leaflet presets for common user interface customizations

Usage no npm install needed!

<script type="module">
  import leafletUi from 'https://cdn.skypack.dev/leaflet-ui';
</script>

README

leaflet-ui

Leaflet presets for common user interface customizations

For a working example see demo

Leaflet default UI


How to use

  1. include CSS & JavaScript
    <head>
    ...
    <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style>
    <!-- Leaflet -->
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <!-- Leaflet-UI -->
    <script src="https://unpkg.com/leaflet-ui@latest/dist/leaflet-ui.js"></script>
    ...
    </head>
    
  2. choose a div container used for the slippy map
    <body>
    ...
      <div id="map"></div>
    ...
    </body>
    
  3. create your first simple “leaflet-ui” slippy map
    <script>
      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 */});
    </script>
    

Compatibile with: leaflet@1.6.0


Contributors: Raruto