2b:null 2c:["$","title",null,{"children":"Leaflet et fonds de carte en tuiles | Anders | Observable"}] 31:T528,map1 = { /* Specifique à observable Dans le contexte d'une page web, il nous faut une

avec des propriétés height et width définies */ const WIDTH = width const HEIGHT = width * 0.6 let container = DOM.element('div', { style: `width:${WIDTH}px;height:${HEIGHT}px` }) yield container // Monter la carte sur la

// Dans une page web, passez l'id de la

à L.map const map = L.map(container) // définir la position de la carte "[latitude, longitude], zoom" // ATTENTION les valeurs latitude et longitude sont inversée par rapport à un point GeoJSON .setView([46.7785, 6.6412], 14) // Fond de carte L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map) // Ajouter des données au format GeoJSON L.geoJSON( // un objet GeoJSON { type: 'Feature', properties: { name: 'Yverdon' }, geometry: { type: 'Point', coordinates: [6.6412, 46.7785] } }, // options // ici nous ajoutons un "popup" à chaque "feature" affichant la propriété "name" { onEachFeature: (feature, layer) => layer.bindPopup(feature.properties.name), } ).addTo(map) }32:T5ec,md`## Les tuiles du fond de carte Comme il aurait été impossible de servir une seule image pour le fond de cartes, celui-ci est divisé en "tuiles". Ce sont des images carrées de tailles identiques organisées selon leur position dans l'espace et le niveau de "zoom". Cette tuile [https://tile.osm.ch/switzerland/15/16988/11554.png](https://tile.osm.ch/switzerland/15/16988/11554.png) est au niveau de "zoom" 14. Sa position X est 16988 et sa position Y, 11554. ![Tuile](https://tile.osm.ch/switzerland/15/16988/11554.png) Article [wikipedia](https://en.wikipedia.org/wiki/Tiled_web_map): > *Most tiled web maps follow certain Google Maps conventions:* > * *Tiles are 256x256 pixels* > * *At the outer most zoom level, 0, the entire world can be rendered in a single map tile.* > * *Each zoom level doubles in both dimensions, so a single tile is replaced by 4 tiles when zooming in. This means that about 22 zoom levels are sufficient for most practical purposes.* > * *The Web Mercator projection is used, with latitude limits of around 85 degrees.* > *The de facto OpenStreetMap standard, known as Slippy Map Tilenames or XYZ, follows these and adds more:* > * *An X and Y numbering scheme* > * *PNG images for tiles* > * *Images are served through a Web server, with a URL like **http://.../Z/X/Y.png**, where Z is the zoom level, and X and Y identify the tile.* Pour illustrer comment ces "tuiles" sont organisées, zoomez la carte ci-dessous pour voir les coordonnées X, Y et Z de chaque tuile. `33:T798,map2 = { const WIDTH = width const HEIGHT = width * 0.6 let container = DOM.element('div', { style: `width:${WIDTH}px;height:${HEIGHT}px` }) yield container const map = L.map(container) .setView([0, 0], 1) // Fond de carte const tileLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}{r}.{ext}', { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', subdomains: 'abcd', minZoom: 0, maxZoom: 20, ext: 'png' }).addTo(map) // Dessiner une ligne horizontale et une ligne verticale // pour encadrer chaque tuile const drawLine = (ctx, pt1, pt2) => { ctx.beginPath() ctx.moveTo(pt1[0], pt1[1]) ctx.lineTo(pt2[0], pt2[1]) ctx.lineWidth = 5 ctx.strokeStyle = 'indianred' ctx.stroke() } // Ecrire les coordonnées de chaque tuile const writeText = (ctx, coords, size) => { const txt = `x: ${coords.x} y: ${coords.y} z: ${coords.z}` ctx.fillStyle = 'indianred' ctx.textAlign = 'center' ctx.font = 'bold 15pt Courierl' ctx.fillText(txt, size.x / 2, size.y / 2) } // Un fond blanc pour voir les coordonnées const drawBackground = (ctx, size) => { ctx.rect(0, 0, size.x, size.y) ctx.globalAlpha = 0.7 ctx.fillStyle = 'white' ctx.fill() ctx.globalAlpha = 1 } const test = new L.GridLayer() test.createTile = function(coords) { const tile = L.DomUtil.create('canvas', 'leaflet-tile'); const size = this.getTileSize(); tile.width = size.x; tile.height = size.y; const ctx = tile.getContext('2d'); drawBackground(ctx, size) drawLine(ctx, [0, 0], [size.x, 0]) drawLine(ctx, [0, 0], [0, size.y]) writeText(ctx, coords, size) return tile } test.addTo(map) }34:[] 2f:{"id":"5cb998ad529d36bc","slug":"leaflet-et-fond-de-carte-en-tuiles","title":"Leaflet et fonds de carte en tuiles","thumbnail":"daddaf76edc7ccee858dfe1c3615eb5a82e26fb855059341e1ee71812bd195e1","access_level":"public","create_time":"$D2019-04-08T12:03:34.140Z","update_time":"$D2026-06-29T17:14:18.123Z","view_time":null,"first_public_time":"$D2019-04-10T13:05:23.641Z","fork":{"id":"98a5ade394f8e042","slug":"leaflet-playground","title":"Leaflet playground","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"stars":1,"starred":false,"owner":{"type":"team","id":"185626bcadc26005","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":"starter_2024"},"version":143,"publish_version":143,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null}],"members":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"04f4b394708037c7","slug":"heig-visdom-2020","title":"HEIG-visdom-2020","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"type":"notebook","body":{"title":"Leaflet et fonds de carte en tuiles","cells":[{"id":0,"value":"md`# Leaflet et fonds de carte en tuiles\n\nLeaflet est une librairie pour créer une carte navigable. Elle a été conçue pour être simple d'utilisation, comme l'explique l'auteur dans cette vidéo, dont le message est l'importance de la simplicité.\n\n[![Leaflet story](https://img.youtube.com/vi/NLbyHffKQuU/0.jpg)](https://www.youtube.com/watch?v=NLbyHffKQuU)\n\nLes [tutoriels](https://leafletjs.com/examples.html), et la [documentation](https://leafletjs.com/reference-1.6.0.html), sont excellents.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md`## Trouver des fonds de carte\n\n[Leaflet providers](https://leaflet-extras.github.io/leaflet-providers/preview/).\n\nN'oubliez pas l'attribution! Et vérifiez les conditions d'utilisation pour des gros projets.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"