MapLibreの例
全ての地物のスタイル指定がKey-Valueの形で統一されていることで人間がデータを読み書きしやすくなっていると思います。
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {},
layers: []
},
center: [131.2467, 33.9519],
zoom: 13
});
map.on('load', function () {
map.addSource('my-geojson', {
type: 'geojson',
data: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[[131.24,33.95],[131.25,33.95],[131.25,33.96],[131.24,33.96],[131.24,33.95]]]
},
properties: { name: "エリアA" }
}
});
map.addLayer({
id: 'my-polygon-layer',
type: 'fill',
source: 'my-geojson',
paint: {
'fill-color': '#ff7800',
'fill-opacity': 0.5
}
});
map.addLayer({
id: 'my-outline',
type: 'line',
source: 'my-geojson',
paint: {
'line-color': '#ff0000',
'line-width': 2
}
});
map.on('click', 'my-polygon-layer', (e) => {
const name = e.features[0].properties.name;
new maplibregl.Popup()
.setLngLat(e.lngLat)
.setText(name)
.addTo(map);
});
});