2d:null 2e:["$","title",null,{"children":"A Web Map of Maceio from Scratch | Nilson Menezes | Observable"}] 33:[] 31:{"id":"0a8d97aeac5682de","slug":"a-web-map-from-scratch","title":"A Web Map of Maceio from Scratch","thumbnail":"3564e8e4c0aa37174114d0881f6ab1cc9769b7ce90449eb68cb0b1840c409340","access_level":"public","create_time":"$D2020-12-30T08:23:12.506Z","update_time":"$D2020-12-30T14:36:00.757Z","view_time":null,"first_public_time":"$D2020-12-30T08:46:48.700Z","has_unpublished_edits":null,"fork":{"id":"93abcb6e07b3f39a","slug":"simple-web-map","title":"A Web Map from Scratch","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"54798aac272d7bcb","login":"nme94","name":"Nilson Menezes","avatar_url":"https://avatars-next.observableusercontent.com/970e8d28af868cb49b751a7d41bd512f8a1817e8d6f65ef41529e7b6efa929a7","tier":"starter_2024"},"version":1104,"publish_version":1104,"role":null,"authored":false,"authors":[{"type":"individual","id":"c9335b98089f0119","login":"nme94","name":"Nilson Menezes","avatar_url":"https://avatars-next.observableusercontent.com/970e8d28af868cb49b751a7d41bd512f8a1817e8d6f65ef41529e7b6efa929a7","tier":null}],"members":[{"type":"individual","id":"c9335b98089f0119","login":"nme94","name":"Nilson Menezes","avatar_url":"https://avatars-next.observableusercontent.com/970e8d28af868cb49b751a7d41bd512f8a1817e8d6f65ef41529e7b6efa929a7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"A Web Map of Maceio from Scratch","cells":[{"id":0,"value":"md`# A Web Map of Maceio from Scratch\n\nThanks to [@mourner/simple-web-map](https://observablehq.com/@mourner/simple-web-map) to give me the tools\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"md`The city of Maceio (Brazil) has the longitude and latitude as following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"longitude = -35.7351","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"latitude = -9.66625","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"osmMap(longitude, latitude, 13)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":526,"value":"osmMap = (longitude, latitude, zoom, w = width, h = 1000) => { \n let result = `

`,\n x = 256 * (1 << zoom) * (longitude / 360 + 0.5) - w / 2 | 0,\n y = 256 * (1 << zoom) * (1 - Math.log(Math.tan(Math.PI * (0.25 + latitude / 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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"md`You can use this in your own notebooks by importing the functions:\n\n~~~js\nimport {osmMap} from '@mourner/simple-web-map'\n\nimport {submit} from '@mbostock/more-deliberate-inputs'\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"