54 lines
1.1 KiB
JavaScript
54 lines
1.1 KiB
JavaScript
|
|
|
|
const map = new maplibregl.Map({
|
|
style: window.MAP_STYLE_LIGHT,
|
|
center: [feature_lon, feature_lat],
|
|
zoom: 17,
|
|
pitch: 45,
|
|
bearing: -17.6,
|
|
container: 'map',
|
|
antialias: true
|
|
});
|
|
|
|
map.on('load', () => {
|
|
|
|
const pointData = {
|
|
type: 'FeatureCollection',
|
|
features: [
|
|
{
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [feature_lon, feature_lat]
|
|
},
|
|
properties: {
|
|
name: '...'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
// Add the circle as a GeoJSON source
|
|
map.addSource('artwork', {
|
|
type: 'geojson',
|
|
data: pointData
|
|
});
|
|
|
|
map.addLayer({
|
|
'id': 'artwork',
|
|
'type': 'circle',
|
|
'source': 'artwork',
|
|
'paint': {
|
|
'circle-radius': {
|
|
'base': 1.75,
|
|
'stops': [
|
|
[12, 2],
|
|
[22, 300]
|
|
]
|
|
},
|
|
'circle-color': '#0094ff',
|
|
'circle-opacity': 0.7
|
|
}
|
|
});
|
|
});
|
|
|