site_logiciels/components/Contact/Map.vue

<template>
  <div id="map" style="height: 500px" />
</template>

<script setup lang="ts">
import L from "leaflet";
import "leaflet/dist/leaflet.css";

onMounted(() => {
  const map = L.map("map").setView([46.075245, 6.570162], 16);

  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "© OpenStreetMap contributors",
  }).addTo(map);

  const marker = L.marker([46.075245, 6.570162]).addTo(map);
});
</script>

<style scoped lang="scss">
#map {
  height: 100%;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
</style>