<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet" href="maplibre-gl.css" />
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import { Map, GeolocateControl } from './maplibre-gl.js';
const mapTilerKey = "get_your_own_OpIi9ZULNHzrESv6T2vL"; // https://cloud.maptiler.com/account/keys/
const map = new Map({
container: "map",
style: `https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerKey}`,
center: [1, 15],
zoom: 3
});
map.addControl(
new GeolocateControl({
positionOptions: {
enableHighAccuracy: true
}
})
);
</script>
</body>
</html>
Innen lehúzhatod a css-t: [link]
Ez meg a js: [link]
Nem egyszerű megoldás, de ez a lib eléggé friss még. Majd alakul.
