Created
July 31, 2013 16:17
-
-
Save ismyrnow/6123517 to your computer and use it in GitHub Desktop.
Leaflet.GroupedLayerControl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Basic example</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" /> | |
| <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" /><![endif]--> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .leaflet-control-layers-group-name { | |
| font-weight: bold; | |
| margin-bottom: .2em; | |
| display: block; | |
| } | |
| .leaflet-control-layers-group { | |
| margin-bottom: .5em; | |
| } | |
| .leaflet-control-layers-group label { | |
| padding-left: .5em; | |
| } | |
| </style> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script> | |
| <script src="https://rawgithub.com/ismyrnow/Leaflet.groupedlayercontrol/master/src/leaflet.groupedlayercontrol.js"></script> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script type="text/javascript"> | |
| (function() { | |
| var cities = new L.LayerGroup(); | |
| L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), | |
| L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities), | |
| L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities), | |
| L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities); | |
| var restaurants = new L.LayerGroup(); | |
| L.marker([39.69, -104.85]).bindPopup('A fake restaurant').addTo(restaurants); | |
| L.marker([39.69, -105.12]).bindPopup('A fake restaurant').addTo(restaurants); | |
| var cmAttr = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', | |
| cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png'; | |
| var minimal = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}), | |
| midnight = L.tileLayer(cmUrl, {styleId: 999, attribution: cmAttr}), | |
| motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr}); | |
| var map = L.map('map', { | |
| center: [39.73, -104.99], | |
| zoom: 10, | |
| layers: [minimal, motorways, cities] | |
| }); | |
| var baseLayers = { | |
| "Minimal": minimal, | |
| "Night View": midnight | |
| }; | |
| // Overlay layers are grouped | |
| var groupedOverlays = { | |
| "Landmarks": { | |
| "Motorways": motorways, | |
| "Cities": cities | |
| }, | |
| "Points of Interest": { | |
| "Restaurants": restaurants | |
| } | |
| }; | |
| // Use the custom grouped layer control, not "L.control.layers" | |
| L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map); | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I receive a message error from this tool when I try to removeLayer function.
TypeError: Cannot read properties of undefined (reading 'layer')
at i._addItem (leaflet.groupedlayercontrol.min.js:4)
at i._update (leaflet.groupedlayercontrol.min.js:4)
at i.removeLayer (leaflet.groupedlayercontrol.min.js:4)
at HTMLButtonElement.sehizoclick (dengue_20211108.js:145)
Any advanced for fix that
Thanks a lot