template / create the components of the honor page

pages/about.vue

@@ -96,7 +96,19 @@
         </div>
       </div>
       <div class="w-full md:w-[35%] rounded-[1.302vw]">
-            <div id="map"></div>
+                <LMap
+                class="rounded-lg"
+                ref="map"
+                :zoom="zoom"
+                :center="[34.08011180237817, 49.69090848676344]"
+              >
+                <LTileLayer
+                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                  attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+                  layer-type="base"
+                  name="OpenStreetMap"
+                />
+              </LMap>
         </div>
       </div>
     </div>
@@ -410,34 +422,5 @@
 </template>
 
 <script setup>
-const { $leaflet } = useNuxtApp();
-
-onMounted(() => {
-  let map = $leaflet.map("map").setView([35.700105, 51.400394], 14);
-  // let tiles = $leaflet.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
-  //     maxZoom: 18,
-  //     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
-  //         'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-  //     id: 'mapbox/streets-v11',
-  //     tileSize: 512,
-  //     zoomOffset: -1
-  // }).addTo(map);
-  let tiles = $leaflet
-    .tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-      maxZoom: 18,
-    })
-    .addTo(map);
-
-  let marker = $leaflet
-    .marker([35.700105, 51.400394], {
-      icon: $leaflet.icon({
-        popupAnchor: [12, 6],
-        iconUrl: "/map/marker-icon.png",
-        shadowUrl: "/map/marker-shadow.png",
-      }),
-    })
-    .addTo(map)
-    .bindPopup("<b>سلام</b><br/>مااینجاییم")
-    .openPopup();
-});
+const zoom = ref(100)
 </script>