Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active December 6, 2018 15:32
Show Gist options
  • Save mastersigat/0f3196a56646c124250e45d3e78f4373 to your computer and use it in GitHub Desktop.
Save mastersigat/0f3196a56646c124250e45d3e78f4373 to your computer and use it in GitHub Desktop.
Download ZIP
#MapboxGL - Tilevector SPD
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tile vector SPD</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body { margin:0; padding:0; }
.map {width: 100%; height:800px; margin: auto; border-width:2px;
border-style:outset;
border-color:black;}
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
.map-overlay-2 {
font: 11px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 320px;
top: 60px;
left: 50px;
padding: 1px;
background-color: #000000;
color: #000000
}
.map-overlay-2 .map-overlay-inner {
background-color: #FFFFFF;
padding: 0px;
margin-bottom: 0px;
}
.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}
.map-overlay-inner .categoryLabel {
display: block;
color: #FFFFFF;
background-color: #0074D9;
font-weight: bold;
margin: 0 0 5px;
}
</style>
</head>
<body>
<div id="bouton">
<button id="2D" class="btn btn-primary">Carto classique</button>
<button id="3D" class="btn btn-primary">Carto 3D</button>
</div>
<div id='map' class='map'> </div>
<div class='map-overlay-2 top'>
<div class='map-overlay-inner'>
<fieldset>
<label class="categoryLabel">Datasets du Service Public de la Donnée</label>
<div>
<input type="checkbox" id="RoutesCB" value="Routes" onchange="switchlayer('Routes')"checked/>
<label for="RoutesCB">Axes routiers (IGN BDTOPO®)</label>
</div>
<div>
<input type="checkbox" id="BatimentsCB" value="Batiments" onchange="switchlayer('Batiments')"checked/>
<label for="BatimentsCB">Bâtiments (IGN BDTOPO®)</label>
</div>
<div>
<input type="checkbox" id="HydroCB" value="Hydro" onchange="switchlayer('Hydro')" checked/>
<label for="HydroCB">Hydrographie (IGN BDTOPO®)</label>
</div>
<div>
<input type="checkbox" id="CadastreCB" value="Cadastre" onchange="switchlayer('Cadastre')" />
<label for="CadastreCB">Plan Cadastral Informatisé (cadastre.data.gouv.fr)</label>
</div>
<div>
<input type="checkbox" id="ADRESSECB" value="ADRESSE" onchange="switchlayer('ADRESSE')" />
<label for="SIRENECB">Base Adresse Nationale (adresse.data.gouv.fr)</label>
</div>
<div>
<input type="checkbox" id="SIRENECB" value="SIRENE" onchange="switchlayer('SIRENE')" />
<label for="SIRENECB">Base SIRENE (INSEE / data.gouv.fr)</label>
</div>
</fieldset>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ninanoun/cjp9mufdw193h2slo55pn5mwf', // stylesheet location
center: [-1.738, 48.142], // starting position [lng, lat]
zoom: 12,
minZoom:12,
maxZoom:20,
pitch: 10, //Inclinaison
bearing: -10 // Rotation
});
map.on('load', function () {
// Hydrographie
map.addSource('Hydro', {
type: 'vector',
url: 'mapbox://mastersigat.55kllkvd'});
map.addLayer({
"id": "Hydro",
"type": "fill",
"source": "Hydro",
"layout": {'visibility': 'visible'},
"source-layer": "Hydro-bycjua",
"paint": {"fill-color": "#7FDBFF"}
});
// VOIRIE
map.addSource('Routes', {
type: 'vector',
url: 'mapbox://mastersigat.7sap14lx'});
map.addLayer({
"id": "Routes",
"type": "line",
"source": "Routes",
"layout": {'visibility': 'visible'},
"source-layer": "Routes-dha8ut",
"paint": {"line-color": "#FF851B", "line-width": {'base': 1.5,'stops': [[13,0.2], [22, 20]]}}
});
// CONTOURS RM
map.addSource('RM', {
type: 'vector',
url: 'mapbox://ninanoun.3nmwp9pz'});
map.addLayer({
"id": "Contours",
"type": "line",
"source": "RM",
"layout": {'visibility': 'visible'},
"source-layer": "RM-7zoiyr",
"paint": {"line-color": "#000000", "line-width": 1}
});
//BATIMENTS
map.addSource('Batiments', {
type: 'vector',
url: 'mapbox://mastersigat.a4h4ovrl'
});
map.addLayer({
'id': 'Batiments',
'type': 'fill-extrusion',
'source': 'Batiments',
'source-layer': 'batiIGN-8zf03o',
'layout': {'visibility': 'visible'},
'paint':
{'fill-extrusion-color': '#A9A9A9',
'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
'fill-extrusion-opacity': 0.90,
'fill-extrusion-base': 0}
});
// ADRESSE
map.addSource('ADRESSE', {
type: 'vector',
url: 'mapbox://ninanoun.6amhjuoa'});
map.addLayer({
'id': 'ADRESSE',
'type': 'circle',
'source': 'ADRESSE',
'source-layer': 'Adresse-27ojfe',
'layout': {'visibility': 'none'},
'paint': {'circle-radius': {'base': 1.5,'stops': [[12,1 ], [22, 20]]}, 'circle-color': '#0074D9',}
});
// SIRENE
map.addSource('SIRENE', {
type: 'vector',
url: 'mapbox://ninanoun.5cn7hy60'});
map.addLayer({
'id': 'SIRENE',
'type': 'circle',
'source': 'SIRENE',
'source-layer': 'SIRENE-7asdkw',
'layout': {'visibility': 'none'},
'paint': {'circle-radius': {'base': 1.5,'stops': [[12,1.6 ], [22, 20]]}, 'circle-color': '#FF4136',}
});
//CADASTRE
map.addSource('Cadastre', {
type: 'vector',
url: 'mapbox://mastersigat.9yc1xho2'
});
map.addLayer({
'id': 'Cadastre',
'type': 'line',
'source': 'Cadastre',
'source-layer': 'Cadastre-cz7x03',
'layout': {'visibility': 'none',
'line-join': 'round','line-cap': 'round'},
"paint": {"line-color": "#AAAAAA", "line-width": {'base': 1,'stops': [[12,0.1], [22, 1]]}}
});
switchlayer = function (lname) {
if (document.getElementById(lname + "CB").checked) {
map.setLayoutProperty(lname, 'visibility', 'visible');
} else {
map.setLayoutProperty(lname, 'visibility', 'none');
}
}
});
// Config affichage boutons
document.getElementById('3D').addEventListener('click', function ()
{ map.flyTo({
pitch: 50,
bearing: -30 });
map.setLayoutProperty('extrude', 'visibility', 'visible');
});
document.getElementById('2D').addEventListener('click', function ()
{ map.flyTo({zoom: 10,
pitch: 0,
bearing: 0
});
map.setLayoutProperty('classique', 'visibility', 'visible');
map.setLayoutProperty('extrude', 'visibility', 'none');
});
map.addControl(new mapboxgl.ScaleControl({
maxWidth: 120,
unit: 'metric'}));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment