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; }

Purpose-built for displays of data