Maplibre
Display marker
Display simple marker on the map
This comprehensive step-by-step tutorial provides a detailed explanation of how to incorporate a default Marker onto a map. By following this tutorial you will be able to create a map with a pin.
Display marker
1
Install Maplibre
npm install maplibre-gl
2
Create Solvice Account
These are instructions or content that only pertain to the second step.
3
Choose a Solvice style
Do you prefer a light or dark theme? Choose one of the following styles: light
, dark
or color
.
var map = new maplibregl.Map({
container: "map",
hash: true,
center: [-122.4194, 37.7749],
zoom: 12,
style: 'https://cdn.solvice.io/styles/light.json',
});
4
Add a marker
Create a new marker using the marker
function. Set Lng/Lat of the marker using setLngLat()
function, and
finally add it to the current map using addTo()
function.
const marker = new maplibregl.Marker()
.setLngLat([12.550343, 55.665957])
.addTo(map);