Skip to content
Snippets Groups Projects
Commit 3ff2a90f authored by Boris Mericskay's avatar Boris Mericskay
Browse files

Update GraduatedCircles.html

parent fd8ecb5f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 47 additions and 22 deletions
GraduatedCircles.html
+ 47
− 22
View file @ 3ff2a90f
......@@ -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>
......
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