Commit 3ff2a90f authored by Boris Mericskay's avatar Boris Mericskay
Browse files

Update GraduatedCircles.html

parent fd8ecb5f
......@@ -2,16 +2,28 @@
<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 / Graduated Circles 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;}
.Mypopup .mapboxgl-popup-content {
.Mypopup .maplibregl-popup-content {
background-color: black;
color : white;
opacity : 0.9;}
opacity : 0.9;
height : 200px;
width : 170px;
}
</style>
</head>
......@@ -20,21 +32,22 @@
<div id="map"></div>
<script>
// Map configuration
//Appel et configuration de la carte
var map = new mapboxgl.Map({
var map = new maplibregl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', // basemap
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
zoom: 11.7, // Zoom
center: [2.335, 48.854], // Map center
pitch: 10, // Inclinaison
bearing: 0, // Rotation
center: [2.335, 48.854], // Centrage carte
pitch: 10, // Inclinaison carte
bearing: 0, // Rotation carte
minZoom:11.7
});
// Add date (Geojson)
// Ajout des données
map.on('load', function () {
......@@ -54,6 +67,7 @@ map.on('load', function () {
});
// Add bike stations
map.addSource('Stations', {
......@@ -70,17 +84,22 @@ map.on('load', function () {
'circle-radius': {
property: 'capacity',
type: 'exponential',
stops: [[0, 0],
[95, 20]]},
stops: [
[0, 0],
[95, 20]
]
},
'circle-color': '#0074D9'}}
);
});
// Interactivity configuration (popup)
//Interactivité HOVER
var popup = new mapboxgl.Popup({
var popup = new maplibregl.Popup({
className: "Mypopup",
closeButton: false,
closeOnClick: false });
......@@ -96,17 +115,23 @@ map.on('mousemove', function(e) {
var feature = features[0];
popup.setLngLat(feature.geometry.coordinates)
.setHTML('<b>'+ feature.properties.name + '</b>' + '<br> Bike Capacity > ' + feature.properties.capacity)
.addTo(map);
.setHTML('<h2>'+ feature.properties.name + '</h2><hr> <img src="https://img.20mn.fr/E_l1DZgVR-K26DkVcvjpYQ/640x410_velib-paris-illustration.jpg" style="width:70%"><h3>' + 'Bike Capacity: ' + feature.properties.capacity + '</h3>')
.addTo(map);
});
// 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>
......
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