Commit 2d671fca authored by Boris Mericskay's avatar Boris Mericskay
Browse files

Update Clusterthematic.html

parent d85fafc5
......@@ -2,14 +2,18 @@
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
<meta charset='utf-8' />
<title>MapLibreGL / Thematic Clusters Map</title>
<script src='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.css' rel='stylesheet' />
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#legend {
left : 1%;
position: absolute;
left : 50px;
padding: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
line-height: 2Opx;
......@@ -18,7 +22,7 @@
height: 80px;
background-color: #ffffff;
opacity: 0.7;
font-size: 20;
font-size: 17;
}
.legend-key {
display:inline-block;
......@@ -42,7 +46,7 @@
//Map configuration
var map = new mapboxgl.Map({
var map = new maplibregl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
zoom: 11.7, // Zoom
......@@ -183,7 +187,7 @@ var id = props.cluster_id;
var marker = markers[id];
if (!marker) {
var el = createDonutChart(props);
marker = markers[id] = new mapboxgl.Marker({
marker = markers[id] = new maplibregl.Marker({
element: el
}).setLngLat(coords);
}
......@@ -308,12 +312,17 @@ r + r0 * y0,
}
// Add navigation control and scale
map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
// Add navigation control and scale
var nav = new maplibregl.NavigationControl();
map.addControl(nav, 'top-left');
var scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'metric'
});
map.addControl(scale);
</script>
</body>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment