Skip to content

Instantly share code, notes, and snippets.

@mastersigat

mastersigat/.block

Last active May 22, 2018 12:10
Show Gist options
  • Save mastersigat/c5bef54cfad8dd7bd0a9f384a45d771e to your computer and use it in GitHub Desktop.
Save mastersigat/c5bef54cfad8dd7bd0a9f384a45d771e to your computer and use it in GitHub Desktop.
Download ZIP
#MapboxGL / Extrusion carreaux
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<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>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; background-color:#000000; }
#bandeau {
width:100%;
height:80px;
background-color:#FFFFFF;
}
#map {width: 100%;
height:800px;
margin-right: auto;
margin-left: auto;
border-width:2px;
border-style:solid;
border-color:black;
position: absolute;
}
.map-overlay2 {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: #FFFFFF;
position: absolute;
right: 10%;
top: 2%;
width: 500px;
}
.map-overlay2 .map-overlay-inner {
font-size: 16px;
color: #000000;
}
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
color: #FFFFFF;
position: absolute;
width: 30%;
left: 1%;
bottom : 2%;
background-color: #FFFFFF;
}
.map-overlay .map-overlay-inner {
background-color: #34335;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
color: #000000;
}
.map-overlay .legend .bar {
height: 10px;
width: 100%;
background: linear-gradient(to right, #1a9850, #ffffbf, #d73027);
}
</style>
</head>
<body>
<div id='map'> <div id='bouton'>
</div></div>
<div class="btn-group">
<button id="2D" class="btn btn-primary">Carto classique</button>
<button id="3D" class="btn btn-primary">Carto 3D</button>
</div>
<div class='map-overlay2 top'>
<div class='map-overlay-inner'>
<div>
<button id='Toulouse'>Toulouse</button>
<button id='Montpellier'>Montpellier</button>
<button id='Carca'>Carcassonne/Narbonne</button>
<button id='Perpignan'>Perpignan</button>
</div>
</div>
</div>
<div class='map-overlay top'>
<div class='map-overlay-inner'>
<div id='legend' class='legend'>
<div class='bar'></div>
<div> <b>Nombre d'individus par carreaux</b> (1-1495)<i> <br> INSEE 2012</i></div>
</div>
</div>
</div>
<script>
// Configuration carte
mapboxgl.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [3.80, 43.574], // starting position [lng, lat]
zoom: 10,
pitch : 0
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
// Ajout routes
map.on('style.load', function() {
map.on('load', function () {
map.addSource('mapbox-streets-v7', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v7'});
map.addLayer({
"id": "routes",
"type": "line",
"source": "mapbox-streets-v7",
"filter": ["all", ["in", "class", "motorway", "trunk", "primary"]],
"layout": {'visibility': 'visible'},
"source-layer": "road",
"paint": {"line-color": " #0033cc", "line-width": 1.5}
});
});
// Ajout careaux
map.addSource('Carro', {
'type': 'vector',
url: 'mapbox://ninanoun.ccqv85b4'});
// Remplissage carreaux
map.addLayer({
'id': 'classique',
'type': 'fill',
'source': 'Carro',
'source-layer': 'karo-dq4lp6',
'layout': {
'visibility': 'visible'
},
'paint': {
'fill-color': {
'property': 'ind_c',
'stops': [
[1, '#1a9850'],
[10, '#91cf60'],
[20, '#d9ef8b'],
[50, '#ffffbf'],
[100, '#fee08b'],
[150, '#fc8d59'],
[200, '#d73027']
]
}, 'fill-opacity': 0.6} });
// Extrusion 3D carreaux
map.addLayer({
'id': 'extrude',
'type': 'fill-extrusion',
'source': 'Carro',
'source-layer': 'karo-dq4lp6',
'layout': {
'visibility': 'none'},
'paint': {
'fill-extrusion-color': {
'property': 'ind_c',
'stops': [
[1, '#1a9850'],
[50, '#91cf60'],
[100, '#d9ef8b'],
[200, '#ffffbf'],
[300, '#fee08b'],
[500, '#fc8d59'],
[1000, '#d73027']]
},
'fill-extrusion-height': {
'property': 'ind_c',
'stops': [[10, 0],
[50, 200],
[100, 400],
[200, 800],
[300, 1200],
[500, 1500],
[1000, 4000],
[1500, 12000],
]},
'fill-extrusion-opacity': 0.95,
'fill-extrusion-base': 0
}
});
// Ajout couche communes
map.addSource('Communes', {
'type': 'geojson',
'data': './epci.geojson'
});
map.addLayer({
'id': 'communesRM',
'type': 'line',
'source': 'Communes',
'layout': {
'visibility': 'visible', "line-cap": "round",
"line-join": "round"},
"paint": {
"line-color": "#999999",
"line-width": 1
}
});
});
// Config affichage boutons
document.getElementById('3D').addEventListener('click', function ()
{ map.flyTo({zoom: 10,
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'}));
// Configuration onglets géographiques
document.getElementById('Toulouse').addEventListener('click', function ()
{ map.flyTo({zoom: 10,
center: [1.42, 43.6043],
});
});
// Configuration onglets géographiques
document.getElementById('Montpellier').addEventListener('click', function ()
{ map.flyTo({zoom: 10,
center: [3.80, 43.574],
});
});
// Configuration onglets géographiques
document.getElementById('Carca').addEventListener('click', function ()
{ map.flyTo({zoom: 10,
center: [2.630, 43.174],
});
});
// Configuration onglets géographiques
document.getElementById('Perpignan').addEventListener('click', function ()
{ map.flyTo({zoom: 10,
center: [2.804, 42.607],
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment