2a:null 2b:["$","title",null,{"children":"A Web Map from Scratch | Volodymyr Agafonkin | Observable"}] 30:[] 2e:{"id":"93abcb6e07b3f39a","slug":"simple-web-map","title":"A Web Map from Scratch","thumbnail":"67f839e816db31ee67cfbea3c250ec8cc7ca6882fa7e8a5e3876ab27faeddcc2","access_level":"public","create_time":"$D2020-11-16T10:58:30.307Z","update_time":"$D2025-05-19T09:57:18.800Z","view_time":null,"first_public_time":"$D2020-11-16T19:46:51.184Z","fork":false,"stars":124,"starred":false,"owner":{"type":"team","id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":"starter_2024"},"version":972,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null}],"members":[{"type":"individual","id":"3954cddf6608132f","login":"mourner","name":"Volodymyr Agafonkin","avatar_url":"https://avatars-next.observableusercontent.com/02cfd655debb6fc593dfe4bcacd9520f73e6b33cedef382248d08ecc40822a1b","tier":null,"role":"editor"}],"comments":[{"id":"1c326a736130e800","reply_to_id":null,"content":"osmMap = (lng, lat, zoom, w = width, h = 400) => { \n let result = `

`,\n x = 256 * (1 << zoom) * (lng / 360 + 0.5) - w / 2 | 0,\n y = 256 * (1 << zoom) * (1 - Math.log(Math.tan(Math.PI * (0.25 + lat / 360))) / Math.PI) / 2 - h / 2 | 0;\n \n for (let ty = y / 256 | 0; ty * 256 < y + h; ty++)\n for (let tx = x / 256 | 0; tx * 256 < x + w; tx++) \n result += `

`;\n \n return html`${result}

`;\n}","create_time":"$D2024-10-25T20:06:53.108Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9bb037ee29f09e5c","login":"diego-huerta-giribaldi","name":"DIEGO HUERTA GIRIBALDI","avatar_url":"https://avatars-next.observableusercontent.com/3e6fd9037950ae45d1f717b7efd43bc83091f36820231d77b0bfbfbbbd96fe6a","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":26,"collection":{"id":"056c123897f34436","slug":"tutorials","title":"Tutorials","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"type":"notebook","body":{"title":"A Web Map from Scratch","cells":[{"id":0,"value":"md`# A Web Map from Scratch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":564,"value":"osmMap(-0.15, 51.5, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"md`This static map was made from [OpenStreetMap](https://openstreetmap.org) tiles with *8 lines of code*:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"osmMap = (lng, lat, zoom, w = width, h = 400) => { \n let result = `

`;\n\n return html`${result}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"md`You can use this in your own notebooks by importing the function:\n\n~~~js\nimport {osmMap} from '@mourner/simple-web-map'\n~~~\n\nHow does this code work? Let's find out, step by step. \n\nMost web maps, including OpenStreetMap, use the [Web Mercator](https://en.wikipedia.org/wiki/Web_Mercator_projection) system, exposing map data as fixed-size square images (e.g. 256×256). Here's the only tile available at the lowest zoom level \\`0\\`, covering the whole world:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":797,"value":"md`On the next zoom level, we have 4 tiles covering the same area as the parent one but more detailed. Combined, they take double the width and height:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"md`_Note that I'm using the donation-supported OpenStreetMap tile server [for learning purposes](https://operations.osmfoundation.org/policies/tiles/). For end-user applications, please use [commercial OSM providers](https://switch2osm.org/providers/)._\n\nThe amount of tiles quadruples every next zoom, consisting of ${tex`2^z`} columns and ${tex`2^z`} rows. Let's say we want to display an area on zoom ${zoom}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"tileSize = 256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"zoom = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":823,"value":"md`There will be ${tilesAcross.toLocaleString()} × ${tilesAcross.toLocaleString()} available tiles on this zoom that will cover a total area of ${worldSize.toLocaleString()} × ${worldSize.toLocaleString()} pixels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":891,"value":"tilesAcross = Math.pow(2, zoom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"worldSize = tileSize * tilesAcross","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"md`Going forward, we'll call points within this area _world pixel coordinates_. Let's show an area around the downtown London:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"longitude = -0.15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"latitude = 51.502","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":837,"value":"md`To get the world pixel coordinates of this location at the given zoom, we'll use the [Web Mercator](https://en.wikipedia.org/wiki/Web_Mercator_projection) projection formulas:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"mercatorX = worldSize * (longitude / 360 + 0.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":454,"value":"mercatorY = worldSize * (1 - Math.log(Math.tan(Math.PI * (0.25 + latitude / 360))) / Math.PI) / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":843,"value":"md`Now, assuming we'll show the map in a container with a defined size, we'll substract half of the width and height from the center coordinates to get ones for the top left corner, rounding down:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":480,"value":"x0 = Math.floor(mercatorX - width / 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":485,"value":"y0 = Math.floor(mercatorY - height / 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":846,"value":"md`As tiles are numbered by rows and columns starting from zero, we can determine the tile underneath a given point by dividing the world pixel coordinates by tile size and rounding down. Let's find the tile in the top-left corner:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"cornerTileX = Math.floor(x0 / tileSize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":695,"value":"cornerTileY = Math.floor(y0 / tileSize)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"md`Did we get that right? Fetching the corresponding tile, it appears to be around Hyde Park, so we're doing well so far!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":853,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"md`Now the only thing's left is to fetch all the tiles that should fill our map container, starting with this corner tile and going by rows and columns. To be able to position the tiles relative to the container, we'll set the following CSS rules on it:\n\n~~~css\nposition: relative; /* position child elements relative to it */\noverflow: hidden; /* hide parts of the tiles past the container */\n~~~\n\nTo position individual tiles, we'll set them as \"\\`position: absolute\\`\". The top-left corner of the map is \\`(x0, y0)\\` in absolute pixel coordinates, while each tile's coordinates are \\`(x * tileSize, y * tileSize)\\`, so to position each tile relative to the top-left corner, we'll substract the two to get the final \\`left\\` and \\`top\\` values:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":188,"value":"{\n let result = `

`;\n\n for (let tileY = cornerTileY; tileY * tileSize < y0 + height; tileY++) {\n for (let tileX = cornerTileX; tileX * tileSize < x0 + width; tileX++) {\n \n result += `

`;\n }\n }\n return html`${result}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":883,"value":"md`This simple approach to tile-based mapping is at the heart of how [Leaflet](https://leafletjs.com/) works. 🌿 So if you ever want to implement your own tiny mapping library from scratch, I hope this was useful! 😊`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2f:"$2e:body"