2d:null 2e:["$","title",null,{"children":"Adaptive Projections (Mapbox GL JS v2.6) | Sorami Hisamoto | Observable"}] 33:T9e9,{ let container = html`

`; let zoomLabelContainer = html`

`; zoomLabelContainer.appendChild( html`

Zoom Level

` ); let zoomLabel = html`

`; zoomLabelContainer.appendChild(zoomLabel); container.appendChild(zoomLabelContainer); yield container; const macroZoomLevel = 0.5; const macroZoomCenter = [0, 0]; const microZoomLevel = 8.5; const getMicroZoomCenter = (option) => { if (option === "Sapporo") { return [141.350006, 43.066666]; // Sapporo, Japan } else if (option === "random") { const randomCity = capitals[Math.floor(Math.random() * capitals.length)]; return [randomCity["x"], randomCity["y"]]; } else { return [0, 0]; } }; const map = new mapboxgl.Map({ container, style: "mapbox://styles/mapbox/streets-v11", center: macroZoomCenter, zoom: macroZoomLevel, projection: projectionName // starting projection }); map.addControl(new mapboxgl.NavigationControl(), "top-right"); map.on("load", () => { map.addSource("graticule", { type: "geojson", data: graticule }); map.addLayer({ id: "graticule", type: "line", source: "graticule" }); showZoomLabel(); }); function zoomIn() { map .flyTo({ center: getMicroZoomCenter(microZoomCenterOption), zoom: microZoomLevel, speed: zoomSpeed, easing: (t) => 1 - Math.pow(1 - t, 1.5), // start fast and gradually decrease speed essential: true }) .once("moveend", () => zoomOut()); } function zoomOut() { map .flyTo({ center: macroZoomCenter, zoom: macroZoomLevel, speed: zoomSpeed, easing: (t) => Math.pow(t, 1.5), // start slow and gradually increase speed essential: true }) .once("moveend", async () => { await new Promise((r) => setTimeout(r, 150)); zoomIn(); }); } function showZoomLabel() { const zoom = map.getZoom(); zoomLabel.textContent = `${zoom.toPrecision(2)}`; } map.on("move", () => { showZoomLabel(); }); zoomOut(); invalidation.then(() => map.remove()); }34:[{"id":"1f0b00cf183a4bede3081b3e7eeae9a512561bbf1b959f707d86c78b35009c815bf803b890b3f512b174fcf34026a2ededf640d8ad6cec462647192c4c3914c8","href":"https://static.observableusercontent.com/files/1f0b00cf183a4bede3081b3e7eeae9a512561bbf1b959f707d86c78b35009c815bf803b890b3f512b174fcf34026a2ededf640d8ad6cec462647192c4c3914c8","name":"capital_cities_2022_0@1.csv","type":"text/csv","lastModified":1654523290751.29,"size":18910}] 31:{"id":"80c900321708a1a6","slug":"adaptive-projections-mapbox-gl-js-v2-6","title":"Adaptive Projections (Mapbox GL JS v2.6)","thumbnail":"380a3b6254f2e17758798ccd30522bc6e98d4db0c04c7417a020303519619443","access_level":"public","create_time":"$D2022-06-04T12:57:36.865Z","update_time":"$D2022-07-08T15:27:28.448Z","view_time":null,"first_public_time":"$D2022-06-15T06:29:33.685Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"36aa7bddb76092a5","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":"starter_2024"},"version":655,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f8326fd2096702fa","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":null}],"members":[{"type":"individual","id":"f8326fd2096702fa","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Adaptive Projections (Mapbox GL JS v2.6)","cells":[{"id":0,"value":"# Adaptive Projections (Mapbox GL JS v2.6)\n\n- cf. [Reimagining projections for the interactive maps era](https://www.mapbox.com/blog/adaptive-projections) (Mapbox blog)\n- [インタラクティブなメディアの地図投影法: WebメルカトルからAdaptive Projectionsへ / MIERUNE 社内勉強会 #033 - Speaker Deck](https://speakerdeck.com/sorami/mierune-she-nei-mian-qiang-hui-number-033) (*\"Map Projection for Interactive Media: from Web Mercator to Adaptive Projections\"*, in Japanese)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"viewof projectionName = Inputs.radio(\n [\n \"equalEarth\",\n \"albers\",\n \"mercator\",\n \"lambertConformalConic\",\n \"winkelTripel\",\n \"naturalEarth\",\n \"equirectangular\",\n \"globe\"\n ],\n {\n value: \"lambertConformalConic\",\n label: \"Initial Projection\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"viewof graticuleOption = Inputs.radio([\"|||||\", \"|||\", \"|\"], {\n value: \"|||\",\n label: \"Graticule\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"viewof zoomSpeed = Inputs.range([0, 3.0], {\n value: 0.75,\n step: 0.25,\n label: \"Zoom Speed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"viewof microZoomCenterOption = Inputs.radio([\"Sapporo\", \"random\"], {\n value: \"Sapporo\",\n label: \"To ...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"// cf. https://github.com/mapbox/mapbox-gl-js/issues/10093\n\ngraticule = {\n const graticuleGranularity = {\n \"|||||\": 1,\n \"|||\": 5,\n \"|\": 15\n }[graticuleOption];\n\n const graticule = {\n type: \"FeatureCollection\",\n features: []\n };\n for (let lng = -180; lng <= 180; lng += graticuleGranularity) {\n graticule.features.push({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [lng, -90],\n [lng, 90]\n ]\n },\n properties: { value: lng }\n });\n }\n\n for (let lat = -80; lat <= 80; lat += graticuleGranularity / 2) {\n graticule.features.push({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [-180, lat],\n [180, lat]\n ]\n },\n properties: { value: lat }\n });\n }\n\n return graticule;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.9.1\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1Ijoic29yYW1pIiwiYSI6ImNsM3p0eHA1ZTBsZXQzZHB4Z2Exenk3MDgifQ.87C9c97Xi_0FVcYDX215rg\";\n const href = await require.resolve(\"mapbox-gl@2.0.0/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":470,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"[自由に使える首都名・位置情報データ｜イドケード｜note](https://observablehq.com/d/80c900321708a1a6)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":421,"value":"capitals = FileAttachment(\"capital_cities_2022_0@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"