You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.2 KiB
115 lines
3.2 KiB
<template>
|
|
<div class="map-wrap">
|
|
<div id="map" class="map" ref="mapContainer"></div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import maplibregl from "maplibre-gl";
|
|
import { markRaw, onMounted, onUnmounted, reactive, shallowRef, } from "vue";
|
|
export default {
|
|
name: "item-map-component",
|
|
props: {
|
|
internal_id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
x_coord: {
|
|
required: true,
|
|
},
|
|
y_coord: {
|
|
required: true,
|
|
},
|
|
},
|
|
setup(props, _context) {
|
|
const mapContainer = shallowRef(null);
|
|
const map = shallowRef(null);
|
|
|
|
onMounted(() => {
|
|
const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
|
|
|
|
map.value = markRaw(new maplibregl.Map({
|
|
container: mapContainer.value, // container id
|
|
// DOCS: https://maplibre.org/maplibre-gl-js-docs/style-spec/
|
|
style: {
|
|
version: 8,
|
|
sources: {},
|
|
layers: []
|
|
},
|
|
// we cut our map below, compensate for it while centering
|
|
center: [props.y_coord, props.x_coord - 25], // starting position [lng, lat]
|
|
zoom: 2, // starting zoom
|
|
maxZoom: 10
|
|
}));
|
|
|
|
map.value.on('load', () => {
|
|
map.value.addSource('basemap-source', {
|
|
'type': 'raster',
|
|
'tiles': [`https://api.mapbox.com/styles/v1/ghermant/cl8vg2r97001m14o4c2qzw9t6/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`]
|
|
})
|
|
|
|
map.value.addLayer(
|
|
{
|
|
'id': 'basemap-layer',
|
|
'type': 'raster',
|
|
'source': 'basemap-source',
|
|
'paint': {}
|
|
}
|
|
);
|
|
|
|
map.value.addSource('samples', {
|
|
'type': 'vector',
|
|
"tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
|
|
'promoteId': 'fadr',
|
|
});
|
|
|
|
map.value.addLayer({
|
|
'id': 'samples-layer',
|
|
'source': 'samples',
|
|
'source-layer': 'public.geodata',
|
|
'type': 'circle',
|
|
'paint': {
|
|
'circle-stroke-width': 1,
|
|
'circle-stroke-color': '#FFFFFF',
|
|
'circle-color': '#d95f0e',
|
|
'circle-opacity': 0.8,
|
|
'circle-radius': 16
|
|
},
|
|
filter: ["==", ["get", "internal_id"], props.internal_id]
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
// TODO: remove even listeners too
|
|
map.value?.remove();
|
|
})
|
|
|
|
|
|
return {
|
|
map, mapContainer,
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="css">
|
|
.map-wrap {
|
|
position: relative;
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
.map {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* z-index: -1; */
|
|
}
|
|
</style> |