2f:null 30:["$","title",null,{"children":"Leaflet pour une cartographie thématique avec un fond GeoJSON | Sigma | Observable"}] 35:Ta7e,// La carte map = { // Création du

conteneur de la carte let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); // Rendu du conteneur pour qu'il se dimensionne avant que Leaflet ne dessine la carte yield container; // Création de la carte avec une couche OSM issue de MapBox (token privé limité) let map = L.map(container).setView([48.86, 2.34], 12); let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); // Ajout d'une couche d'entités GeoJSON provenant d'un fichier attaché let tm = L.geoJSON(carreaux, {style: choroplethe, onEachFeature: onEachFeature}).addTo(map); map.fitBounds(tm.getBounds()); function highlightFeature(e) { var layer = e.target; layer.setStyle({ weight: 1, color: '#222', dashArray: '', fillOpacity: 0.8 }); layer.bringToFront(); info.update(layer.feature.properties); } function zoomToFeature(e) { //map.fitBounds(e.target.getBounds()); } function resetHighlight(e) { tm.resetStyle(e.target); info.update(); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = (props ? '' + variable + '
' + props[variable] + '%' : 'Survolez un carreau'); }; info.addTo(map); var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { let varNum = variables.indexOf(variable); // Numéro de la variable choisie dans la liste var div = L.DomUtil.create('div', 'info legend'), grades = d3.quantize(d3.interpolate(varExtents[varNum][0], varExtents[varNum][1]), nbClasses+1), labels = []; // Boucle pour générer la légende avec les classes et les couleurs for (var i = grades.length - 1; i > 0 ; i--) { div.innerHTML += ' ' + decimales2(grades[i - 1]) + '–' + decimales2(grades[i]) + '
'; } return div; }; legend.addTo(map); }36:[{"id":"9e69d16a3a78d8386c0b003028748aab3eba63ad334f0985788d07ed1ed7e556f6b415977195045626cbaf119ceba3375c12b1c6fb82b5dc0c87445ef33d32ce","href":"https://static.observableusercontent.com/files/9e69d16a3a78d8386c0b003028748aab3eba63ad334f0985788d07ed1ed7e556f6b415977195045626cbaf119ceba3375c12b1c6fb82b5dc0c87445ef33d32ce","name":"filosofi_car_2017.geojson","type":"application/geo+json","lastModified":1702734526501.745,"size":579605},{"id":"ffa491a6cb3a217409094857277b3057f8e311901b79671a9e63174de0e2d1ec82b26768584e82202cab1280f75010b8351ef2d9fc4145dd46f003bcd2a14382","href":"https://static.observableusercontent.com/files/ffa491a6cb3a217409094857277b3057f8e311901b79671a9e63174de0e2d1ec82b26768584e82202cab1280f75010b8351ef2d9fc4145dd46f003bcd2a14382","name":"filo15_paris2ex.geojson","type":"application/geo+json","lastModified":1702735749119.308,"size":1808302},{"id":"1967b3bcb800ab035ff824728cd31208cc6725e1bd48b3568bd4b4a0bb3097b2a972be8c4a7955c4c2b123a566c31922083ebf940b558f5353c086d84e7c626e","href":"https://static.observableusercontent.com/files/1967b3bcb800ab035ff824728cd31208cc6725e1bd48b3568bd4b4a0bb3097b2a972be8c4a7955c4c2b123a566c31922083ebf940b558f5353c086d84e7c626e","name":"filo15_paris2ex.json","type":"application/json","lastModified":1702735815410.879,"size":1031685}] 33:{"id":"c649e8a7b748c194","slug":"leaflet-pour-une-cartographie-thematique-avec-un-fond-geoj","title":"Leaflet pour une cartographie thématique avec un fond GeoJSON","thumbnail":"702826c83457afa14e66d18ce2bdb0039c5ee9cd46cd8afd12fbf0cae5e1932e","access_level":"public","create_time":"$D2023-12-16T13:43:00.287Z","update_time":"$D2023-12-17T10:33:38.604Z","view_time":null,"first_public_time":"$D2023-12-16T13:43:00.287Z","has_unpublished_edits":null,"fork":{"id":"a8f7c2ffc1a79d71","slug":"leaflet-et-une-couche-geojson","title":"Leaflet et une couche GeoJSON","owner":{"id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma"}},"stars":1,"starred":false,"owner":{"type":"team","id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma","avatar_url":"https://avatars-next.observableusercontent.com/e9322803ac5739951b87803227b90baceb0802254d302b995376a94204c226e7","tier":"pro_2024"},"version":415,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null}],"members":[{"type":"individual","id":"dc56e6af58493346","login":"ljegou","name":"Laurent Jégou","avatar_url":"https://avatars-next.observableusercontent.com/447aa44a872789c3c13d2505fdb5a34daaaa3a44590422f4f782b6ea9a4bd3ac","tier":null,"role":"editor"},{"type":"team","id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma","avatar_url":"https://avatars-next.observableusercontent.com/e9322803ac5739951b87803227b90baceb0802254d302b995376a94204c226e7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Leaflet pour une cartographie thématique avec un fond GeoJSON","cells":[{"id":0,"value":"# Leaflet pour une cartographie thématique avec un fond GeoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof variable = Inputs.select(\n variables,\n { value: \"pmen_pauv\", label: \"Variables\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof nbClasses = Inputs.number({value: 6, label: \"Classes\" });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"## Annexes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"// Fond GeoJSON en fichier attaché, EPSG:4326\ncarreaux = FileAttachment(\"filo15_paris2ex.geojson\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"// Liste des variables du fond GeoJSON\nvariables = Object.keys(carreaux.features[1].properties);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"// Affectation d'une couleur de remplissage dans les entités du fond.\nfunction choroplethe(feature) {\n return {\n fillColor: colorQt(feature.properties[variable]),\n weight: 1,\n opacity: 1,\n color: 'lightgrey',\n dashArray: '1',\n fillOpacity: 1\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// Fonction qui associe une couleur entre deux extrèmes d'une palette divisée en nbClasses étapes selon leur étendue.\ncolorQt = {\n let varNum = variables.indexOf(variable); // Numéro de la variable choisie dans la liste\n return d3.scaleQuantile()\n .domain(varExtents[varNum])\n .range(d3.quantize(d3.interpolateHcl('#ffffcc', '#800026'), nbClasses));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"// Calcul des limites des variables, pour la discrétisation.\nvarExtents = {\n let vNoms = Object.keys(carreaux.features[1].properties); // noms des variables du GeoJSON\n let nbv = vNoms.length; // Nb. de variables\n //let nbe = carreaux.features[1].properties[1].length; // Nb. de valeurs pour les variables.\n let ve = [];\n for (let i = 0; i < nbv; i++) {\n ve[i] = [d3.min(valeurs[i]), d3.max(valeurs[i])];\n }\n return ve;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"// Récupération des valeurs des variables dans les propriétés des entités du fond.\nvaleurs = {\n let a = Object.entries(carreaux.features).map(( [k, v] ) => (Object.values(v.properties)));\n return _.unzip(a); // Transposition avec un unzip de l'underscore\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"//Arrondi à deux décimales pour la légende\nfunction decimales2(x) {\n return Number.parseFloat(x).toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"// Lien vers la bibliothèque\nL = require('leaflet');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Lien vers la feuille de styles CSS\nhtml``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// Inspiré de https://observablehq.com/@tmcw/leaflet et https://leafletjs.com/examples/choropleth/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"