31: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()); }32:[{"id":"1f0b00cf183a4bede3081b3e7eeae9a512561bbf1b959f707d86c78b35009c815bf803b890b3f512b174fcf34026a2ededf640d8ad6cec462647192c4c3914c8","href":"https://static.observableusercontent.com/files/1f0b00cf183a4bede3081b3e7eeae9a512561bbf1b959f707d86c78b35009c815bf803b890b3f512b174fcf34026a2ededf640d8ad6cec462647192c4c3914c8","name":"capital_cities_2022_0@1.csv","type":"text/csv","lastModified":1654523290751.29,"size":18910}] 2f:{"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"},{"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"},{"id":360,"value":"viewof graticuleOption = Inputs.radio([\"|||||\", \"|||\", \"|\"], {\n value: \"|||\",\n label: \"Graticule\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":400,"value":"viewof microZoomCenterOption = Inputs.radio([\"Sapporo\", \"random\"], {\n value: \"Sapporo\",\n label: \"To ...\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":470,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"[自由に使える首都名・位置情報データ｜イドケード｜note](https://observablehq.com/d/80c900321708a1a6)","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"capitals = FileAttachment(\"capital_cities_2022_0@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}