add geo location service to view current position

Author: p3t3r67x0

src/index.html

@@ -58,6 +58,18 @@ <h2><a href="/" class="text-xl md:text-2xl text-gray-700 hover:text-blue-700 foc
       </div>
 
       <div class="mt-3 md:mt-6 py-2 px-3" id="about">
+        <form id="geoLocation" enctype="application/x-www-form-urlencoded">
+          <div class="mx-3 mb-8">
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input type="checkbox" name="myLocation" value="true" class="sr-only peer">
+              <div
+                class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
+              </div>
+              <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Meinen Standort verwenden</span>
+            </label>
+          </div>
+        </form>
+
         <h3 class="font-bold text-xl md:text-2xl mb-1">Wie funktioniert die Denkmalkarte?</h3>
         <p class="font-normal leading-normal text-md lg:text-lg mb-3 md:mb-6">Klicken Sie auf einen Marker, um Details
           zu denkmalgeschützten Anlagen anzuzeigen. Bewegen Sie die Karte, um weitere Orte zu erkunden – die Daten

src/main.js

@@ -163,7 +163,19 @@ async function fetchMonumentPointsByBounds() {
     ymax: bounds.getNorth(),
   }
 
-  const url = `${process.env.PARCEL_BASE_API_URL}/monument/v1/geometries?xmin=${bbox.xmin}&ymin=${bbox.ymin}&xmax=${bbox.xmax}&ymax=${bbox.ymax}`
+  const url = `${process.env.PARCEL_BASE_API_URL}/monument/v1/bounds?xmin=${bbox.xmin}&ymin=${bbox.ymin}&xmax=${bbox.xmax}&ymax=${bbox.ymax}`
+  const data = await fetchJsonData(url)
+  addMonumentsToMap(data, addMonumentsByBounds, zoomLevelInitial)
+
+  if (previousSelectedMarker) {
+    const previousMarkerId = previousSelectedMarker.feature.id
+    const newSelectedMarker = findMarkerById(previousMarkerId)
+    if (newSelectedMarker) setSelectedMarker(newSelectedMarker)
+  }
+}
+
+async function fetchMonumentPointsByPosition(lat, lng) {
+  const url = `${process.env.PARCEL_BASE_API_URL}/monument/v1/radius?lat=${lat}&lng=${lng}`
   const data = await fetchJsonData(url)
   addMonumentsToMap(data, addMonumentsByBounds, zoomLevelInitial)
 
@@ -175,7 +187,7 @@ async function fetchMonumentPointsByBounds() {
 }
 
 async function fetchMonumentDetailBySlug(slug) {
-  const url = `${process.env.PARCEL_BASE_API_URL}/monument/v1/detail?slug=${slug}`
+  const url = `${process.env.PARCEL_BASE_API_URL}/monument/v1/details?slug=${slug}`
   const data = await fetchJsonData(url)
 
   if (!data || !data[0]) return
@@ -223,7 +235,6 @@ async function fetchMonumentDetailById(id) {
   renderMonumentMeta(data[0])
 }
 
-// UI-related functions
 function renderMonumentMeta(data) {
   const { slug, street, housenumber, postcode, city, last_update, monument_type, description, monument_function, object_number, monument_scope } = data
 
@@ -294,6 +305,24 @@ window.onload = async () => {
     document.querySelector('#sidebar').classList.toggle('translate-y-full')
   })
 
+  document.getElementById('geoLocation').addEventListener('change', function (event) {
+    if (event.target.name === 'myLocation' && event.target.checked) {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+          (position) => {
+            fetchMonumentPointsByPosition(position.coords.latitude, position.coords.longitude)
+            map.setView([position.coords.latitude, position.coords.longitude], 16)
+          },
+          (error) => {
+            console.error('Error obtaining geolocation:', error.message);
+          }
+        );
+      } else {
+        console.error('Geolocation is not supported by this browser.');
+      }
+    }
+  })
+
   const path = decodeURIComponent(window.location.pathname)
   const screen = path === '/' ? 'home' : path.slice(1)
   if (!history.state) history.replaceState({ screen }, '', path)