1+ <!DOCTYPE html>
2+ <html>
3+ <head>
4+
5+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6+
7+ <script>
8+ L_NO_TOUCH = false;
9+ L_DISABLE_3D = false;
10+ </script>
11+
12+ <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
13+ <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
14+ <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
15+ <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
16+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
17+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
18+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
19+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
20+ <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
21+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
22+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
23+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
24+
25+ <meta name="viewport" content="width=device-width,
26+ initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
27+ <style>
28+ #map_ {
29+ position: relative;
30+ width: 100.0%;
31+ height: 100.0%;
32+ left: 0.0%;
33+ top: 0.0%;
34+ }
35+ .leaflet-container { font-size: 1rem; }
36+ </style>
37+
38+ <script src="https://cdn.jsdelivr.net/npm/leaflet.fullscreen@3.0.0/Control.FullScreen.min.js"></script>
39+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.fullscreen@3.0.0/Control.FullScreen.css"/>
40+ <script src="https://cdn.jsdelivr.net/npm/leaflet.control.layers.tree@1.1.0/L.Control.Layers.Tree.min.js"></script>
41+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.control.layers.tree@1.1.0/L.Control.Layers.Tree.min.css"/>
42+ </head>
43+ <body>
44+
45+
46+ <div class="folium-map" id="map_" ></div>
47+
48+ </body>
49+ <script>
50+
51+
52+ var map_ = L.map(
53+ "map_",
54+ {
55+ center: [28.28, -33.7684],
56+ crs: L.CRS.EPSG3857,
57+ zoom: 10,
58+ zoomControl: true,
59+ preferCanvas: false,
60+ zoomSnap: 0.25,
61+ zoomDelta: 0.25,
62+ wheelPxPerZoomLevel: 180,
63+ }
64+ );
65+
66+
67+
68+
69+
70+ var tile_layer_ = L.tileLayer(
71+ "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
72+ {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
73+ );
74+
75+
76+ tile_layer_.addTo(map_);
77+
78+
79+ var tile_layer_ = L.tileLayer(
80+ "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
81+ {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
82+ );
83+
84+
85+ tile_layer_.addTo(map_);
86+
87+
88+ var tile_layer_ = L.tileLayer(
89+ "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
90+ {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"https://carto.com/attributions\"\u003eCARTO\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 20, "maxZoom": 20, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abcd", "tms": false}
91+ );
92+
93+
94+ tile_layer_.addTo(map_);
95+
96+
97+ var tile_layer_ = L.tileLayer(
98+ "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
99+ {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"https://carto.com/attributions\"\u003eCARTO\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 20, "maxZoom": 20, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abcd", "tms": false}
100+ );
101+
102+
103+ tile_layer_.addTo(map_);
104+
105+
106+ var feature_group_ = L.featureGroup(
107+ {}
108+ );
109+
110+
111+
112+ function geo_json__onEachFeature(feature, layer) {
113+ layer.on({
114+ });
115+ };
116+ var geo_json_ = L.geoJson(null, {
117+ onEachFeature: geo_json__onEachFeature,
118+
119+ });
120+
121+ function geo_json__add (data) {
122+ geo_json_
123+ .addData(data);
124+ }
125+ geo_json__add({"features": [{"geometry": {"coordinates": [-74.076, 4.598], "type": "Point"}, "properties": {}, "type": "Feature"}, {"geometry": {"coordinates": [-75.1649, 39.9525], "type": "Point"}, "properties": {}, "type": "Feature"}], "type": "FeatureCollection"});
126+ geo_json_.setStyle(function(feature) {return feature.properties.style;});
127+
128+
129+
130+ geo_json_.addTo(feature_group_);
131+
132+
133+ feature_group_.addTo(map_);
134+
135+
136+ var feature_group_ = L.featureGroup(
137+ {}
138+ );
139+
140+
141+
142+ function geo_json__onEachFeature(feature, layer) {
143+ layer.on({
144+ });
145+ };
146+ var geo_json_ = L.geoJson(null, {
147+ onEachFeature: geo_json__onEachFeature,
148+
149+ });
150+
151+ function geo_json__add (data) {
152+ geo_json_
153+ .addData(data);
154+ }
155+ geo_json__add({"geometry": {"coordinates": [7.6281, 51.962], "type": "Point"}, "properties": {}, "type": "Feature"});
156+ geo_json_.setStyle(function(feature) {return feature.properties.style;});
157+
158+
159+
160+ geo_json_.addTo(feature_group_);
161+
162+
163+ feature_group_.addTo(map_);
164+
165+
166+ L.control.fullscreen(
167+ {"forceSeparateButton": false, "position": "topright", "title": "Expand me", "titleCancel": "Exit me"}
168+ ).addTo(map_);
169+
170+
171+ L.control.layers.tree(
172+ {
173+ "label": "Base Layers",
174+ "children": [
175+ {
176+ "label": "Tiles",
177+ "radioGroup": "tiles",
178+ "children": [
179+ {
180+ "label": "openstreetmap",
181+ "layer": tile_layer_,
182+ },
183+ {
184+ "label": "cartodbdark_matter",
185+ "layer": tile_layer_,
186+ },
187+ {
188+ "label": "cartodb positron",
189+ "layer": tile_layer_,
190+ },
191+ ],
192+ },
193+ ],
194+ },
195+ {
196+ "label": "Overlays",
197+ "selectAllCheckbox": "Un/select all",
198+ "children": [
199+ {
200+ "label": "GeoJSONs",
201+ "selectAllCheckbox": true,
202+ "collapsed": true,
203+ "children": [
204+ {
205+ "label": "GeoJSON 0",
206+ "layer": feature_group_,
207+ },
208+ {
209+ "label": "GeoJSON 1",
210+ "layer": feature_group_,
211+ },
212+ ],
213+ },
214+ ],
215+ },
216+ {"closedSymbol": "+", "collapseAll": "", "expandAll": "", "labelIsSelector": "both", "namedToggle": false, "openenedSymbol": "-", "selectorBack": false, "spaceSymbol": "\u0026nbsp;"}
217+ ).addTo(map_);
218+
219+
220+ map_.fitBounds(
221+ [[51.962, 7.6281], [51.962, 7.6281]],
222+ {}
223+ );
224+
225+ </script>
226+ </html>
0 commit comments