1111
1212 <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
1313 <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
14- <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0 /dist/leaflet.js"></script>
15- <script src="https://code.jquery.com/jquery-1.12.4 .min.js"></script>
16- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3 .2.0/ js/bootstrap.min.js"></script>
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>
1717 <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.6.0 /dist/leaflet.css"/>
19- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3 .2.0 /css/bootstrap.min.css"/>
20- <link rel="stylesheet" href="https://maxcdn .bootstrapcdn.com/bootstrap/3.2 .0/css/bootstrap-theme .min.css"/>
21- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3 /css/font-awesome .min.css"/>
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.min.css"/>
21+ <link rel="stylesheet" href="https://
cdn.jsdelivr.net/npm/@fortawesome/[email protected] /css/
all .min.css"/>
2222 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
2323 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
2424
3232 left: 0.0%;
3333 top: 0.0%;
3434 }
35+ .leaflet-container { font-size: 1rem; }
3536 </style>
3637
3738</head>
6364
6465
6566 var tile_layer_ = L.tileLayer(
66- "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png",
67- {"attribution": "\u0026copy; \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"http://cartodb.com/attributions\"\u003eCartoDB\u003c/a\u003e, CartoDB \u003ca href =\"http://cartodb.com/attributions\"\u003eattributions\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
68- ).addTo(map_);
67+ "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
68+ {"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}
69+ );
70+
71+
72+ tile_layer_.addTo(map_);
6973
7074
7175 var tile_layer_ = L.tileLayer(
72- "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png",
73- {"attribution": "\u0026copy; \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"http://cartodb.com/attributions\"\u003eCartoDB\u003c/a\u003e, CartoDB \u003ca href =\"http://cartodb.com/attributions\"\u003eattributions\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
74- ).addTo(map_);
76+ "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
77+ {"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}
78+ );
79+
80+
81+ tile_layer_.addTo(map_);
7582
7683
7784 var tile_layer_ = L.tileLayer(
78- "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
79- {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
80- ).addTo(map_);
85+ "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
86+ {"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}
87+ );
88+
89+
90+ tile_layer_.addTo(map_);
8191
8292
8393 var tile_layer_ = L.tileLayer(
8494 "https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png",
8595 {"attribution": "\u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
86- ).addTo(map_);
96+ );
97+
98+
99+ tile_layer_.addTo(map_);
87100
88101
89102 var feature_group_ = L.featureGroup(
90103 {}
91- ).addTo(map_) ;
104+ );
92105
93106
94107 var polygon_ = L.polygon(
100113 var popup_ = L.popup({"autoClose": false, "closeOnClick": false, "maxWidth": 450});
101114
102115
103- var html_ = $(`<div id="html_" style="width: 100.0%; height: 100.0%;"><p>Cluster: 0 / 2</br>Cluster points: 7</br>Cluster diameter: 5.10 km (3.17 miles)</br></p></div>`)[0];
104- popup_.setContent(html_);
116+
117+ var html_ = $(`<div id="html_" style="width: 100.0%; height: 100.0%;"><p>Cluster: 0 / 2</br>Cluster points: 7</br>Cluster diameter: 5.10 km (3.17 miles)</br></p></div>`)[0];
118+ popup_.setContent(html_);
119+
105120
106121
107122 polygon_.bindPopup(popup_)
110125
111126
112127
128+ feature_group_.addTo(map_);
129+
130+
113131 var feature_group_ = L.featureGroup(
114132 {}
115- ).addTo(map_) ;
133+ );
116134
117135
118136 var polygon_ = L.polygon(
124142 var popup_ = L.popup({"autoClose": false, "closeOnClick": false, "maxWidth": 450});
125143
126144
127- var html_ = $(`<div id="html_" style="width: 100.0%; height: 100.0%;"><p>Cluster: 1 / 2</br>Cluster points: 5</br>Cluster diameter: 4.47 km (2.78 miles)</br></p></div>`)[0];
128- popup_.setContent(html_);
145+
146+ var html_ = $(`<div id="html_" style="width: 100.0%; height: 100.0%;"><p>Cluster: 1 / 2</br>Cluster points: 5</br>Cluster diameter: 4.47 km (2.78 miles)</br></p></div>`)[0];
147+ popup_.setContent(html_);
148+
129149
130150
131151 polygon_.bindPopup(popup_)
134154
135155
136156
137- var layer_control_ = {
157+ feature_group_.addTo(map_);
158+
159+
160+ var layer_control__layers = {
138161 base_layers : {
139162 "cartodbpositron" : tile_layer_,
140- "cartodbdark_matter " : tile_layer_,
163+ "cartodbdarkmatter " : tile_layer_,
141164 "openstreetmap" : tile_layer_,
142165 "DarkMatter no labels" : tile_layer_,
143166 },
146169 "Cluster 2" : feature_group_,
147170 },
148171 };
149- L.control.layers(
150- layer_control_ .base_layers,
151- layer_control_ .overlays,
172+ let layer_control_ = L.control.layers(
173+ layer_control__layers .base_layers,
174+ layer_control__layers .overlays,
152175 {"autoZIndex": true, "collapsed": true, "position": "topright"}
153176 ).addTo(map_);
154- tile_layer_.remove();
155- tile_layer_.remove();
156- tile_layer_.remove();
177+
157178
158179</script>
159180</html>
0 commit comments