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