From a19276ade92e11317de25a1caf44a4dee7e5f5aa Mon Sep 17 00:00:00 2001
From: Boris Mericskay <boris.mericskay@univ-rennes2.fr>
Date: Sat, 10 Apr 2021 14:26:17 +0000
Subject: [PATCH] Upload New File
---
Choropleth3DMap.html | 126 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 126 insertions(+)
create mode 100644 Choropleth3DMap.html
diff --git a/Choropleth3DMap.html b/Choropleth3DMap.html
new file mode 100644
index 0000000..5e7e803
--- /dev/null
+++ b/Choropleth3DMap.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset='utf-8' />
+ <title></title>
+ <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" />
+
+ <style>
+ #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
+
+ .Mypopup .mapboxgl-popup-content {
+ background-color: black;
+ color : white;
+ opacity : 0.7;
+}
+
+ </style>
+</head>
+<body>
+
+<div id='map'></div>
+
+<script>
+
+//Configuration de la carte
+var map = new mapboxgl.Map({
+ container: 'map', // container id
+ style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
+ center: [-2.802, 48.1],
+ zoom :7.7,
+ pitch : 40,
+ bearing : 1
+});
+map.on('style.load', function() {
+
+
+ // Add data
+
+
+ map.addSource('Municipalities', {
+ type: 'geojson',
+ data: 'https://raw.githubusercontent.com/mastersigat/data/main/communesBZH.geojson'
+ });
+
+
+
+ // Municipalities layer
+
+map.addLayer({
+ 'id': 'Municipalities',
+ 'type': 'fill-extrusion',
+ 'source': 'Municipalities',
+ 'layout': {'visibility': 'visible'},
+ 'paint': {'fill-extrusion-color': {
+ property: 'density',
+ stops: [
+ [20, '#4d9221'],
+ [50, '#a1d76a'],
+ [100, '#e6f5d0'],
+ [200, '#fde0ef'],
+ [500, '#e9a3c9'],
+ [1000, '#c51b7d'],]},
+ 'fill-extrusion-height': {
+ 'property': 'POPULATION',
+ 'stops': [[100, 10],
+ [100, 100],
+ [200000, 70000]] },
+ 'fill-extrusion-opacity': 0.95,
+ 'fill-extrusion-base': 0
+ }
+});
+
+
+ // Add Departments
+
+ map.addSource('lignes', {
+ type: 'geojson',
+ data: 'https://raw.githubusercontent.com/mastersigat/data/main/Departements.geojson'
+ });
+
+ map.addLayer({
+ 'id': 'Lignes',
+ 'type': 'line',
+ 'source': 'lignes',
+ 'paint': {'line-width': 2.5,
+ 'line-color': '#111111'}
+ });
+
+
+
+ });
+
+
+ var popup = new mapboxgl.Popup({
+ className: "Mypopup",
+ closeButton: false,
+ closeOnClick: false });
+
+map.on('mousemove', function(e) {
+ var features = map.queryRenderedFeatures(e.point, { layers: ['Municipalities'] });
+ map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
+
+ if (!features.length) {
+ popup.remove();
+ return; }
+
+ var feature = features[0];
+ popup.setLngLat(feature.geometry.coordinates)
+ .setHTML('<b>'+ feature.properties.NOM_COM_M + '</b>')
+ .addTo(map);
+
+});
+
+
+ // Ajout controle de navigation et echelle
+
+map.addControl(new mapboxgl.NavigationControl({position: 'top-right'}));
+
+map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
--
GitLab