30:T741,map = { const map = new maplibregl.Map({ pitch: 0, bearing: 0, container, center: [138, 34], zoom: 4, // 道東 // center: [145.2, 43.75], // zoom: 8, style: "https://api.maptiler.com/maps/47320cb0-7a83-43d2-8cb6-37665ecb9da0/style.json?key=KNJqbC4CRDRzmzxaOjN1" }); map.on("load", () => { map.addControl(new maplibregl.NavigationControl(), "top-left"); map.addControl( new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }), "top-left" ); map.addSource("gazetteer-source", { type: "geojson", data: geojson, clusterMaxZoom: 14, clusterRadius: 50 }); map.addLayer({ id: "gazetteer-points", type: "circle", source: "gazetteer-source", paint: { "circle-color": ["get", "color"], "circle-stroke-color": "#808e9b", "circle-stroke-width": 1.2, "circle-radius": ["interpolate", ["linear"], ["zoom"], 5, 2, 12, 14], "circle-opacity": 1 } }); map.on("click", "gazetteer-points", (e) => { const props = e.features[0].properties; const content = ``; map.flyTo({ center: e.features[0].geometry.coordinates, duration: 1000 }); new maplibregl.Popup().setLngLat(e.lngLat).setHTML(content).addTo(map); }); map.on("mouseenter", "gazetteer-points", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "gazetteer-points", () => { map.getCanvas().style.cursor = ""; }); }); return map; }31:[{"id":"3169f11ee8d0616b9e5a97f23d689166891d1c3c2fa06ac0d0220e1f3e14ef97f81f8fd7918f1ff2f9cd4baa51e5b3cd5c3d48d70f62d84c9b52783bd579272c","href":"https://static.observableusercontent.com/files/3169f11ee8d0616b9e5a97f23d689166891d1c3c2fa06ac0d0220e1f3e14ef97f81f8fd7918f1ff2f9cd4baa51e5b3cd5c3d48d70f62d84c9b52783bd579272c","name":"gazetteer-of-japan@2.csv","type":"text/csv","lastModified":1671725410928.985,"size":284571}] 2e:{"title":"Gazetteer of Japan (地名集日本)","cells":[{"id":0,"value":"# Gazetteer of Japan (地名集日本)\n## Name of places in Japan\n\nSee [sorami/gazetter-of-japan](https://github.com/sorami/gazetter-of-japan) for the details of the data.","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"viewof selectedClasses = Inputs.checkbox(classifications, {\n label: html`Select classifcations`,\n format: (x) =>\n html`${x.name} (${x.nameJa})`,\n\n value: classifications\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"container = {\n const container = yield html`

`;\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"filteredGazetterofJapan","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"geojson = {\n const features = filteredGazetterofJapan.map((d) => ({\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [d.lng, d.lat] },\n properties: {\n kanji: d.kanji,\n kana: d.kana,\n roman: d.roman,\n class: d.class,\n color: classColors.get(d.class).color\n }\n }));\n\n return {\n type: \"FeatureCollection\",\n name: \"gazetteer-of-japan\",\n features\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"filteredGazetterofJapan = {\n const selectedClassNames = selectedClasses.map((d) => d.name);\n return gazetteerOfJapan.filter((d) => selectedClassNames.includes(d.class));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"classColors = d3.index(classifications, (d) => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"classifications = {\n return [\n { name: \"Municipality\", nameJa: \"行政\", color: \"#ff7675\" },\n { name: \"Populated area\", nameJa: \"居住地\", color: \"#ff7675\" },\n { name: \"Mountain\", nameJa: \"山\", color: \"#00b894\" },\n { name: \"Pass\", nameJa: \"峠\", color: \"#00b894\" },\n { name: \"Cape\", nameJa: \"岬\", color: \"#00b894\" },\n { name: \"River\", nameJa: \"川\", color: \"#0fbcf9\" },\n { name: \"Lake\", nameJa: \"湖沼\", color: \"#0fbcf9\" },\n { name: \"Sea Area\", nameJa: \"海域\", color: \"#a29bfe\" },\n { name: \"Undersea feature\", nameJa: \"海底地形\", color: \"#a29bfe\" },\n { name: \"Island\", nameJa: \"島\", color: \"#fdcb6e\" },\n { name: \"Extensive natural feature\", nameJa: \"広域自然\", color: \"#fdcb6e\" }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"popup = new maplibregl.Popup()","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"maplibregl = require(\"maplibre-gl@2.4.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":518,"value":"gazetteerOfJapan = await FileAttachment(\"gazetteer-of-japan@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}