<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Quickstart Guide to MapLibre</title>
<style>
html, body, #map-view-div {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
</head>
<body>
<div id="map-view-div"></div>
<script>
const map = new maplibregl.Map({
container: "map-view-div",
style: {
"version": 8,
"sources": {
"osm": {
"type": "raster",
"tiles": ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"],
"tileSize": 256,
"maxzoom": 19
}
},
"layers": [{
"id": "osm",
"type": "raster",
"source": "osm"
}]
},
center: [25.2797, 54.6872],
zoom: 14
});
</script>
</body>
</html>