Leaflet presets for common user interface customizations
For a working example see demo
- include CSS & JavaScript
<head> ... <style> html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } </style> <!-- Leaflet --> <script src="https://unpkg.com/[email protected]/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: ['osm', '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, }); map.once('idle',function(){ /* Waiting for map init */}); </script>
Compatibile with: [email protected]
Contributors: Raruto