Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/departements-france-2017.json

Last active December 31, 2017 10:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/c7d1d5ae918f168323f6b5c82059608c to your computer and use it in GitHub Desktop.
Save ThomasG77/c7d1d5ae918f168323f6b5c82059608c to your computer and use it in GitHub Desktop.
Download ZIP
Create legend for proportional circles in OpenLayers
Display the source blob
Display the rendered blob
Raw
departements-france-2017.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Thematic map with legend</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
#popup {
background-color: white;
border: solid 1px #888888;
padding: 10px;
border-radius: 5px;
}
#container {
position: relative;
height: inherit;
width: inherit;
}
#canvas, #map {
position: absolute;
background-color: white;
}
#canvas {
bottom: 0px;
}
</style>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.6/papaparse.min.js"></script>
</head>
<body>
<div id="container">
<div id="map" class="map"></div>
<div id="popup"></div>
<canvas id="canvas"></canvas>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
const radiusCalculation = (val, coeff) => {
return (val / Math.PI) ** 0.5 * coeff;
};
const vectorLayerSource = new ol.source.Vector({
url: 'departements-france-2017.json',
format: new ol.format.GeoJSON()
});
const fillCircle = new ol.style.Fill({
color: 'rgba(125, 125, 125, 0.6)'
});
const strokeCircle = new ol.style.Stroke({
color: '#ffffff',
width: 1
});
const styleProportionalCircle = (feature, resolution) => {
const extent = feature.getGeometry().getExtent();
const center = ol.extent.getCenter(extent);
const geom = new ol.geom.Point(center);
return new ol.style.Style({
geometry: geom,
image: new ol.style.Circle({
stroke: strokeCircle,
fill: fillCircle,
radius: radiusCalculation(feature.get('pop_tot'), 0.02)
}),
zIndex: feature.get('rank')
});
};
const vectorLayer = new ol.layer.Vector({
source: vectorLayerSource,
style: styleProportionalCircle,
renderMode: 'image'
});
const rasterLayer = new ol.layer.Tile({
opacity: 0.4,
source: new ol.source.XYZ({
url: 'https://{a-c}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
attributions:
'&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
})
});
const map = new ol.Map({
layers: [rasterLayer, vectorLayer],
controls: ol.control.defaults({
attributionOptions: {
collapsed: false
}
}),
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([2.21298, 46.44362]),
zoom: 6
})
});
const popupElement = document.getElementById('popup');
var popup = new ol.Overlay({
element: popupElement
});
map.addOverlay(popup);
const intlNumberFormat = new Intl.NumberFormat('fr-FR');
var displayFeatureInfo = (pixel, coordinate) => {
var feature = map.forEachFeatureAtPixel(pixel, feature => feature);
if (feature) {
const formated = intlNumberFormat.format(feature.get('pop_tot'));
popupElement.innerHTML = `<b>Département:</b><br>
${feature.get('NOM_DEP')} (${feature.get('INSEE_DEP')})<br>
<b>Population totale</b>:<br>
${formated} habitants (rang ${feature.get('rank')})`;
popup.setPosition(coordinate);
popupElement.style.display = '';
} else {
popupElement.innerHTML = '';
popupElement.style.display = 'none';
}
};
map.on('pointermove', e => {
if (e.dragging) {
popupElement.style.display = 'none';
return;
}
displayFeatureInfo(e.pixel, e.coordinate);
});
const onChangeListener = vectorLayerSource.on('change', async e => {
if (vectorLayerSource.getState() == 'ready') {
ol.Observable.unByKey(onChangeListener);
const response = await fetch('population-insee-2015.csv');
const text = await response.text();
const data = Papa.parse(text, {
header: true
});
const sortedData = data.data
.slice(0)
.filter(ds => ds.code_dept.length < 3)
.sort((a, b) => Number(b.pop_totale) - Number(a.pop_totale))
.map((ds, i) => {
ds.rank = i + 1;
return ds;
});
const hashTable = sortedData.reduce((acc, curr) => {
acc[curr.code_dept] = {
pop_totale: Number(curr.pop_totale),
rank: curr.rank
};
return acc;
}, {});
vectorLayerSource.forEachFeature(feature => {
var codeDept = feature.get('INSEE_DEP');
feature.set('pop_tot', hashTable[codeDept].pop_totale);
feature.set('rank', hashTable[codeDept].rank);
});
generateLegend(vectorLayerSource.getFeatures());
}
});
const generateLegend = features => {
const vals = features.map(el => el.get('pop_tot'));
const max = Math.max(...vals);
const min = Math.min(...vals);
const canvas = document.getElementById('canvas');
var vectorContext = ol.render.toContext(canvas.getContext('2d'), {
size: [140, 80]
});
[min, (min + max) / 3, max]
.slice(0)
.reverse()
.forEach(val => {
const radius = radiusCalculation(val, 0.02);
const text = new ol.style.Text({
offsetX: 60,
offsetY: -radius,
text: `${intlNumberFormat.format(val.toFixed(0))} habs`
});
const newStyle = new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: '#ffffff',
width: 1
}),
fill: fillCircle,
radius: radius
}),
text: text
});
vectorContext.setStyle(newStyle);
vectorContext.drawGeometry(new ol.geom.Point([30, 60 - (2 + radius)]));
});
};
Raw
population-insee-2015.csv
code_region nom_region code_dept nom_dept nb_arrond nb_cantons nb_communes pop_municipale pop_totale
84 Auvergne-Rhône-Alpes 01 Ain 4 23 408 631877 649012
32 Hauts-de-France 02 Aisne 5 21 804 538659 552529
84 Auvergne-Rhône-Alpes 03 Allier 3 19 317 341613 351626
93 Provence-Alpes-Côte d'Azur 04 Alpes-de-Haute-Provence 4 15 198 161799 166635
93 Provence-Alpes-Côte d'Azur 05 Hautes-Alpes 2 15 167 140916 146060
93 Provence-Alpes-Côte d'Azur 06 Alpes-Maritimes 2 27 163 1082440 1097556
84 Auvergne-Rhône-Alpes 07 Ardèche 3 17 339 324209 333781
44 Grand Est 08 Ardennes 4 19 452 277752 285612
76 Occitanie 09 Ariège 3 13 331 152499 157904
44 Grand Est 10 Aube 3 17 431 309056 316888
76 Occitanie 11 Aude 3 19 436 366957 376667
76 Occitanie 12 Aveyron 3 23 285 279169 290199
93 Provence-Alpes-Côte d'Azur 13 Bouches-du-Rhône 4 29 119 2016622 2045149
28 Normandie 14 Calvados 4 25 538 693579 709986
84 Auvergne-Rhône-Alpes 15 Cantal 3 15 247 146219 151920
75 Nouvelle-Aquitaine 16 Charente 3 19 383 353613 366289
75 Nouvelle-Aquitaine 17 Charente-Maritime 5 27 469 639938 658529
24 Centre-Val de Loire 18 Cher 3 19 290 308992 317101
75 Nouvelle-Aquitaine 19 Corrèze 3 19 283 241871 250077
94 Corse 2A Corse-du-Sud 2 11 124 152730 155285
94 Corse 2B Haute-Corse 3 15 236 174553 177438
27 Bourgogne-Franche-Comté 21 Côte-d'Or 3 23 704 533147 546601
53 Bretagne 22 Côtes-d'Armor 4 27 356 598357 618114
75 Nouvelle-Aquitaine 23 Creuse 2 15 258 120365 124569
75 Nouvelle-Aquitaine 24 Dordogne 4 25 520 415417 428032
27 Bourgogne-Franche-Comté 25 Doubs 3 19 578 536959 551143
84 Auvergne-Rhône-Alpes 26 Drôme 3 19 367 504637 519264
28 Normandie 27 Eure 3 23 602 601948 619392
24 Centre-Val de Loire 28 Eure-et-Loir 4 15 375 434035 445361
53 Bretagne 29 Finistère 4 27 279 907796 936292
76 Occitanie 30 Gard 3 23 353 738189 754170
76 Occitanie 31 Haute-Garonne 3 27 588 1335103 1361286
76 Occitanie 32 Gers 3 17 462 190932 198213
75 Nouvelle-Aquitaine 33 Gironde 6 33 538 1548478 1578386
76 Occitanie 34 Hérault 3 25 343 1120190 1140030
53 Bretagne 35 Ille-et-Vilaine 4 27 345 1042884 1070285
24 Centre-Val de Loire 36 Indre 4 13 243 224200 230546
24 Centre-Val de Loire 37 Indre-et-Loire 3 19 273 604966 619651
84 Auvergne-Rhône-Alpes 38 Isère 3 29 521 1251060 1278347
27 Bourgogne-Franche-Comté 39 Jura 3 17 509 260587 270474
75 Nouvelle-Aquitaine 40 Landes 2 15 330 403234 416642
24 Centre-Val de Loire 41 Loir-et-Cher 3 15 276 333050 343392
84 Auvergne-Rhône-Alpes 42 Loire 3 21 326 759411 775977
84 Auvergne-Rhône-Alpes 43 Haute-Loire 3 19 257 227034 234555
52 Pays de la Loire 44 Loire-Atlantique 3 31 212 1365227 1400585
24 Centre-Val de Loire 45 Loiret 3 21 326 673349 691291
76 Occitanie 46 Lot 3 17 322 173400 179573
75 Nouvelle-Aquitaine 47 Lot-et-Garonne 4 21 319 333417 343059
76 Occitanie 48 Lozère 2 13 158 76309 80176
52 Pays de la Loire 49 Maine-et-Loire 4 21 186 810186 833080
28 Normandie 50 Manche 4 27 477 499287 517500
44 Grand Est 51 Marne 5 23 616 572293 585622
44 Grand Est 52 Haute-Marne 3 17 427 179154 184987
52 Pays de la Loire 53 Mayenne 3 17 255 307940 318079
44 Grand Est 54 Meurthe-et-Moselle 4 23 592 734403 748528
44 Grand Est 55 Meuse 3 17 501 190626 196681
53 Bretagne 56 Morbihan 3 21 253 744813 767538
44 Grand Est 57 Moselle 5 27 727 1044486 1064593
27 Bourgogne-Franche-Comté 58 Nièvre 4 17 309 211747 219019
32 Hauts-de-France 59 Nord 6 41 648 2605238 2641081
32 Hauts-de-France 60 Oise 4 21 687 821552 841252
28 Normandie 61 Orne 3 21 394 286618 295936
32 Hauts-de-France 62 Pas-de-Calais 7 39 891 1472648 1496824
84 Auvergne-Rhône-Alpes 63 Puy-de-Dôme 5 31 467 647501 664386
75 Nouvelle-Aquitaine 64 Pyrénées-Atlantiques 3 27 546 670032 690788
76 Occitanie 65 Hautes-Pyrénées 3 17 470 228582 236017
76 Occitanie 66 Pyrénées-Orientales 3 17 226 471038 479421
44 Grand Est 67 Bas-Rhin 5 23 517 1116658 1134800
44 Grand Est 68 Haut-Rhin 4 17 366 762607 777878
84 Auvergne-Rhône-Alpes 69 Rhône 2 13 280 1821995 1852002
27 Bourgogne-Franche-Comté 70 Haute-Saône 2 17 542 237706 245130
27 Bourgogne-Franche-Comté 71 Saône-et-Loire 5 29 567 555408 573281
52 Pays de la Loire 72 Sarthe 3 21 361 568445 583151
84 Auvergne-Rhône-Alpes 73 Savoie 3 19 285 428204 441669
84 Auvergne-Rhône-Alpes 74 Haute-Savoie 4 17 281 793938 816748
11 Île-de-France 75 Paris 1 1 2206488 2228409
28 Normandie 76 Seine-Maritime 3 35 711 1257699 1283249
11 Île-de-France 77 Seine-et-Marne 5 23 510 1390121 1412250
11 Île-de-France 78 Yvelines 4 21 262 1427291 1454532
75 Nouvelle-Aquitaine 79 Deux-Sèvres 3 17 293 374435 385395
32 Hauts-de-France 80 Somme 4 23 779 571879 584143
76 Occitanie 81 Tarn 2 23 319 386543 398190
76 Occitanie 82 Tarn-et-Garonne 2 15 195 255274 261452
93 Provence-Alpes-Côte d'Azur 83 Var 3 23 153 1048652 1065985
93 Provence-Alpes-Côte d'Azur 84 Vaucluse 3 17 151 557548 569618
52 Pays de la Loire 85 Vendée 3 17 267 666714 685673
75 Nouvelle-Aquitaine 86 Vienne 3 19 274 434887 445927
75 Nouvelle-Aquitaine 87 Haute-Vienne 3 21 200 375795 384226
44 Grand Est 88 Vosges 3 17 507 372016 385043
27 Bourgogne-Franche-Comté 89 Yonne 3 21 428 340903 351302
27 Bourgogne-Franche-Comté 90 Territoire de Belfort 1 9 102 144483 147799
11 Île-de-France 91 Essonne 3 21 196 1276233 1294240
11 Île-de-France 92 Hauts-de-Seine 3 23 36 1601569 1620776
11 Île-de-France 93 Seine-Saint-Denis 3 21 40 1592663 1603095
11 Île-de-France 94 Val-de-Marne 3 25 47 1372389 1384068
11 Île-de-France 95 Val-d'Oise 3 21 185 1215390 1231356
01 Guadeloupe 971 Guadeloupe 2 21 32 397990 404542
02 Martinique 972 Martinique 4 34 380877 386875
03 Guyane 973 Guyane 2 22 259865 262381
04 La Réunion 974 La Réunion 4 25 24 850727 860896
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment