forked from DataViz-Trio/Assignment-3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bubble_map.html
142 lines (104 loc) · 6.61 KB
/
bubble_map.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_17015b9639a1edce57d94064d8911b4c {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>
</head>
<body>
<div class="folium-map" id="map_17015b9639a1edce57d94064d8911b4c" ></div>
</body>
<script>
var map_17015b9639a1edce57d94064d8911b4c = L.map(
"map_17015b9639a1edce57d94064d8911b4c",
{
center: [0.0, 0.0],
crs: L.CRS.EPSG3857,
zoom: 1,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_933cfc82729e02248b5f1b3ce44b0590 = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
{"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}
);
tile_layer_933cfc82729e02248b5f1b3ce44b0590.addTo(map_17015b9639a1edce57d94064d8911b4c);
var circle_marker_04b036e2071217a0aca31313c562ebd1 = L.circleMarker(
[34.22703988095238, -118.45865297619048],
{"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "blue", "fillOpacity": 0.6, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 3.36, "stroke": true, "weight": 3}
).addTo(map_17015b9639a1edce57d94064d8911b4c);
circle_marker_04b036e2071217a0aca31313c562ebd1.bindTooltip(
`<div>
Cluster 1: 336.0 rows
</div>`,
{"sticky": true}
);
var circle_marker_8cb249fae17bce9fbd19f8389ee25282 = L.circleMarker(
[34.309398734177215, -118.42653037974684],
{"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "blue", "fillOpacity": 0.6, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 0.79, "stroke": true, "weight": 3}
).addTo(map_17015b9639a1edce57d94064d8911b4c);
circle_marker_8cb249fae17bce9fbd19f8389ee25282.bindTooltip(
`<div>
Cluster 2: 79.0 rows
</div>`,
{"sticky": true}
);
var circle_marker_0a6112febbff537d01829029f92bb002 = L.circleMarker(
[34.259561363636365, -118.45717424242424],
{"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "blue", "fillOpacity": 0.6, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 1.32, "stroke": true, "weight": 3}
).addTo(map_17015b9639a1edce57d94064d8911b4c);
circle_marker_0a6112febbff537d01829029f92bb002.bindTooltip(
`<div>
Cluster 3: 132.0 rows
</div>`,
{"sticky": true}
);
var circle_marker_807c4d7bbb5f2bceea3c6aa146e1cd24 = L.circleMarker(
[34.229510619469025, -118.43492831858407],
{"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "blue", "fillOpacity": 0.6, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 1.13, "stroke": true, "weight": 3}
).addTo(map_17015b9639a1edce57d94064d8911b4c);
circle_marker_807c4d7bbb5f2bceea3c6aa146e1cd24.bindTooltip(
`<div>
Cluster 4: 113.0 rows
</div>`,
{"sticky": true}
);
var circle_marker_8e4e20524d18c8e65342b97b72361561 = L.circleMarker(
[34.30746444444444, -118.45906],
{"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": true, "fillColor": "blue", "fillOpacity": 0.6, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "opacity": 1.0, "radius": 0.9, "stroke": true, "weight": 3}
).addTo(map_17015b9639a1edce57d94064d8911b4c);
circle_marker_8e4e20524d18c8e65342b97b72361561.bindTooltip(
`<div>
Cluster 5: 90.0 rows
</div>`,
{"sticky": true}
);
</script>
</html>