https://github.com/raruto/leaflet-control-layers-inline

Leaflet plugin that allows to display inline layers control
https://github.com/raruto/leaflet-control-layers-inline

basemaps control inline layers leaflet

Last synced: about 2 months ago
JSON representation

Leaflet plugin that allows to display inline layers control

• Host: GitHub
• URL: https://github.com/raruto/leaflet-control-layers-inline
• Owner: Raruto
• License: gpl-3.0
• Created: 2019-06-23T19:56:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-06T13:41:17.000Z (over 4 years ago)
• Last Synced: 2024-04-29T23:24:05.195Z (9 months ago)
• Topics: basemaps, control, inline, layers, leaflet
• Language: CSS
• Size: 21.5 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# leaflet-control-layers-inline.js

A Leaflet plugin that allows to display inline layers control

_For a working example see [demo](https://raruto.github.io/leaflet-control-layers-inline/examples/leaflet-control-layers-inline.html)_

---

## How to use

1. **include CSS & JavaScript**

    ```html

    

    ...

     html, body, #map { height: 100%; width: 100%; padding: 0; margin: 0; } 

    

    

    

    

    

    

    ...

    

    ```

2. **choose a div container used for the slippy map**

    ```html

    

    ...

	  


    ...

    

    ```

3. **create your first simple “leaflet-control-layers-inline” slippy map**

    ```html

    


      var opts = {

        map: {

          center: [41.4583, 12.7059],

          zoom: 5,

          zoomControl: false

        },

        osmLayer: {

          url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

          options: {

            maxZoom: 19,

            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

          }

        },

        terrainLayer: {

          url: 'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png',

          options: {

            maxZoom: 18,

            subdomains: 'abcd',

            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

          }

        },

        satelliteLayer: {

          url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',

          options: {

            maxZoom: 18,

            attribution: '&copy; <a href="http://www.esri.com/">Esri</a>'

          }

        },

        otmLayer: {

          url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',

          options: {

            maxZoom: 17,

            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'

          }

        }

      };

      var map = L.map('map', opts.map);

      var baseLayers = {};

      baseLayers["OSM"] = L.tileLayer(opts.osmLayer.url, opts.osmLayer.options);

      baseLayers["Terrain"] = L.tileLayer(opts.terrainLayer.url, opts.terrainLayer.options);

      baseLayers["Satellite"] = L.tileLayer(opts.satelliteLayer.url, opts.satelliteLayer.options);

      baseLayers["Topo"] = L.tileLayer(opts.otmLayer.url, opts.otmLayer.options);

      var zoom = L.control.zoom({

        position: 'bottomright'

      }).addTo(map);

      var control = L.control.layers(baseLayers, null, {

        inline: true, // enable inline mode

        position: 'topleft'

      }).addTo(map);

      map.addLayer(baseLayers["Topo"]);

    

    ```

_Related: [Leaflet-UI presets](https://github.com/raruto/leaflet-ui)_

---

**Compatibile with:** [email protected]

---

**Contributors:** [Raruto](https://github.com/Raruto/leaflet-control-layers-inline)