divers-h/client/src/components/Admin/MapSelection.vue at 97d7d587fd07dd8e7c3713d3e2150bb2d71b0824 · OpenGeoscience/divers-h · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script lang="ts">
import {
  PropType, Ref, defineComponent, onMounted, ref,
} from 'vue';
import maplibre, { Map } from 'maplibre-gl';

export default defineComponent({
  name: 'MapSelection',
  props: {
    defaultMapSettings: {
      type: Object as PropType<{ location: {
        center: [number, number];
        zoom: number;
      } }>,
      required: true,
    },
  },
  emits: ['update:settings'],
  setup(props, { emit }) {
    const mapContainer = ref<HTMLDivElement | null>(null);
    const mapInstance: Ref<Map | null> = ref(null);

    const mapMove = () => {
      if (mapInstance.value) {
        const center = mapInstance.value.getCenter();
        const zoom = mapInstance.value.getZoom();
        emit('update:settings', {
          location: {
            center: [center.lng, center.lat],
            zoom,
          },
        });
      }
    };
    // Initialize Map
    onMounted(() => {
      if (!mapContainer.value) return;
      mapInstance.value = new maplibre.Map({
        container: mapContainer.value,
        style: {
          version: 8,
          sources: {
            osm: {
              type: 'raster',
              tiles: [
                'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
                'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
                'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png',
              ],
              tileSize: 256,
              attribution: '© OpenStreetMap contributors',
            },
          },
          layers: [
            {
              id: 'osm-tiles',
              type: 'raster',
              source: 'osm',
              maxzoom: 19,
            },
          ],
        },
        center: props.defaultMapSettings.location.center,
        zoom: props.defaultMapSettings.location.zoom,
      });
      mapInstance.value.on('load', () => {
        if (mapInstance.value) {
          mapInstance.value.on('move', mapMove);
        }
      });
    });

    return {
      mapContainer,
    };
  },
});
</script>

<template>
  <div ref="mapContainer" class="map-container" />
</template>

<style scoped>
  .map-container {
    width: 100%;
    height: 400px;
  }
</style>