update contact map style, source and marker

components/Contact/Map.vue

@@ -7,23 +7,53 @@
       :options="{scrollWheelZoom: false}"
     >
       <l-tile-layer
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        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 } from '@vue-leaflet/vue-leaflet'
+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">

pages/nous-contacter.vue

@@ -5,7 +5,7 @@
 
   <ContactForm />
 
-  <ContactAddressSection />
+  <ContactMap class="contact-map" />
 
   <LayoutFooterPrefooter />