Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active March 6, 2019 14:56
Show Gist options
  • Save mastersigat/b57cea9413e03fac92b00a003734d71e to your computer and use it in GitHub Desktop.
Save mastersigat/b57cea9413e03fac92b00a003734d71e to your computer and use it in GitHub Desktop.
Download ZIP
#Mapbox - Paris en 3D
Raw
.block
license: CC BY-SA 2.0 FR
Raw
README.md

Licenses: Code application>CC BY-SA 2.0 FR / Datasets> ODbL // Built with blockbuilder.org

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Paris bati</title>
<meta charset="utf-8" />
<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:900px; margin: auto; border-width:2px;
border-style:outset;
border-color:black; }
ul {
margin: 20px;
}
ul {
margin: 10px; left:10px;
}
.input-color {
position: relative;
}
.input-color input {
padding-left: 60px; border-style: dotted;
border-color: white; width: 300px;
}
.input-color .color-box {
width: 40px;
height: 22px;
display: inline-block;
position: absolute;
left: 10px;
top: 5px;
}
.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: 15px/30px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 353px;
top: 20px;
left: 40px;
padding: 1px;
background-color: #FFFFFF;
color: #000000;
opacity: 0.9;
}
.map-overlay-inner .categoryLabel {
display: block;
color: #FFFFFF;
background-color: #4d4d4d;
font-weight: bold;
font-size: 21px;
margin: 30 30 3px;
}
#features {
z-index: 1;
top: 0;
padding: 10px;
height: 320px;
margin-top: 10px;
width: 250px;
background-color: #FFFFFF;
}
#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-2 top'>
<div class='map-overlay-inner'>
<fieldset>
<label class="categoryLabel">_Vues cartographiques</label>
<div id="bouton" class="button">
<button id="2D" class="btn btn-primary">Carto classique</button>
<button id="3D" class="btn btn-primary">Carto en 3D</button>
<BR>
<BR>
<B>Nombres de planchers (359 884 parcelles)</b>
<div class="input-color">
<input type="text" value="0 et 1 planchers" />
<div class="color-box" style="background-color: #2c7bb6;"></div>
<!-- Replace "#FF850A" to change the color -->
</div>
<div class="input-color">
<input type="text" value="2 à 4 planchers" />
<div class="color-box" style="background-color: #abd9e9;"></div>
<!-- Replace "navy" to change the color -->
</div>
<div class="input-color">
<input type="text" value="5 à 9 planchers" />
<div class="color-box" style="background-color: #ffffbf;"></div>
<!-- Replace "#FF850A" to change the color -->
</div>
<div class="input-color">
<input type="text" value="10 à 15 planchers" />
<div class="color-box" style="background-color: #fdae61;"></div>
<!-- Replace "navy" to change the color -->
</div>
<div class="input-color">
<input type="text" value="Plus de 15 planchers" />
<div class="color-box" style="background-color: #d7191c;"></div>
<!-- Replace "navy" to change the color -->
</div>
</div><BR>
<label class="categoryLabel">_ Lieux</label>
<button id="PARIS" class="btn btn-primary">Nation</button>
<button id="OLYMP" class="btn btn-primary">13eme Ardt</button>
<button id="G" class="btn btn-primary">Grenelle</button>
<button id="S" class="btn btn-primary">Stalingrad</button>
</div><BR>
Source : Mairie de Paris / Direction de l'Urbanisme <br>
Dataset disponible sur le portail <a href="https://opendata.paris.fr/explore/dataset/volumesbatisparis/information/" target="_blank" >Paris Data</a>
</fieldset> <BR>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ninanoun/cjswczqwb1dkz1fqtlb01sw0e', //stylesheet location
center: [2.33, 48.86], // starting position
zoom: 12.13,
pitch:0,
minZoom:12.13
});
map.on('load', function () {
//Volumebati
map.addSource('bati', {
type: 'vector',
url: 'mapbox://ninanoun.0lg1dzof'});
map.addLayer({
"id": "bati3D",
"type": "fill-extrusion",
"source": "bati",
"layout": {'visibility': 'none'},
"source-layer": "volumesbatisparis-an55g4",
"paint": {'fill-extrusion-color': {'property': 'nb_pl',
'stops': [
[0, '#2c7bb6'],
[3, '#abd9e9'],
[5, '#ffffbf'],
[10, '#fdae61'],
[15, '#d7191c']]},
'fill-extrusion-height': {
'property': 'nb_pl',
'stops': [[0, 3],
[2, 6],
[5, 15],
[10, 30],
[20, 60],
[30, 90],
[40, 120],
[50, 150],
]},
'fill-extrusion-opacity': 0.90,
'fill-extrusion-base': 0,
'fill-extrusion-vertical-gradient':true}
});
map.addLayer({
"id": "bati2D",
"type": "fill",
"source": "bati",
"layout": {'visibility': 'visible'},
"source-layer": "volumesbatisparis-an55g4",
"paint": {'fill-color': {'property': 'nb_pl',
'stops': [
[0, '#2c7bb6'],
[3, '#abd9e9'],
[5, '#ffffbf'],
[10, '#fdae61'],
[15, '#d7191c']]},
'fill-opacity':1}
});
map.addLayer({
"id": "bati",
"type": "fill",
"source": "bati",
"layout": {'visibility': 'none'},
"source-layer": "volumesbatisparis-an55g4",
"paint": {'fill-color': '#fdae61'},
'fill-opacity': 0.90
});
//Volumenonbati
map.addSource('nonbati', {
type: 'vector',
url: 'mapbox://ninanoun.0qqfdqbv'});
map.addLayer({
"id": "nonbati",
"type": "fill",
"source": "nonbati",
"layout": {'visibility': 'none'},
"source-layer": "volumesnonbatisparis-6afrw6",
"paint": {'fill-color': '#47d1d1', 'fill-opacity': 0.6}
});
//Arrondissement
map.addSource('arr', {
type: 'vector',
url: 'mapbox://ninanoun.4n2x4b38'});
map.addLayer({
"id": "arr",
"type": "line",
"source": "arr",
"layout": {'visibility': 'visible'},
"source-layer": "arrondissements-acjxwy",
"paint": {"line-color": "#000000", "line-width": 1.5} });
//Configuration changement des couches
switchlayer = function (lname) {
if (document.getElementById(lname + "CB").checked) {
map.setLayoutProperty(lname, 'visibility', 'visible');
} else {
map.setLayoutProperty(lname, 'visibility', 'none');
}
}
});
//Ajout échelle cartographique
map.addControl(new mapboxgl.ScaleControl({
maxWidth: 120,
unit: 'metric'}));
//Ajout boutons de controle
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
// Config affichage boutons 2D 3D
document.getElementById('3D').addEventListener('click', function ()
{ map.flyTo({
pitch: 60,
bearing: -10 });
map.setLayoutProperty('bati3D', 'visibility', 'visible');
map.setLayoutProperty('bati2D', 'visibility', 'none');
});
document.getElementById('2D').addEventListener('click', function ()
{ map.flyTo({
pitch: 0,
bearing: 0
});
map.setLayoutProperty('bati2D', 'visibility', 'visible');
map.setLayoutProperty('bati3D', 'visibility', 'none');
});
document.getElementById('PARIS').addEventListener('click', function ()
{ map.flyTo({
pitch: 0, center: [2.3959, 48.845], // starting position
zoom: 15.1, pitch:60,
bearing: -10 });
});
document.getElementById('OLYMP').addEventListener('click', function ()
{ map.flyTo({
pitch: 0, center: [2.36, 48.822], // starting position
zoom: 15,
bearing: -10, pitch:60 });
});
document.getElementById('G').addEventListener('click', function ()
{ map.flyTo({
pitch: 0, center: [2.28, 48.85], // starting position
zoom: 15.5,
bearing: -10, pitch:60 });
});
document.getElementById('S').addEventListener('click', function ()
{ map.flyTo({
pitch: 0, center: [2.374, 48.89], // starting position
zoom: 15.5,
bearing: -20, pitch:60 });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment