Skip to content

Instantly share code, notes, and snippets.

@mastersigat
Last active December 5, 2019 14:01
Show Gist options
  • Save mastersigat/deff3908c0f5a4ab86b1167069e03a0d to your computer and use it in GitHub Desktop.
Save mastersigat/deff3908c0f5a4ab86b1167069e03a0d to your computer and use it in GitHub Desktop.
#MapboxGL / Afficher et filtrer des données d'OSM
license: mit
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapboxGL</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.1/mapbox-gl.css' rel='stylesheet' />
<style>
#map {position:absolute; top:0; bottom:0; width:100%;}
</style>
</head>
<body>
<div id='map'></div>
<script>
// AccesToken
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
// Configuration de la carte
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9', // Fond de carte
center: [-1.68, 48.12], // lat/long
zoom: 15, // zoom
pitch: 50, // Inclinaison
bearing: -10 // Rotation
});
map.on('load', function () {
map.addSource('mapbox-streets-v8', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v8'});
map.addLayer({
"id": "Routes",
"type": "line",
"source": "mapbox-streets-v8",
"filter": ["all", ["in", "class", "motorway", "trunk", "primary"]],
"layout": {'visibility': 'visible'},
"source-layer": "road",
"paint": {"line-color": "#ebff1e", "line-width": 1}
});
// Hydrologie
map.addLayer({"id": "hydrologie",
"type": "line",
"source": "mapbox-streets-v8",
"source-layer": "waterway",
"paint": {"line-color": "#4dd2ff",
"line-width": 7}
});
// Batiments
map.addLayer({
"id": "batiments",
"type": "fill",
"source": "mapbox-streets-v8",
"source-layer": "building",
"paint": {"fill-color": "#FEFEFE",
"fill-opacity": 0.8}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment