From 87ef62fc807a853977cbc13376c464a270458d3b Mon Sep 17 00:00:00 2001
From: Boris Mericskay <boris.mericskay@univ-rennes2.fr>
Date: Thu, 8 Apr 2021 10:20:41 +0000
Subject: [PATCH] Upload New File
---
GraduatedCircles.html | 123 ++++++++++++++++++++++++++++++++++++++++++
1 file changed, 123 insertions(+)
create mode 100644 GraduatedCircles.html
diff --git a/GraduatedCircles.html b/GraduatedCircles.html
new file mode 100644
index 0000000..657c856
--- /dev/null
+++ b/GraduatedCircles.html
@@ -0,0 +1,123 @@
+<html>
+
+<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" />
+
+ <style>
+#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
+
+
+
+
+ </style>
+
+ </head>
+
+ <body>
+
+ <div id="map"></div>
+
+
+<script>
+
+ //Appel et configuration de la carte
+
+var map = new mapboxgl.Map({
+ container: 'map',
+ style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
+ zoom: 11.7, // Zoom
+ center: [2.335, 48.854], // Centrage carte
+ pitch: 10, // Inclinaison carte
+ bearing: 0, // Rotation carte
+ minZoom:11.7
+ });
+
+ // Ajout des données
+
+map.on('load', function () {
+
+// Add arrondissements
+
+ map.addSource('lignes', {
+ type: 'geojson',
+ data: 'https://raw.githubusercontent.com/mastersigat/data/main/arrondissements.geojson'
+ });
+
+ map.addLayer({
+ 'id': 'Lignes',
+ 'type': 'line',
+ 'source': 'lignes',
+ 'paint': {'line-width': 1,
+ 'line-color': '#111111'}
+ });
+
+
+
+// Add bike stations
+
+ map.addSource('Stations', {
+ type: 'geojson',
+ data: 'https://raw.githubusercontent.com/mastersigat/data/main/velib-emplacement-des-stations.geojson'
+ });
+
+ map.addLayer({
+ 'id': 'Stations',
+ 'type': 'circle',
+ 'source': 'Stations',
+ 'paint': {'circle-stroke-color': 'white',
+ 'circle-stroke-width': 1,
+ 'circle-radius': {
+ property: 'capacity',
+ type: 'exponential',
+ stops: [
+ [0, 0],
+ [95, 20]
+ ]
+ },
+ 'circle-color': '#0074D9'}}
+ );
+
+
+
+ });
+
+
+ //Interactivité HOVER
+
+var popup = new mapboxgl.Popup({
+ className: "Mypopup",
+ closeButton: false,
+ closeOnClick: false });
+
+map.on('mousemove', function(e) {
+ var features = map.queryRenderedFeatures(e.point, { layers: ['Stations'] });
+ // Change the cursor style as a UI indicator.
+ 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.name + '</b>' + '<br> Bike Capacity > ' + feature.properties.capacity)
+ .addTo(map);
+
+});
+
+
+
+
+ // Ajout controle de navigation et echelle
+
+map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
+
+map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
+
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
--
GitLab