View on GitHub

leaflet-ui

Leaflet presets for common user interface customizations

leaflet-ui

Leaflet presets for common user interface customizations

For a working example see demo

How to use

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>

choose a div container used for the slippy map

<body>
...
  <div id="map"></div>
...
</body>

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