Skip to content

Latest commit

 

History

History
74 lines (60 loc) · 1.96 KB

README.md

File metadata and controls

74 lines (60 loc) · 1.96 KB
Raw

leaflet-ui

NPM version License

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/[email protected]/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: [email protected]

Contributors: Raruto