Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Created December 13, 2018 17:32
Show Gist options
  • Save mastersigat/c392a82f39e5c78ba18b13068f92abc2 to your computer and use it in GitHub Desktop.
Save mastersigat/c392a82f39e5c78ba18b13068f92abc2 to your computer and use it in GitHub Desktop.
Download ZIP
#MapboxGL PLU/Cadastre/Bati3D
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: 90%; height:800px; margin: auto; border-width:2px;
border-style:outset;
border-color:black; }
.map-overlay {
z-index: 1;
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 {
z-index: 1;
font: 13px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 400px;
top: 30px;
left: 60px;
padding: 5px;
background-color: #FFFFFF;
color: #000000
}
.map-overlay-inner .categoryLabel {
display: block;
color: #FFFFFF;
background-color: #0074D9;
font-weight: bold;
font-size: 19px;
margin: 0 0 12px;
}
#features {
z-index: 1;
top: 0;
padding: 10px;
height: 320px;
margin-top: 10px;
width: 280px;
background-color: #FFFFFF;
}
#legend {
z-index: 1;
padding: 7px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
line-height: 2Opx;
height: 170px;
margin-bottom: 50px;
width: 230px;
background-color: #FFFFFF;
}
.legend-key {
z-index: 1;
display:inline-block;
top: 5px;
border-radius: 20%;
width: 20px;
height: 20px;
margin-right: 5px;
}
#remover { z-index: 1;
margin: 0 auto;
background-color: #fb5b3f;
color: #fff;
font-weight: bold;
padding: 0.5em;
cursor: pointer;
position: absolute;
left: 60%;
top: 9em;
}
#remover:hover {
background-color: salmon;
}
</style>
</head>
<body>
<div id='map' class='map'>
<div class='map-overlay' id='features'><h3>Explorer les bâtiments</h3><div id='pd'><p> <b>Survolez les batiments</b> </p></div></div>
<div class='map-overlay' id='legend'><b>Zonage du PLU (2015)</b> <BR> </div>
<div class='map-overlay-2 top'>
<div class='map-overlay-inner'>
<fieldset>
<label class="categoryLabel">Couches de la carte</label>
<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="PLUCB" value="PLU" onchange="switchlayer('PLU')" />
<label for="PLUCB">PLU (Rennes Métropole)</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>
</fieldset>
</div>
<div id="bouton">
<button id="2D" class="btn btn-primary">Carto classique</button>
<button id="3D" class="btn btn-primary">Carto 3D</button><div id='remover'>Satellite</div>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/danswick/cilnegnzr00439gkf7urxz0xk', //stylesheet location
center: [-1.738, 48.142], // starting position
zoom: 13,
minZoom:13
});
map.on('load', function () {
var switchy = document.getElementById('remover');
switchy.addEventListener("click", function(){
switchy = document.getElementById('remover');
if (switchy.className === 'on') {
switchy.setAttribute('class', 'off');
map.setLayoutProperty('mapbox-mapbox-satellite', 'visibility', 'none');
switchy.innerHTML = 'satellite';
} else {
switchy.setAttribute('class', 'on');
map.setLayoutProperty('mapbox-mapbox-satellite', 'visibility', 'visible');
switchy.innerHTML = 'Plan';
}
});
map.getCanvas().style.cursor = 'default';
map.getCanvas().style.cursor = 'default';
var layers = ['Zone naturelle', 'Zone agricole', 'Zone à urbaniser - ouverte','Zone à urbaniser - bloquée', 'Zone urbaine'];
var colors = ['#56AA02', '#FFFF00', '#FECCBE', '#FF6565', '#e60000'];
for (i=0; i<layers.length; i++) {
var layer = layers[i] ;
var color = colors[i];
var item = document.createElement('div');
var key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
var value = document.createElement('span');
value.innerHTML = layer;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
}
// Satellite
map.addSource('satellite', {
type: 'raster',
url: 'mapbox://mapbox.satellite'});
// PLU
map.addSource('PLU', {
type: 'vector',
url: 'mapbox://ninanoun.0jcgqeyv'});
map.addLayer({
"id": "PLU",
"type": "fill",
"source": "PLU",
"layout": {'visibility': 'none'},
"source-layer": "PLU-axtxt4",
"paint": {'fill-color': ['match',['get', 'typezone'],
'N', '#56AA02',
'Nh', '#56AA02',
'AUc', '#FECCBE',
'A', '#FFFF00',
'AUs', '#FF6565',
'U', '#e60000', '#ccc'
], 'fill-opacity': 0.5}
});
//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": "#FFFFFF", "line-width": {'base': 1,'stops': [[12,0.1], [22, 1]]}}
});
// 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://ninanoun.dv8c33g9'
});
map.addLayer({
'id': 'Batiments',
'type': 'fill-extrusion',
'source': 'Batiments',
'source-layer': 'BatiPLU-d5t2q3',
'layout': {'visibility': 'visible'},
'paint':
{'fill-extrusion-color': ['match',['get', 'typezone'],
'N', '#56AA02',
'Nh', '#56AA02',
'AUc', '#FECCBE',
'A', '#FFFF00',
'AUs', '#FF6565',
'U', '#e60000', '#ccc'
],
'fill-extrusion-height':{'type': 'identity','property': 'HAUTEUR'},
'fill-extrusion-opacity': 0.90,
'fill-extrusion-base': 0}
});
//COnfiguration changement des couches
switchlayer = function (lname) {
if (document.getElementById(lname + "CB").checked) {
map.setLayoutProperty(lname, 'visibility', 'visible');
} else {
map.setLayoutProperty(lname, 'visibility', 'none');
}
}
});
// Configuration fenêtre d'informations
map.on('mousemove', function (e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['Batiments']
});
if (states.length > 0) {
document.getElementById('pd').innerHTML = "<h4>Hauteur : </strong><p><strong><em>"+ states[0].properties.HAUTEUR + "</strong> mètres </p>"
+ "Superficie : </strong><p><strong><em>"+ states[0].properties.Shape_Area + "</strong> m2 </p>"
+ "Zonage : </strong><p><strong><em>"+ states[0].properties.typezone + "</strong></p>"
+ "Libellé du zonage : </strong><p><strong><em>"+ states[0].properties.libelle + "</strong></p>"
+ "ID Zone</strong><p><strong><em>"+ states[0].properties.idzone + "</strong></p></h4>";
} else {document.getElementById('pd').innerHTML = '<p>Données : IGN et Rennes Metropole / OSM</p>';}
});
map.addControl(new mapboxgl.ScaleControl({
maxWidth: 120,
unit: 'metric'}));
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
// 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({pitch: 0, bearing: 0});
map.setLayoutProperty('classique', 'visibility', 'visible');
map.setLayoutProperty('extrude', 'visibility', 'none');
});
document.getElementById('Satellite').addEventListener('click', function ()
{ map.flyTo({pitch: 0, bearing: 0});
map.setLayoutProperty('classique', 'visibility', 'visible');
map.setLayoutProperty('extrude', 'visibility', 'none');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment