Skip to content

Raruto/leaflet-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jan 20, 2023
31b300a · Jan 20, 2023
Apr 6, 2022
Jan 20, 2023
Jan 20, 2023
Jan 20, 2023
Jan 20, 2023
Feb 9, 2020
Mar 16, 2022
Sep 20, 2019
Feb 9, 2020
Jun 25, 2019
Jan 20, 2023
Jun 24, 2019
Jan 20, 2023
Jan 20, 2023

Repository files navigation

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