2e:null 2f:["$","title",null,{"children":"Mapbox inset map | Luis Sevillano | Observable"}] 34:T53d,mutable locations = [ { name: "North Gaza", center: [34.4875, 31.55], zoom: 12.5, duration: 2000, bearing: -30, pitch: -10 }, { name: "Jabalia", center: [34.4738, 31.5294], zoom: 12.3, duration: 2000, bearing: -125, pitch: 55 }, { name: "Gaza City", center: [34.4512, 31.5285], zoom: 12.8, duration: 2000, bearing: 20, pitch: 30 }, { name: "Abasan al-Kabira", center: [34.32, 31.322], zoom: 12.8, duration: 2000, bearing: -15, pitch: 20 }, { name: "Khan Yunis", center: [34.313, 31.343], zoom: 12.7, duration: 2000, bearing: -90, pitch: 70 }, { name: "Rafah", center: [34.2448, 31.287], zoom: 12.6, duration: 2000, bearing: 35, pitch: 60 }, { name: "Beit Hanoun", center: [34.535, 31.535], zoom: 12.4, duration: 2000, bearing: -40, pitch: 85 }, { name: "Deir al-Balah", center: [34.355, 31.417], zoom: 12.4, duration: 2000, bearing: -10, pitch: 25 }, { name: "Beit Lahia", center: [34.497, 31.545], zoom: 12.9, duration: 2000, bearing: -55, pitch: 15 }, { name: "Bani Suheila", center: [34.315, 31.321], zoom: 12.3, duration: 2000, bearing: 20, pitch: 60 } ]35:[{"id":"c94b59735fe4c6a0f43b143260cc30d84a483c601cb8d4b035daa48fd1e925bfed0685dd5f5926eff9796bdf426c81a9d26b64109780d9034d65a6531e2b0458","href":"https://static.observableusercontent.com/files/c94b59735fe4c6a0f43b143260cc30d84a483c601cb8d4b035daa48fd1e925bfed0685dd5f5926eff9796bdf426c81a9d26b64109780d9034d65a6531e2b0458","name":"gaza@2.geojson","type":"application/geo+json","lastModified":1716499757608.25,"size":19832}] 32:{"id":"e7454d377aea46dc","slug":"mapbox-inset-map","title":"Mapbox inset map","thumbnail":"6e30ebf5f5ff149b19de8bf250230230f6dbc74c389b8e99515d050d02fd4066","access_level":"public","create_time":"$D2024-05-23T16:17:25.522Z","update_time":"$D2026-03-17T11:44:59.497Z","view_time":null,"first_public_time":"$D2024-05-23T16:17:25.522Z","has_unpublished_edits":null,"fork":{"id":"7f20448ac1ee959d","slug":"hello-mapbox-gl","title":"Hello, Mapbox GL","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"aca7accb784cc34f","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":"starter_2024"},"version":561,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7bd128609d447fe6","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":null}],"members":[{"type":"individual","id":"7bd128609d447fe6","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":null,"role":"editor"},{"type":"team","id":"aca7accb784cc34f","login":"luissevillano","name":"Luis Sevillano","avatar_url":"https://avatars-next.observableusercontent.com/3c9b0d4d8e2b79d27d5963625d270d87cbdc9c4cd5579c9464c09bd3db5d18ef","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mapbox inset map","cells":[{"id":0,"value":"# Mapbox inset map\nThis tool allows you to add an inset map to your Mapbox maps. Unlike Mapbox's native getBounds function, this tool takes into account parameters like bearing and pitch.\n\nUsed in this story https://elpais.com/internacional/2024-05-29/mapas-hamas-resurge-en-areas-de-gaza-que-israel-consideraba-desmanteladas.html.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":360,"value":"viewof toggle = Inputs.toggle({ label: \"Autofly\", value: autoFly })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"## ${randomPlace.name}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"insetMap = {\n const insetWrapper = html`

`;\n insetWrapper.innerHTML = ``;\n return insetWrapper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"viewof dropShadow = Inputs.toggle({\n label: \"Inset map's drop shadow\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"map = {\n const randomPlace = getRandomLocation();\n const map = new mapboxgl.Map({\n container: document.querySelector(\"#map\"),\n center: randomPlace.center,\n zoom: randomPlace.zoom,\n style: \"mapbox://styles/mapbox/streets-v11\",\n preserveDrawingBuffer: true\n });\n invalidation.then(() => map.remove());\n\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"{\n mutable boundsDynamic = getBoundingBox();\n map.on(\"move\", function (e) {\n mutable boundsDynamic = getBoundingBox();\n mutable bounds = map.getBounds();\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"map.flyTo(randomPlace)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"mutable autoFly = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"function getBoundingBox() {\n if (!map) return undefined;\n\n const canvas = map.getCanvas();\n const canvasWidth = parseFloat(canvas.style.width);\n const canvasHeight = parseFloat(canvas.style.height);\n const vertices = [];\n\n [0, 1, 0.05].forEach((factor) => vertices.push([canvasWidth * factor, 0]));\n [0, 1, 0.05].forEach((factor) =>\n vertices.push([canvasWidth, canvasHeight * factor])\n );\n [0, 1, 0.05].forEach((factor) =>\n vertices.push([canvasWidth * (1 - factor), canvasHeight])\n );\n [0, 1, 0.05].forEach((factor) =>\n vertices.push([0, canvasHeight * (1 - factor)])\n );\n\n const geographicCoordinates = vertices.map((pixelCoord) =>\n map.unproject(pixelCoord)\n );\n geographicCoordinates.push(geographicCoordinates[0]);\n\n return {\n type: \"Feature\",\n geometry: {\n type: \"Polygon\",\n coordinates: [\n geographicCoordinates.map((coord) => [coord.lng, coord.lat])\n ]\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"randomPlace = {\n yield getRandomLocation();\n while (toggle) {\n yield Promises.delay(3000, getRandomLocation());\n }\n if (!toggle) {\n yield getRandomLocation();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"function getRandomLocation() {\n const newLocation = mutable locations.shift();\n mutable locations.push(newLocation);\n\n return newLocation;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"mutable boundsDynamic = {\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"width = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"gaza = FileAttachment(\"gaza@2.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"circles = {\n const vertices = [\n [bounds._sw.lng, bounds._sw.lat], // Suroeste\n [bounds._sw.lng, bounds._ne.lat], // Noroeste\n [bounds._ne.lng, bounds._ne.lat], // Noreste\n [bounds._ne.lng, bounds._sw.lat] // Sureste\n ];\n return vertices;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"projection = d3.geoConicConformal().fitSize([width, height], gaza)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"mutable bounds = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"// You’ll need to replace this with your own MapBox token.\n// See https://www.mapbox.com/help/how-access-tokens-work/\naccessToken = \"pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1\");\n if (!gl.accessToken) {\n gl.accessToken = accessToken;\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"import { fix_feature } from \"@plmrry/winding-order-woes\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"