38 lines
756 B
Vue
38 lines
756 B
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, ref } from 'vue';
|
|
import maplibregl from 'maplibre-gl';
|
|
|
|
const mapContainer = ref<HTMLDivElement | null>(null);
|
|
let map: maplibregl.Map | null = null;
|
|
|
|
onMounted(() => {
|
|
if (!mapContainer.value) return;
|
|
|
|
map = new maplibregl.Map({
|
|
container: mapContainer.value,
|
|
style: 'https://demotiles.maplibre.org/style.json',
|
|
center: [-74.5, 40], // [lng, lat]
|
|
zoom: 9
|
|
});
|
|
|
|
// Add a marker as an example
|
|
new maplibregl.Marker()
|
|
.setLngLat([-74.5, 40])
|
|
.addTo(map);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
map?.remove();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="mapContainer" class="map-container"></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.map-container {
|
|
width: 100%;
|
|
height: 500px;
|
|
}
|
|
</style>
|