25:["$","title",null,{"children":"Essai carto Leaflet | leclercprof | Observable"}] 49:T745,Lille_iris_carte1 = { // Limitation de la fenêtre de la carte à une certaine taille let width = 700 let height = 500 let container = DOM.element('div', { style: `width:${width}px;height:${height}px` }); yield container; //Ici définition du zoom pour visualisation lIlle 12 après essai + légende let map = L.map(container, {maxZoom: 12, minZoom: 12}); // utilisation d'un fond de carte de CartO let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr }).addTo(map); //1. creation d'une nouvelle couche geoJson à partir du fichier téléchargé //2. Au lieu de rentrer les styles directement appel à un objet qui contient des styles prédéfinis //3. Popup avec le nom de l'iris et le taux d'actif let LilleIrisLayer = L.geoJson(lille_iris_txactif, {style: styleLille}) .bindPopup(d => d.feature.properties.nom_iris + '
Taux actif: ' + d.feature.properties.tx_actif_15_64) .addTo(map); //4. ajout de la couche à la carte // Trouve les limites des objets spatiaux automatiquement et fait correspondre la fenêtre de visualisation de la carte (pas besoin de zommer (désactivation) ni de centrer la carte map.fitBounds(LilleIrisLayer.getBounds()); // legende (repris et adapté de leaflet var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 25, 30, 40, 50, 60, 70, 80], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '
' : '+'); } return div; }; legend.addTo(map); }4a:T7cf,LilleIrisCarte2 = { // Limitation de la fenêtre de la carte à une certaine taille let width = 700 let height = 500 let container = DOM.element('div', { style: `width:${width}px;height:${height}px` }); yield container; //Ici définition du zoom pour visualisation lIlle 12 après essai + légende let map = L.map(container, {maxZoom: 14, minZoom: 12}); //add base layer let baseLayer = L.tileLayer(cartoLight, { attribution: cartoAttr, subdomains: 'abcd', maxZoom: 20, minZoom: 0 }).addTo(map); // Calcul du rayon des cercles (manque l'initiation de la variable) var rayon = 0 var rayonMax = 30 // var valeurMax = 0 ne fonctionne pas /* fonction de calcul de la valeur max function ChercheValeurMax(pop_tot_15_64){ return valeurMax=Math.max(pop_tot_15_64); } */ // fonction de calcul du rayon maiq il faut rentrer à la main le max de la série function setSizeIcon(pop_tot_15_64){ return rayon=Math.sqrt(pop_tot_15_64)*(rayonMax / Math.sqrt(3488)); } //passing a pointToLayer function in a GeoJSON options object when creating the GeoJSON layer. //This function is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker. //we use arrow notation here, but this essentially is the same as using an anonymous function like so: function (feature, latlng){...return stuff} let LillePointLayer = L.geoJSON(lille_irisc_pop, { pointToLayer: (feature, latlng) => {return L.circleMarker(latlng, {color: 'white', weight: 1.5, radius:setSizeIcon(feature.properties.pop_tot_15_64), fillColor: 'black', fillOpacity: 1}); }}) .bindTooltip(function (Layer) { return 'Iris: '+ Layer.feature.properties.nom_iris + '
Population tot. = ' + Layer.feature.properties.pop_tot_15_64; }) .addTo(map); //finds bounds of polygon and automatically gets map view to fit map.fitBounds(LillePointLayer.getBounds()); } 4b:[{"id":"031eddbc0b419e76ce0f1019ba99f3a6736432f6bb8e89ed6a45ed076df6543f692e5fe3371b207c7cbce7dadee607a31f4ac4e8ecad2479d9814921e1c84b9b","href":"https://static.observableusercontent.com/files/031eddbc0b419e76ce0f1019ba99f3a6736432f6bb8e89ed6a45ed076df6543f692e5fe3371b207c7cbce7dadee607a31f4ac4e8ecad2479d9814921e1c84b9b","name":"Lille_Iris_dataPop.csv","type":"text/csv","lastModified":1657479337304.521,"size":12895},{"id":"74ea646883bc0c8cefb18613c3b4484b6477c45d8268a015e0f9d55a89efc3726d5a5bdb927658cf7516e03ccfabf23b4c2299f4df39b3775057a1887898a3d2","href":"https://static.observableusercontent.com/files/74ea646883bc0c8cefb18613c3b4484b6477c45d8268a015e0f9d55a89efc3726d5a5bdb927658cf7516e03ccfabf23b4c2299f4df39b3775057a1887898a3d2","name":"Lille_IrisC_Pop.geojson","type":"application/geo+json","lastModified":1657479337304.521,"size":29441},{"id":"5fa2f75d5a10c280e1ebd8cf8c34af01038331da33eef571135c5f0c58ece47204dbed449ebbf78316454700c9b7488fad7b60eb745325606290d65d0c2015f5","href":"https://static.observableusercontent.com/files/5fa2f75d5a10c280e1ebd8cf8c34af01038331da33eef571135c5f0c58ece47204dbed449ebbf78316454700c9b7488fad7b60eb745325606290d65d0c2015f5","name":"Lille_IRIS_txactif.geojson","type":"application/geo+json","lastModified":1657479337304.521,"size":106037}] 29:{"id":"e09d4364ea158417","slug":null,"title":"Essai carto Leaflet","thumbnail":"14567bfe51afd9cc090a732276e6230955dee2ed1f19ad33d4581db17c72d5fa","access_level":"public","create_time":"$D2022-07-10T18:55:37.304Z","update_time":"$D2022-07-11T21:12:44.337Z","view_time":null,"first_public_time":"$D2023-09-26T17:26:23.174Z","has_unpublished_edits":null,"fork":{"id":"b75ba828d129bbef","slug":"adaptation-de-tutorial-7","title":"Adaptation de Tutorial 7","owner":{"id":"247949fb443735bb","login":"leclercprof","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"247949fb443735bb","login":"leclercprof","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18297924e85315e91ba6f33c970816b5b35161a16b5426ebba00e054c2b646c3","tier":"starter_2024","bio":"","following":false},"version":3571,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca0fb5b62342ce8f","login":"leclercprof","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18297924e85315e91ba6f33c970816b5b35161a16b5426ebba00e054c2b646c3","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ca0fb5b62342ce8f","login":"leclercprof","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18297924e85315e91ba6f33c970816b5b35161a16b5426ebba00e054c2b646c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Essai carto Leaflet","cells":[{"id":932,"value":"# Essai carto Leaflet\n\n## About this Notebook\nMaps and Geocoding in Leaflet + Vega-Lite. There are no exercises (except for one optional challenge) for this notebook, but you are free to practice modifying the examples by adding colors or legends — [see Leaflet's interactive Choropleth example](https://leafletjs.com/SlavaUkraini/examples/choropleth/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1022,"value":"L = require('leaflet@1.8.0') // mise à jour de leaflet en 1.8.0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":" // mise à jour de leaflet en 1.8.0","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1409,"value":"\n--------------------\n### Mapping Layers on Leaflet's Maps: More Areas\n\nHow about a chloropleth of Vancouver's neighbouhoods showing population and density? Here, I've attached a GeoJSON file provided by the City of Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/local-area-boundary/information/?disjunctive.name).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3061,"value":"lille_iris_txactif = FileAttachment(\"Lille_IRIS_txactif.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3165,"value":"## Carte choroplèthe Lille + challenge 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3063,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3080,"value":"function styleLille(feature) {\n return {\n fillColor: getTxColor(feature.properties.tx_actif_15_64),\n weight: 1,\n opacity: .5,\n color: 'white',\n dashArray: '3',\n fillOpacity: 0.7\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3085,"value":"function getTxColor(t) {\n\t return t > 80 ? '#005a32' :\n\t t > 70 ? '#238443' :\n\t t > 60 ? '#41ab5d' :\n\t t > 50 ? '#78c679' :\n\t t > 40 ? '#addd8e' :\n\t t > 30 ? '#d9f0a3' :\n\t t > 25 ? '#f7fcb9' :\n\t '#ffffe5';\n\t}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"\n-----\n### Mapping Points on Leaflet's Maps: Locations (Points/Circles)\n\nThis map shows community gardens and fruit trees in Vancouver. I also took this from Vancouver's [Open Data Portal](https://opendata.vancouver.ca/explore/dataset/community-gardens-and-food-trees/information/). When I expand on the `features` array, we see the coordinates are represented as two points (lat & long).\n\nBy default, Leaflet gives you these blue pins to show points. Click on them to see more info about the tooltips.\n\nAs well, we can also drop in our own pins (and even make custom pins. The [Leaflet Tutorial](https://leafletjs.com/SlavaUkraini/examples/quick-start/) has more information about how you could do that. For now, try uncommenting the section specified in the code below, then scroll into the Downtown Vancouver area of the map and see what is different.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1786,"value":"Points are handled differently than lines and polygons in Leaflet. By default simple markers are drawn for GeoJSON Points, as we just saw above. We can alter this by passing a `pointToLayer` function in a GeoJSON options object when creating the GeoJSON layer. This function is passed a `LatLng` and should return an instance of ILayer, in this case likely a `Marker` or `CircleMarker`.\n\nHere we're using the pointToLayer option to create a CircleMarker:\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3174,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3180,"value":"// fichier des centroïdes des iris de Lille\nlille_irisc_pop = FileAttachment(\"Lille_IrisC_Pop.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3560,"value":"### finalement fichier csv inutile car les données sont dans le geojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3211,"value":"// fichier de données inital\nlille_iris_datapop = FileAttachment(\"Lille_Iris_dataPop.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3243,"value":"// visualise la table des données iris lille\nviewof table = Inputs.table(lille_iris_datapop, {\n maxHeight: \"200px\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3247,"value":"// vérification contenu de la table\n{//return lille_iris_datapop.length\nreturn (lille_iris_datapop[0].size_pop_tot)\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1791,"value":"While there's more complex ways of making point layers in leaflet with D3, having to learn the core base of D3 is quite complicated and might not be the best use of your time for this assignment. \nSometimes, you'll see Leaflet examples using D3 (and Lyn's [notebook here](https://observablehq.com/@drlynb/leaflet-and-d3-interactive-overlays) has an example of how to add points using D3 to leaflet. However, the method above is meant to be a bit less dense than D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1049,"value":"--------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3428,"value":"## Sert à dessiner la légende","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3038,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"-----\n## Resources\n**Tutorial Specific**\n- See [Rusty Conover's Leaflet map with legend for a better Observable specific example](https://observablehq.com/@rustyconover/2020-04-22-apparent-temperature-visualized-with-h3-leaflet)\n- [Leaflet Tutorials, Examples, and Documentation](https://leafletjs.com/SlavaUkraini/)\n \n**JAVASCRIPT**\n- For those needing a Javascript refresher, Min Hyung Chung has a great brief on Javascript in [Section 1](https://observablehq.com/@chunggrace/lab-2-javascript-introduction-to-vega-lite#cell-26) of her notebook\n\n**COLOR RESOURCES**\n- [CSS Color list](https://www.w3schools.com/cssref/css_colors.asp)\n- [https://coolors.co/](https://coolors.co/)\n- [ColorBrewer](https://colorbrewer2.org/)\n\n---------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2485,"value":"## Annexe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"### Helper Functions for Styling Maps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1478,"value":"cartoAttr = '© OpenStreetMap, © CARTO'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"cartoLight = \t'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1468,"value":"### Datasets and Related Arrays Used","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null