site_logiciels/components/Contact/Map.vue

<template>
<LayoutContainer>
    <h4>
      <span class="line" /> Contactez-nous
    </h4>

    <v-row>
      <v-col cols="6">
        <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>
      </v-col>

      <v-col class="infos">
        <div class="name mb-8">
          Opentalent
        </div>

        <div class="d-flex flex-row align-center mb-8">
          <v-icon icon="fa fa-map-marker-alt" />
          <span>
            217 rue Raoul Follereau<br/>
            74300 CLUSES
          </span>
        </div>

        <div class="d-flex flex-row mb-4">
          <v-icon icon="fa fa-phone" />
          09.72.12.60.17
        </div>

        <div class="d-flex flex-row mb-4">
          <v-icon icon="far fa-envelope" />
          contact@opentalent.fr
        </div>
      </v-col>
    </v-row>
  </LayoutContainer>
</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">

h4 {
  display: flex;
  flex-direction: row;
  font-size: 40px;
  line-height: 95px;
  align-items: center;
  font-weight: 100;
  margin: 0 auto 1rem auto;
  max-width: 1400px;

  .line {
    display: block;
    height: 1px;
    width: 64px;
    min-width: 64px;
    border-top: solid 1px var(--on-neutral-color);
    margin-right: 18px;
  }
}


.map-container {
  height: 500px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.infos {
  padding: 48px 36px;
  font-size: 21px;
  font-weight: 300;

  .name {
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 600;
  }

  .v-icon {
    margin-right: 16px;
    opacity: 0.6;
  }
}
</style>