<!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">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© 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>
Comments
0 comments
Please sign in to leave a comment.