frames/components/Ui/Map/France.vue

<template>
  <LayoutContainer>
    <div id="map" />

    <div class="advice">
      {{ $t("click_on_land_to_go_there") }}
    </div>
    <v-row class="map-shortcuts">
      <v-col cols="2">
        <nuxt-img src="/images/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}" />
      </v-col>
      <v-col cols="2">
        <nuxt-img src="/images/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}" />
      </v-col>
      <v-col cols="2">
        <nuxt-img src="/images/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}" />
      </v-col>
      <v-col cols="2">
        <nuxt-img src="/images/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}" />
      </v-col>
      <v-col cols="2">
        <nuxt-img src="/images/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}" />
      </v-col>
      <v-col cols="2">
        <nuxt-img src="/images/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}" />
      </v-col>
    </v-row>
  </LayoutContainer>
</template>


<style>
  .map-shortcuts img {
    border: solid 1px #000;
    width: 75px;
    height: 75px;
  }
</style>