2f:T13b6,map = { const demSource = new mlcontour.default.DemSource({ url: "https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png", maxzoom: 12 }) demSource.setupMaplibre(maplibregl) const map = new maplibregl.Map({ container: container, style: style, center: [177.61201858520508, -17.995223539492585], zoom: 11.387456297413234, localIdeographFontFamily: '"NotoSansJP-Regular", sans-serif', maxPitch: 85 }) map.addControl(new maplibregl.FullscreenControl()) map.addControl(new maplibregl.NavigationControl()) map.addControl(new maplibregl.TerrainControl({ "source": "gel-raster-dem" })) map.addControl(new maplibregl.ScaleControl({ "unit": "metric" })) map.addControl(new maplibregl.GeolocateControl()) const info = document.createElement("div") info.id = "info" info.style.position = "absolute" info.style.bottom = "40px" info.style.left = "10px" info.style.padding = "5px 10px" info.style.background = "rgba(255, 255, 255, 0.8)" info.style.border = "1px solid #ccc" info.style.borderRadius = "3px" info.style.fontFamily = "'Operator Mono', 'Menlo', 'Monaco', 'Consolas', monospace" info.style.fontSize = "14px" info.innerHTML = "Hover over a polygon" container.appendChild(info) map.once('movestart', () => { map.addSource("contour-source", { type: "vector", tiles: [ demSource.contourProtocolUrl({ thresholds: { 8: [500, 2000], 9: [500, 2000], 10: [200, 1000], 11: [100, 500], 12: [50, 200], 13: [20, 100], 14: [10, 50] }, contourLayer: "contours", elevationKey: "ele", levelKey: "level", extent: 4096, buffer: 1, }), ], maxzoom: 15, }) map.addLayer({ id: "contour-lines", type: "line", source: "contour-source", "source-layer": "contours", filter: [">", ["get", "ele"], 0], paint: { "line-color": "rgba(0,0,0, 50%)", // level = highest index in thresholds array the elevation is a multiple of "line-width": ["match", ["get", "level"], 1, 1, 0.5], } }, "building") map.addLayer({ id: "contour-labels", type: "symbol", source: "contour-source", "source-layer": "contours", filter: [">", ["get", "ele"], 0], layout: { "symbol-placement": "line", "text-size": 10, "text-field": ["concat", ["number-format", ["get", "ele"], {}], "m"], "text-font": ["NotoSansJP-Regular"], }, paint: { "text-halo-color": "white", "text-halo-width": 1, } }, "building") map.on("mousemove", "terrain22", e => { let s = { 1: "Mountain summit　山頂", 2: "Cliff slope　崖の斜面", 3: "Lower/hilly mountain　低い山/丘陵", 4: "Steep hills/dissected cliff slope　急な丘/開析された崖の斜面", 5: "Large highland slope (steep)　高地の長大斜面（急）", 6: "Large highland slope (moderate)　高地の長大斜面（緩やか）", 7: "Mountain valley slope 山地の谷斜面", 8: "Moderate hills 緩やかな丘", 9: "Terrace/fan/plateau (high, dissected, Sinks < 50%) 段丘/扇状地/台地（高い、開析された、窪地 < 50%）", 10: "Terrace/fan/plateau (high, dissected, Sinks >= 50%) 段丘/扇状地/台地（高い、開析された、窪地 >= 50%）", 11: "Terrace/fan/plateau (high, surface, Sinks < 50%) 段丘/扇状地/台地（高い、表面、窪地 < 50%）", 12: "Terrace/fan/plateau (high, surface, Sinks >= 50%) 段丘/扇状地/台地（高い、表面、窪地 >= 50%）", 13: "Valley slope (Sinks < 50%) 谷の斜面（窪地 < 50%）", 14: "Valley slope (Sinks >= 50%) 谷の斜面（窪地 >= 50%）", 15: "Terrace/fan/plateau (low, dissected, Sinks < 50%) 段丘/扇状地/台地（低い、開析された、窪地 < 50%）", 16: "Terrace/fan/plateau (low, dissected, Sinks >= 50%) 段丘/扇状地/台地（低い、開析された、窪地 >= 50%）", 17: "Terrace/fan/plateau (low, surface, Sinks < 50%) 段丘/扇状地/台地（低い、表面、窪地 < 50%）", 18: "Terrace/fan/plateau (low, surface, Sinks >= 50%) 段丘/扇状地/台地（低い、表面、窪地 >= 50%）", 19: "High plain (Sinks < 50%) 高い平地（窪地 < 50%）", 20: "High plain (Sinks >= 50%) 高い平地（窪地 >= 50%）", 21: "Low plain (Sinks < 50%) 低い平地（窪地 < 50%）", 22: "Low plain (Sinks >= 50%) 低い平地（窪地 >= 50%）" }[e.features[0].properties.terrain22] if (typeof s === 'undefined') s = e.features[0].properties.terrain22 info.innerHTML = s }) map.on("mouseleave", "terrain22", () => { info.innerHTML = "Hover over a polygon" }) }) invalidation.then(() => map.remove()) yield map }30:Ta97e,style = ({ version: 8, sources: sources, sprite: sprite, glyphs: glyphs, terrain: { source: "gel-raster-terrain" }, layers: [ { "id": "background", "type": "background", "paint": { "background-color": "rgb(242,243,240)" } }, { "id": "park", "type": "fill", "source": "openmaptiles", "source-layer": "park", "filter": [ "==", "$type", "Polygon" ], "paint": { "fill-color": "rgb(230, 233, 229)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "water", "type": "fill", "source": "openmaptiles", "source-layer": "water", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "!=", "brunnel", "tunnel" ] ], "paint": { "fill-antialias": true, "fill-color": "rgb(194, 200, 202)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "landcover_ice_shelf", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "subclass", "ice_shelf" ] ], "paint": { "fill-color": "hsl(0, 0%, 98%)", "fill-opacity": 0.7 }, "layout": {}, "minzoom": 0, "maxzoom": 8 }, { "id": "landcover_glacier", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "subclass", "glacier" ] ], "paint": { "fill-color": "hsl(0, 0%, 98%)", "fill-opacity": { "base": 1, "stops": [ [ 0, 1 ], [ 8, 0.5 ] ] } }, "layout": {}, "minzoom": 0, "maxzoom": 8 }, { "id": "landuse_residential", "type": "fill", "source": "openmaptiles", "source-layer": "landuse", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "residential" ] ], "paint": { "fill-color": "rgb(234, 234, 230)", "fill-opacity": { "base": 0.6, "stops": [ [ 8, 0.8 ], [ 9, 0.6 ] ] } }, "layout": {}, "minzoom": 0, "maxzoom": 16 }, { "id": "landcover_wood", "type": "fill", "source": "openmaptiles", "source-layer": "landcover", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "wood" ] ], "paint": { "fill-color": "rgb(220,224,220)", "fill-opacity": { "base": 1, "stops": [ [ 8, 0 ], [ 12, 1 ] ] } }, "layout": {}, "minzoom": 10, "maxzoom": 22 }, { "id": "terrain22", "type": "fill", "source": "terrain22", "source-layer": "terrain22", "paint": { "fill-color": [ "match", ["get", "terrain22"], 1, "rgb(112, 79, 41)", 2, "rgb(172, 82, 50)", 3, "rgb(153, 131, 83)", 4, "rgb(251, 154, 153)", 5, "rgb(248, 3, 204)", 6, "rgb(243, 162, 243)", 7, "rgb(145, 150, 185)", 8, "rgb(40, 135, 108)", 9, "rgb(20, 172, 132)", 10, "rgb(31, 195, 105)", 11, "rgb(223, 134, 31)", 12, "rgb(30, 218, 74)", 13, "rgb(125, 162, 143)", 14, "rgb(155, 151, 169)", 15, "rgb(251, 147, 0)", 16, "rgb(122, 236, 50)", 17, "rgb(249, 180, 4)", 18, "rgb(194, 251, 71)", 19, "rgb(251, 216, 15)", 20, "rgb(154, 255, 255)", 21, "rgb(253, 253, 120)", 22, "rgb(0, 183, 255)", "rgb(100, 100, 100)" ], "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 9, 0.5, 10, 0.3, 13, 0.1, 15, 0 ] }, "maxzoom": 22 }, { "id": "hills", "type": "hillshade", "source": "gel-raster-dem", "paint": { "hillshade-shadow-color": "#473B24" } }, { "id": "waterway", "type": "line", "source": "openmaptiles", "source-layer": "waterway", "filter": [ "==", "$type", "LineString" ], "paint": { "line-color": "hsl(195, 17%, 78%)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "water_name", "type": "symbol", "source": "openmaptiles", "source-layer": "water_name", "filter": [ "==", "$type", "LineString" ], "paint": { "text-color": "rgb(157,169,177)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "symbol-placement": "line", "symbol-spacing": 500, "text-field": "{name:latin}\n{name:nonlatin}", "text-rotation-alignment": "map", "text-size": 12 }, "minzoom": 0, "maxzoom": 22 }, { "id": "building", "type": "fill", "source": "openmaptiles", "source-layer": "building", "paint": { "fill-antialias": true, "fill-color": "rgb(234, 234, 229)", "fill-outline-color": "rgb(219, 219, 218)" }, "layout": {}, "minzoom": 12, "maxzoom": 22 }, { "id": "tunnel_motorway_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 5.8, 0 ], [ 6, 3 ], [ 20, 40 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 6, "maxzoom": 22 }, { "id": "tunnel_motorway_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(234,234,234)", "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ], [ 20, 30 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 6, "maxzoom": 22 }, { "id": "aeroway-taxiway", "type": "line", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "in", "class", "taxiway" ] ], "paint": { "line-color": "hsl(0, 0%, 88%)", "line-opacity": 1, "line-width": { "base": 1.55, "stops": [ [ 13, 1.8 ], [ 20, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 12, "maxzoom": 22 }, { "id": "aeroway-runway-casing", "type": "line", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "in", "class", "runway" ] ], "paint": { "line-color": "hsl(0, 0%, 88%)", "line-opacity": 1, "line-width": { "base": 1.5, "stops": [ [ 11, 6 ], [ 17, 55 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 11, "maxzoom": 22 }, { "id": "aeroway-area", "type": "fill", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "in", "class", "runway", "taxiway" ] ], "paint": { "fill-color": "rgba(255, 255, 255, 1)", "fill-opacity": { "base": 1, "stops": [ [ 13, 0 ], [ 14, 1 ] ] } }, "layout": {}, "minzoom": 4, "maxzoom": 22 }, { "id": "aeroway-runway", "type": "line", "source": "openmaptiles", "source-layer": "aeroway", "filter": [ "all", [ "in", "class", "runway" ], [ "==", "$type", "LineString" ] ], "paint": { "line-color": "rgba(255, 255, 255, 1)", "line-opacity": 1, "line-width": { "base": 1.5, "stops": [ [ 11, 4 ], [ 17, 50 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 11, "maxzoom": 22 }, { "id": "road_area_pier", "type": "fill", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "Polygon" ], [ "==", "class", "pier" ] ], "paint": { "fill-antialias": true, "fill-color": "rgb(242,243,240)" }, "layout": {}, "minzoom": 0, "maxzoom": 22 }, { "id": "road_pier", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "pier" ] ], "paint": { "line-color": "rgb(242,243,240)", "line-width": { "base": 1.2, "stops": [ [ 15, 1 ], [ 17, 4 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 22 }, { "id": "highway_path", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "path" ] ], "paint": { "line-color": "rgb(234, 234, 234)", "line-opacity": 0.9, "line-width": { "base": 1.2, "stops": [ [ 13, 1 ], [ 20, 10 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 22 }, { "id": "highway_minor", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "minor", "service", "track" ] ], "paint": { "line-color": "hsl(0, 0%, 88%)", "line-opacity": 0.9, "line-width": { "base": 1.55, "stops": [ [ 13, 1.8 ], [ 20, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 8, "maxzoom": 22 }, { "id": "highway_major_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-dasharray": [ 12, 0 ], "line-width": { "base": 1.3, "stops": [ [ 10, 3 ], [ 20, 23 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 11, "maxzoom": 22 }, { "id": "highway_major_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "paint": { "line-color": "#fff", "line-width": { "base": 1.3, "stops": [ [ 10, 2 ], [ 20, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 11, "maxzoom": 22 }, { "id": "highway_major_subtle", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "in", "class", "primary", "secondary", "tertiary", "trunk" ] ], "paint": { "line-color": "hsla(0, 0%, 85%, 0.69)", "line-width": 2 }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 11 }, { "id": "highway_motorway_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!in", "brunnel", "bridge", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-dasharray": [ 2, 0 ], "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 5.8, 0 ], [ 6, 3 ], [ 20, 40 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_motorway_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!in", "brunnel", "bridge", "tunnel" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": { "base": 1, "stops": [ [ 5.8, "hsla(0, 0%, 85%, 0.53)" ], [ 6, "#fff" ] ] }, "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ], [ 20, 30 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_motorway_subtle", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "motorway" ] ], "paint": { "line-color": "hsla(0, 0%, 85%, 0.53)", "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 6 }, { "id": "railway_transit", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "class", "transit" ], [ "!in", "brunnel", "tunnel" ] ] ], "paint": { "line-color": "#dddddd", "line-width": 3 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway_transit_dashline", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "class", "transit" ], [ "!in", "brunnel", "tunnel" ] ] ], "paint": { "line-color": "#fafafa", "line-dasharray": [ 3, 3 ], "line-width": 2 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway_service", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "class", "rail" ], [ "has", "service" ] ] ], "paint": { "line-color": "#dddddd", "line-width": 3 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway_service_dashline", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "rail" ], [ "has", "service" ] ], "paint": { "line-color": "#fafafa", "line-dasharray": [ 3, 3 ], "line-width": 2 }, "layout": { "line-join": "round" }, "minzoom": 16, "maxzoom": 22 }, { "id": "railway", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!has", "service" ], [ "==", "class", "rail" ] ] ], "paint": { "line-color": "#dddddd", "line-width": { "base": 1.3, "stops": [ [ 16, 3 ], [ 20, 7 ] ] } }, "layout": { "line-join": "round" }, "minzoom": 13, "maxzoom": 22 }, { "id": "railway_dashline", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "!has", "service" ], [ "==", "class", "rail" ] ] ], "paint": { "line-color": "#fafafa", "line-dasharray": [ 3, 3 ], "line-width": { "base": 1.3, "stops": [ [ 16, 2 ], [ 20, 6 ] ] } }, "layout": { "line-join": "round" }, "minzoom": 13, "maxzoom": 22 }, { "id": "highway_motorway_bridge_casing", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "bridge" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": "rgb(213, 213, 213)", "line-dasharray": [ 2, 0 ], "line-opacity": 1, "line-width": { "base": 1.4, "stops": [ [ 5.8, 0 ], [ 6, 5 ], [ 20, 45 ] ] } }, "layout": { "line-cap": "butt", "line-join": "miter" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_motorway_bridge_inner", "type": "line", "source": "openmaptiles", "source-layer": "transportation", "filter": [ "all", [ "==", "$type", "LineString" ], [ "all", [ "==", "brunnel", "bridge" ], [ "==", "class", "motorway" ] ] ], "paint": { "line-color": { "base": 1, "stops": [ [ 5.8, "hsla(0, 0%, 85%, 0.53)" ], [ 6, "#fff" ] ] }, "line-width": { "base": 1.4, "stops": [ [ 4, 2 ], [ 6, 1.3 ], [ 20, 30 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 6, "maxzoom": 22 }, { "id": "highway_name_other", "type": "symbol", "source": "openmaptiles", "source-layer": "transportation_name", "filter": [ "all", [ "!=", "class", "motorway" ], [ "==", "$type", "LineString" ] ], "paint": { "text-color": "#bbb", "text-halo-blur": 1, "text-halo-color": "#fff", "text-halo-width": 2, "text-translate": [ 0, 0 ] }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "symbol-placement": "line", "symbol-spacing": 350, "text-field": "{name:latin} {name:nonlatin}", "text-max-angle": 30, "text-pitch-alignment": "viewport", "text-rotation-alignment": "map", "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 22 }, { "id": "highway_name_motorway", "type": "symbol", "source": "openmaptiles", "source-layer": "transportation_name", "filter": [ "all", [ "==", "$type", "LineString" ], [ "==", "class", "motorway" ] ], "paint": { "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "hsl(0, 0%, 100%)", "text-halo-width": 1, "text-translate": [ 0, 2 ] }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "symbol-placement": "line", "symbol-spacing": 350, "text-field": "{ref}", "text-pitch-alignment": "viewport", "text-rotation-alignment": "viewport", "text-size": 10 }, "minzoom": 0, "maxzoom": 22 }, { "id": "boundary_state", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "==", "admin_level", 4 ], "paint": { "line-blur": 0.4, "line-color": "rgb(230, 204, 207)", "line-dasharray": [ 2, 2 ], "line-opacity": 1, "line-width": { "base": 1.3, "stops": [ [ 3, 1 ], [ 22, 15 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 22 }, { "id": "boundary_country_z0-4", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "all", [ "==", "admin_level", 2 ], [ "!has", "claimed_by" ], [ "==", "maritime", false ] ], "paint": { "line-blur": { "base": 1, "stops": [ [ 0, 0.4 ], [ 22, 4 ] ] }, "line-color": "rgb(230, 204, 207)", "line-opacity": 1, "line-width": { "base": 1.1, "stops": [ [ 3, 1 ], [ 22, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 0, "maxzoom": 5 }, { "id": "boundary_country_z5-", "type": "line", "source": "openmaptiles", "source-layer": "boundary", "filter": [ "==", "admin_level", 2 ], "paint": { "line-blur": { "base": 1, "stops": [ [ 0, 0.4 ], [ 22, 4 ] ] }, "line-color": "rgb(230, 204, 207)", "line-opacity": 1, "line-width": { "base": 1.1, "stops": [ [ 3, 1 ], [ 22, 20 ] ] } }, "layout": { "line-cap": "round", "line-join": "round" }, "minzoom": 5, "maxzoom": 22 }, { "id": "place_other", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "in", "class", "continent", "hamlet", "neighbourhood", "isolated_dwelling" ], [ "==", "$type", "Point" ] ], "paint": { "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "text-anchor": "center", "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "center", "text-offset": [ 0.5, 0 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 14 }, { "id": "place_suburb", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "suburb" ] ], "paint": { "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "text-anchor": "center", "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "center", "text-offset": [ 0.5, 0 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 15 }, { "id": "place_village", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "village" ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "icon-size": 0.4, "text-anchor": "left", "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 14 }, { "id": "place_town", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "town" ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "icon-image": { "base": 1, "stops": [ [ 0, "circle-11" ], [ 8, "" ] ] }, "icon-size": 0.4, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 15 }, { "id": "place_city", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "all", [ "!=", "capital", 2 ], [ "==", "class", "city" ], [ ">", "rank", 3 ] ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "icon-image": { "base": 1, "stops": [ [ 0, "circle-11" ], [ 8, "" ] ] }, "icon-size": 0.4, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 14 }, { "id": "place_capital", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "all", [ "==", "capital", 2 ], [ "==", "class", "city" ] ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "icon-image": { "base": 1, "stops": [ [ 0, "star-11" ], [ 8, "" ] ] }, "icon-size": 1, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 14, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 12 }, { "id": "place_city_large", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "all", [ "!=", "capital", 2 ], [ "<=", "rank", 3 ], [ "==", "class", "city" ] ] ], "paint": { "icon-opacity": 0.7, "text-color": "rgb(117, 129, 145)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "icon-image": { "base": 1, "stops": [ [ 0, "circle-11" ], [ 8, "" ] ] }, "icon-size": 0.4, "text-anchor": { "base": 1, "stops": [ [ 0, "left" ], [ 8, "center" ] ] }, "text-field": "{name:latin}\n{name:nonlatin}", "text-justify": "left", "text-offset": [ 0.5, 0.2 ], "text-size": 14, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 12 }, { "id": "place_state", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "state" ] ], "paint": { "text-color": "rgb(113, 129, 144)", "text-halo-blur": 1, "text-halo-color": "rgb(242,243,240)", "text-halo-width": 1 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "text-field": "{name:latin}\n{name:nonlatin}", "text-size": 10, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 12 }, { "id": "place_country_other", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "country" ], [ "!has", "iso_a2" ] ], "paint": { "text-color": { "base": 1, "stops": [ [ 3, "rgb(157,169,177)" ], [ 4, "rgb(153, 153, 153)" ] ] }, "text-halo-color": "rgba(236,236,234,0.7)", "text-halo-width": 1.4 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "text-field": "{name:latin}", "text-size": { "base": 1, "stops": [ [ 0, 9 ], [ 6, 11 ] ] }, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 8 }, { "id": "place_country_minor", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "==", "class", "country" ], [ ">=", "rank", 2 ], [ "has", "iso_a2" ] ], "paint": { "text-color": { "base": 1, "stops": [ [ 3, "rgb(157,169,177)" ], [ 4, "rgb(153, 153, 153)" ] ] }, "text-halo-color": "rgba(236,236,234,0.7)", "text-halo-width": 1.4 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "text-field": "{name:latin}", "text-size": { "base": 1, "stops": [ [ 0, 10 ], [ 6, 12 ] ] }, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 8 }, { "id": "place_country_major", "type": "symbol", "source": "openmaptiles", "source-layer": "place", "filter": [ "all", [ "==", "$type", "Point" ], [ "<=", "rank", 1 ], [ "==", "class", "country" ], [ "has", "iso_a2" ] ], "paint": { "text-color": { "base": 1, "stops": [ [ 3, "rgb(157,169,177)" ], [ 4, "rgb(153, 153, 153)" ] ] }, "text-halo-color": "rgba(236,236,234,0.7)", "text-halo-width": 1.4 }, "layout": { "text-font": [ "NotoSansJP-Regular" ], "text-anchor": "center", "text-field": "{name:latin}", "text-size": { "base": 1.4, "stops": [ [ 0, 10 ], [ 3, 12 ], [ 4, 14 ] ] }, "text-transform": "uppercase" }, "minzoom": 0, "maxzoom": 6 } ] })31:[] 2d:{"title":"Automaptic 2024-08","cells":[{"id":0,"value":"# Automaptic 2024-08","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"## Current Issues\n- on('load') イベントが処理されなくなっている。once('movestart')で代替している。","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"container = {\n　　yield html`

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"// MapLibre GL JS with PMTiles enabled\nmaplibregl = {\n let m = await require(\"maplibre-gl\")\n let p = await import(\"https://cdn.skypack.dev/pmtiles\")\n let protocol = new p.Protocol()\n m.addProtocol('pmtiles', protocol.tile)\n yield m\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"mlcontour = import(\"https://cdn.skypack.dev/maplibre-contour\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"openmaptiles = ({\n type: \"vector\",\n url: \"pmtiles://https://tile.openstreetmap.jp/static/planet.pmtiles\",\n attribution: \"OpenStreetMap contributors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"gel = ({\n type: \"raster-dem\",\n tiles: [\n \"pmtiles://https://data.source.coop/smartmaps/gel/gel.pmtiles/{z}/{x}/{y}.webp\"\n ],\n tileSize: 512,\n minzoom: 2,\n maxzoom: 12\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"terrain22 = ({\n type: \"vector\",\n url: \"pmtiles://https://data.source.coop/smartmaps/foil4gr1/terrain22.pmtiles\",\n attribution: \"Terrain22\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"overture = ({\n type: \"vector\",\n url: \"https://tile.openstreetmap.jp/static/overture.pmtiles\",\n attribution: \"© Overture Maps Foundation\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"sprite = \"https://openmaptiles.github.io/positron-gl-style/sprite\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"sources = ({\n openmaptiles: openmaptiles,\n \"gel-raster-dem\": gel,\n \"gel-raster-terrain\": gel,\n terrain22: terrain22,\n // overture: overture\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"glyphs = \"https://gsi-cyberjapan.github.io/optimal_bvmap/glyphs/{fontstack}/{range}.pbf\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":124,"value":"## Repository\nhttps://github.com/optgeo/terrain22\n\n## Source\nhttps://gisstar.gsi.go.jp/terrain2021/\n\n## Citation\nFor the polygon data attached to Iwahashi and Yamazaki (2022):\nIwahashi, J., Yamazaki, D. (2022) Global polygons for terrain classification divided into uniform slopes and basins. Prog Earth Planet Sci 9, 33. https://doi.org/10.1186/s40645-022-00487-2\n\n### For Terrain22:\nIn addition to the above paper, please cite Terrain22 and this URL. For example, \"we used Terrain22, which is publicly available from https://gisstar.gsi.go.jp/terrain2021/ as a derivative of the data by Iwahashi and Yamazaki (2022).\"","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}