leaflet-ui

    0.5.9 • Public • Published

    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

    Install

    npm i leaflet-ui

    DownloadsWeekly Downloads

    8,157

    Version

    0.5.9

    License

    GPL-3.0

    Unpacked Size

    1.48 MB

    Total Files

    80

    Last publish

    Collaborators

    • raruto