2f:null 30:["$","title",null,{"children":"Aperçu des possibilités de la bibliothèque Leaflet | Sigma | Observable"}] 35:[] 33:{"id":"42260bc12cce74f2","slug":"apercu-des-possibilites-de-la-bibliotheque-leaflet","title":"Aperçu des possibilités de la bibliothèque Leaflet","thumbnail":"34cfde6bab49d1b7450ee32cf681e6eb707f62e65cbc399edf962b54c1d5a3e0","access_level":"public","create_time":"$D2020-12-11T13:50:34.194Z","update_time":"$D2024-12-18T13:02:49.806Z","view_time":null,"first_public_time":"$D2020-12-12T07:57:18.140Z","has_unpublished_edits":null,"fork":false,"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":104,"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":3,"collection":{"id":"4343dbcc9aaf7764","slug":"webmapping","title":"WebMapping","owner":{"id":"85bc7cce97523336","login":"sigma-toulouse","name":"Sigma"}},"type":"notebook","body":{"title":"Aperçu des possibilités de la bibliothèque Leaflet","cells":[{"id":0,"value":"md`# Aperçu des possibilités de la bibliothèque Leaflet`","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":true,"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":80,"value":"// La carte\nmap = {\n // Création du

conteneur de la carte\n let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });\n \n // Rendu du conteneur pour qu'il se dimensionne avant que Leaflet ne dessine la carte\n yield container;\n \n // Création de la carte avec une couche OSM issue de MapBox (token privé limité)\n let map = L.map(container).setView([43.6, 1.45], 12);\n\n let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n maxZoom: 19,\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n \n // Ajout d'un marqueur\n const marker = L.marker([43.6, 1.44]).addTo(map);\n marker.bindPopup(\"Coucou !
Je suis un popup.\");\n\n const marker2 = L.marker([43.5781, 1.4]).addTo(map);\n marker2.bindPopup(\"Coucou !
Je suis un autre popup.\");\n\n const echelle = L.control.scale().addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Exercices :\n- Modifier le centrage et le niveau de zoom de la carte.\n- Ajouter un nouveau marqueur sur l'UT2J.\n- Changer le style de fond de carte MapBox [(liste)](https://docs.mapbox.com/api/maps/styles/)\n- Ajouter des contrôles supplémentaires dans l'interface : zoom et échelle [(doc.)](https://leafletjs.com/reference-1.7.1.html#control-scale).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"// Inspiré de https://observablehq.com/@tmcw/leaflet","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 34:"$33:body"