site_logiciels/components/Contact/Map.vue

<template>
  <div class="map-container">
    <l-map
      ref="map"
      :zoom="15"
      :center="location"
      :options="{scrollWheelZoom: false}"
    >
      <l-tile-layer
        url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
        layer-type="base"
        name="OpenStreetMap"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
      />

      <l-marker
        :icon="icon"
        :lat-lng="location"
      >
        <l-popup>
          <v-row>
            <v-col cols="4" class="d-flex align-center">
              <v-img src="/images/Opentalent_Griffe.png"/>
            </v-col>
            <v-col cols="8">
              <div>
                OPENTALENT
              </div>
              <div>
                217, rue Raoul Follereau
              </div>
              <div>
                74300 - Cluses
              </div>
            </v-col>
          </v-row>
        </l-popup>
      </l-marker>
    </l-map>
  </div>
</template>

<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer, LMarker, LIcon } from '@vue-leaflet/vue-leaflet'
import L from 'leaflet';

const location = [46.075245, 6.570162]

const icon = L.icon({
  iconUrl: '/images/Opentalent_Griffe.png',
  iconSize: [60, 60],
  iconAnchor: [22, 94],
  popupAnchor: [5, -100],
})

</script>

<style scoped lang="scss">
.map-container {
  height: 500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
</style>