53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
|
|
const map = new maplibregl.Map({
|
|
style: window.MAP_STYLE_LIGHT,
|
|
center: [feature_lon, feature_lat],
|
|
zoom: 16,
|
|
pitch: 45,
|
|
container: 'map',
|
|
antialias: true
|
|
});
|
|
|
|
map.on('load', () => {
|
|
|
|
const location_data = {
|
|
type: 'FeatureCollection',
|
|
features: [
|
|
{
|
|
type: 'Feature',
|
|
geometry: geom,
|
|
properties: {
|
|
name: '...'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
map.addSource('location', {
|
|
type: 'geojson',
|
|
data: location_data
|
|
});
|
|
|
|
map.addLayer({
|
|
'id': 'location-fill',
|
|
'type': 'fill',
|
|
'source': 'location',
|
|
'paint': {
|
|
'fill-color': '#28a745',
|
|
'fill-opacity': 0.7,
|
|
}
|
|
});
|
|
|
|
map.addLayer({
|
|
'id': 'location-outline',
|
|
'type': 'line',
|
|
'source': 'location',
|
|
'paint': {
|
|
'line-color': '#155724',
|
|
'line-width': 2,
|
|
}
|
|
});
|
|
|
|
const bounds = turf.bbox(location_data);
|
|
map.fitBounds(bounds, {});
|
|
});
|