How to add a Marker with MapLibre Library (video & code)

June 20, 2022 15:26
Updated

~ minutes read

Code example

<!DOCTYPE html>
<html>
<head>
	<title>my map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.maptiler.com/maplibre-gl-js/v1.14.0/maplibre-gl.js"></script>
    <link href="https://cdn.maptiler.com/maplibre-gl-js/v1.14.0/maplibre-gl.css" rel="stylesheet" />
    <style>
    	#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
</head>
<body>
	<div id="map"></div>
	<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>
	<script type="text/javascript">
		var map = new maplibregl.Map({
		container: 'map',
		style: 'https://api.maptiler.com/maps/streets/style.json?key=<get_your_own>',
		center: [0.11, 51.49],
		zoom: 6,
		});

		//add marker
		var london = new maplibregl.Marker()
		.setLngLat([0.11, 51.49])
		.addTo(map);
	</script>
</body>
</html>

How to add a Marker with MapLibre Library (video & code)

Code example

Share article

Do you still need help?

Comments

MapTiler Cloud

MapTiler

How to add a Marker with MapLibre Library (video & code)

Code example

Share article

Do you still need help?

Related articles