Skip to content

Instantly share code, notes, and snippets.

@mastersigat
Last active Feb 12, 2021
Embed
What would you like to do?
#MapboxGL / Maplibre 3D
license: mit
<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;}
.Mypopup .mapboxgl-popup-content {
background-color: black;
color : white;
opacity : 0.7;
}
.menu {
position: absolute;
top: 10px;
left: 30px;
width: 180px;
background-color: #FFFFFF;
opacity: 0.89;
color: #000000;
font: 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding:10;
}
</style>
</head>
<body>
<div id="map"></div>
<div class='menu'>
<hr>
<label class="categoryLabel"><B>Données Réferentielles</B></label>
<br>
<input type="checkbox" id="Batiments" value="Batiments" onchange="switchlayer('Batiments')" checked/>
<label for="Batiments">Batiments</label>
<hr>
<label class="categoryLabel"><B>Données TC</B></label>
<br>
<input type="checkbox" id="Stations" value="Stations" onchange="switchlayer('Stations')" checked/>
<label for="Stations">Stations de métro</label>
<br>
<input type="checkbox" id="Lignes" value="Lignes" onchange="switchlayer('Lignes')" checked/>
<label for="Lignes">Lignes de métro</label>
<hr>
</div>
<script>
//Appel et configuration de la carte
var map = new mapboxgl.Map({
container: 'map',
style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json', //Fond de carte
zoom: 15.3, // Zoom
center: [-1.68, 48.106], // Centrage carte
pitch: 60, // Inclinaison carte
bearing: -50, // Rotation carte
minZoom:14.5
});
// Ajout des données
map.on('load', function () {
//BATIMENTS
map.addSource('Batiments', {
type: 'geojson',
data: 'https://raw.githubusercontent.com/mastersigat/data/main/BatiRennes.geojson'
});
map.addLayer({
'id': 'Batiments',
'type': 'fill-extrusion',
'source': 'Batiments',
'paint':
{'fill-extrusion-color': '#A9A9A9',
'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
'fill-extrusion-color': {
'property': 'HAUTEUR',
'stops': [
[5, '#1a9850'],
[7, '#91cf60'],
[9, '#d9ef8b'],
[12, '#ffffbf'],
[16, '#fee08b'],
[20, '#fc8d59'],
[30, '#d73027']]},
'fill-extrusion-opacity': 0.7,
'fill-extrusion-base': 0}
});
// Ajout lignes de metros
map.addSource('lignes', {
type: 'geojson',
data: 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-traces-de-laxe-des-lignes.geojson'
});
map.addLayer({
'id': 'Lignes',
'type': 'line',
'source': 'lignes',
'paint': {'line-opacity': 0.7, 'line-width': 7,
'line-color': '#0074D9'}
});
// Ajout stations de metros
map.addSource('Stations', {
type: 'geojson',
data: 'https://raw.githubusercontent.com/mastersigat/data/main/metro-du-reseau-star-localisation-des-stations.geojson'
});
map.addLayer({
'id': 'Stations',
'type': 'circle',
'source': 'Stations',
'paint': {'circle-stroke-color': 'white',
'circle-stroke-width': 3,
'circle-radius' : 6,
'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.nom + '</b>')
.addTo(map);
});
// Configuration affichage menu couches
switchlayer = function (lname) {
if (document.getElementById(lname ).checked) {
map.setLayoutProperty(lname, 'visibility', 'visible');
} else {
map.setLayoutProperty(lname, 'visibility', 'none');
}
};
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment