61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<div ref="mapContainer" id="map" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
import maplibregl from "maplibre-gl";
|
|
import { Protocol } from "pmtiles";
|
|
import "maplibre-gl/dist/maplibre-gl.css"; // Assure-toi que cette ligne est présente
|
|
const props = defineProps({
|
|
pmtilesUrl: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
center: {
|
|
type: Array,
|
|
default: () => [1.4436, 43.6042], // Paris
|
|
},
|
|
zoom: {
|
|
type: Number,
|
|
default: 12,
|
|
},
|
|
style: {
|
|
type: String,
|
|
default: "https://static.ppsfleet.navy/osm-data/styles/generic-latest.json",
|
|
},
|
|
});
|
|
|
|
const mapContainer = ref(null);
|
|
let map;
|
|
|
|
onMounted(async () => {
|
|
// Inject PMTiles protocol
|
|
const protocol = new Protocol();
|
|
maplibregl.addProtocol("pmtiles", protocol.tile);
|
|
|
|
// // Load header to get metadata (e.g., bounds)
|
|
// const archive = new PMTiles(props.pmtilesUrl)
|
|
// await archive.getHeader()
|
|
|
|
map = new maplibregl.Map({
|
|
container: mapContainer.value,
|
|
style: props.style,
|
|
center: props.center,
|
|
zoom: props.zoom,
|
|
});
|
|
|
|
map.addControl(new maplibregl.NavigationControl(), "top-right");
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
if (map) map.remove();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|