frames/components/Ui/Map/Structures.vue

<template>
  <LayoutContainer>
    <v-responsive :aspect-ratio="1" width="100%">
      <no-ssr>
        <l-map
          id="map"
          :zoom="zoom"
          :center="center"
          :bounds="bounds"
          :options="{scrollWheelZoom: false, zoomSnap: 0.25}"
          @update:bounds="boundsUpdated"
        >
          <l-tile-layer
            url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
            attribution="&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
          />
          <v-marker-cluster>
            <l-marker
              v-for="structure in structures"
              :key="structure.id"
              :lat-lng="[structure.latitude, structure.longitude]">
              <l-popup>
                <b>{{ structure.name }}</b><br>
                {{ structure.postalCode }} {{ structure.addressCity }}<br>
                <a :href="structure.website" target="_blank">{{ structure.website }}</a>
              </l-popup>
            </l-marker>
          </v-marker-cluster>
        </l-map>
      </no-ssr>
    </v-responsive>

    <div class="advice">
      {{ $t("click_on_land_to_go_there") }}
    </div>

    <v-row class="map-shortcuts">
      <v-col v-for="shortcut in shortcuts" :key="shortcut.src" cols="2">
        <div @click="setMapBounds(shortcut.bounds)">
          <nuxt-img
            :src="shortcut.src"
            :alt="shortcut.alt"
          />
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script>
export default {
  props: {
    structures: {
      type: Array,
      required: false,
      default: () => []
    }
  },
  data () {
    const defaultCenter = [46.71, 1.94]
    const defaultZoom = 5.75
    const defaultBounds = [[51.03, -5.78], [41.2, 9.70]]

    return {
      defaultCenter,
      defaultZoom,
      defaultBounds,
      center: defaultCenter,
      zoom: defaultZoom,
      bounds: defaultBounds,
      isFirstRendering: true,
      shortcuts: [
        { src: '/images/metropole.png', alt: 'Metropole', bounds: { x1: 51.03, y1: -5.78, x2: 41.2, y2: 9.70 } },
        { src: '/images/guadeloupe.png', alt: 'Guadeloupe', bounds: { x1: 16.62, y1: -62.03, x2: 15.74, y2: -60.97 } },
        { src: '/images/martinique.png', alt: 'Martinique', bounds: { x1: 14.95, y1: -61.43, x2: 14.28, y2: -60.60 } },
        { src: '/images/mayotte.png', alt: 'Mayotte', bounds: { x1: -12.51, y1: 44.86, x2: -13.19, y2: 45.45 } },
        { src: '/images/la_reunion.png', alt: 'La Réunion', bounds: { x1: -20.65, y1: 54.92, x2: -21.65, y2: 56.15 } },
        { src: '/images/guyane.png', alt: 'Guyane', bounds: { x1: 6.24, y1: -54.62, x2: 1.87, y2: -50.59 } }
      ]
    }
  },
  methods: {
    setMapBounds (bounds) {
      this.center = [0, 0] // << without this, the new bounds won't be properly set if you're already inside these new bounds.
      this.bounds = [[bounds.x1, bounds.y1], [bounds.x2, bounds.y2]]
    },
    boundsUpdated (newBounds) {
      // do not send and event on first automatic rendering
      if (this.isFirstRendering) {
        this.isFirstRendering = false
        return
      }
      this.$emit('boundsUpdated', newBounds)
    }
  }
}
</script>

<style scoped>
  #map {
    height: 100%;
    width: 100%;
  }
  .advice {
    margin: 1rem 0;
    color: #262626;
    font-weight: 750;
    text-align: center;
    font-size: 0.9rem;
    width: 100%;
  }
  .map-shortcuts .col {
    padding: 12px 6px;
  }
  .map-shortcuts img {
      border: solid 1px #000;
      width: 75px;
      height: 75px;
    }
</style>