Chapter 30: HTML Geolocation API: ഉപയോക്താവിന്റെ സ്ഥാനം കണ്ടെത്തുക (Getting User Location with HTML Geolocation API)

HTML Geolocation API എന്താണ്?

HTML Geolocation API ഉപയോക്താവിന്റെ സ്ഥാനം (location) കണ്ടെത്താൻ ഉപയോഗിക്കുന്നു. ഉപയോക്താവിന്റെ Latitude (അക്ഷാംശം) & Longitude (രേഖാംശം) ഉൾപ്പെടെ, സ്ഥാനം മാപ്പിൽ സൂചിപ്പിക്കുന്നതിനും സേവനങ്ങൾ ലഭ്യമാക്കുന്നതിനും ഇത് സഹായിക്കുന്നു. API, ഉപയോക്താവിന്റെ അനുമതി നൽകുന്നതിന് ശേഷം, ഉപയോക്താവിന്റെ ലൊക്കേഷൻ ഡാറ്റ ലഭ്യമാക്കുന്നു.

Geolocation API ഉപയോഗിക്കുന്നതിന്റെ ഘടന:

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

• successCallback: ലൊക്കേഷൻ കണ്ടെത്തിയതിനു ശേഷം വിളിക്കുന്ന ഫംഗ്ഷൻ.
• errorCallback: ലൊക്കേഷൻ കണ്ടെത്തുന്നതിൽ പിശക് സംഭവിച്ചാൽ വിളിക്കുന്ന ഫംഗ്ഷൻ.

Example: Getting User’s Location:

<button onclick="getLocation()">Get Location</button>
<p id="location"></p>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    document.getElementById("location").innerHTML = 
    "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
  }

  function showError(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        document.getElementById("location").innerHTML = "User denied the request for Geolocation.";
        break;
      case error.POSITION_UNAVAILABLE:
        document.getElementById("location").innerHTML = "Location information is unavailable.";
        break;
      case error.TIMEOUT:
        document.getElementById("location").innerHTML = "The request to get user location timed out.";
        break;
      case error.UNKNOWN_ERROR:
        document.getElementById("location").innerHTML = "An unknown error occurred.";
        break;
    }
  }
</script>

Example Explanation:

1. Get Location Button: ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഉപയോക്താവിന്റെ ലൊക്കേഷൻ API വിളിക്കുന്നു.
2. Success Callback: showPosition() ഫംഗ്ഷൻ Latitude & Longitude പ്രദർശിപ്പിക്കുന്നു.
3. Error Callback: showError() ഫംഗ്ഷൻ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നു (ഉദാ. ഉപയോക്താവിന്റെ അനുമതി നിഷേധിക്കപ്പെടുകയോ പിശക് ഉണ്ടാകുകയോ).

Geolocation API Options:

1. enableHighAccuracy: കൂടുതൽ കൃത്യതയുള്ള ലൊക്കേഷൻ നൽകാൻ (GPS ഉപയോഗിച്ച്), കൂടുതൽ ടൈം എടുത്തേക്കാം.javascriptCopy code{ enableHighAccuracy: true }
2. timeout: ലൊക്കേഷൻ API എത്ര നിമിഷം (milliseconds) കാത്തിരിക്കണം എന്ന് നിർണ്ണയിക്കുന്നു.javascriptCopy code{ timeout: 10000 } // 10 seconds
3. maximumAge: പഴയ ലൊക്കേഷൻ എത്ര നാൾ വരെ ഉപയോഗിക്കാം എന്ന് നിർണ്ണയിക്കുന്നു.javascriptCopy code{ maximumAge: 0 }

Example: Geolocation with Options:

navigator.geolocation.getCurrentPosition(showPosition, showError, {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 0
});

Displaying Location on a Map:

Geolocation API ഉപയോഗിച്ച് ഉപയോക്താവിന്റെ ലൊക്കേഷൻ Latitude, Longitude Coordinates-ൽ കാണിച്ചാൽ, Google Maps പോലുള്ള ഒരു മാപ്പിൽ ഇത് പ്രദർശിപ്പിക്കാനാകും.

<button onclick="getLocation()">Show on Map</button>
<div id="mapholder" style="height:400px;width:100%;"></div>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showMap, showError);
    } else {
      document.getElementById("mapholder").innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showMap(position) {
    const latlon = position.coords.latitude + "," + position.coords.longitude;
    const img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
      + latlon + "&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>";
  }

  function showError(error) {
    document.getElementById("mapholder").innerHTML = "Error occurred while fetching location.";
  }
</script>

Example Explanation:

1. Google Maps API: ഉപയോക്താവിന്റെ Latitude, Longitude കൺസ്ട്രക്റ്റ് ചെയ്ത്, Google Maps API ഉപയോഗിച്ച് മാപ്പിൽ പ്രദർശിപ്പിക്കുന്നു.
2. Map Holder: img ടാഗ് Google Maps Static API ഉപയോഗിച്ച് മാപ്പ് കാണിക്കുന്നു.

Tracking User’s Location Continuously:

watchPosition() API ഉപയോഗിച്ച് ഉപയോക്താവിന്റെ ലൊക്കേഷൻ തുടർച്ചയായി ട്രാക്ക് ചെയ്യാൻ കഴിയും.

navigator.geolocation.watchPosition(showPosition, showError);

Use Cases of Geolocation API:

1. Location-Based Services: ഉപയോക്താവിന്റെ ലൊക്കേഷൻ അടിസ്ഥാനമാക്കി പരിസര സേവനങ്ങൾ ലഭ്യമാക്കാൻ (ഉദാ: ഹോട്ടൽ, കട എന്നിവയുടെ വിവരങ്ങൾ).
2. Map Integration: ഉപയോക്താവിന്റെ നിലവിലെ ലൊക്കേഷൻ Google Maps, OpenStreetMap പോലുള്ള മാപ്പുകളിൽ പ്രദർശിപ്പിച്ച് മാർഗ നിർദ്ദേശങ്ങൾ നൽകാൻ.
3. Weather Apps: ഉപയോക്താവിന്റെ ലൊക്കേഷൻ പിന്തുടർന്ന് കൃത്യമായ കാലാവസ്ഥാ വിവരങ്ങൾ നൽകാനുള്ള സിസ്റ്റങ്ങൾ.
4. Geo-Fencing: ഒരു പ്രത്യേക പ്രദേശത്ത് ഉപയോക്താവ് പ്രവേശിച്ചാൽ ഓട്ടോമാറ്റിക് ഫീച്ചറുകൾ പ്രവർത്തിപ്പിക്കുക.

Limitations of Geolocation API:

1. User Consent: Geolocation API പ്രവർത്തിക്കുന്നതിന് ഉപയോക്താവിന്റെ അനുമതി ആവശ്യമാണ്. ഉപയോക്താവ് അനുമതി നിഷേധിച്ചാൽ API ഉപയോഗിക്കാനാവില്ല.
2. Accuracy: ഉപയോക്താവിന്റെ ലൊക്കേഷൻ കൃത്യത network-based position, GPS, Wi-Fi strength എന്നിവയുടെ അടിസ്ഥാനത്തിൽ വ്യത്യാസപ്പെടുന്നു.
3. Battery Consumption: Location services GPS ഉപയോഗിക്കുന്നതിനാൽ, ഉപയോക്താവിന്റെ ബാറ്ററി വേഗത്തിൽ ചാർജ് നഷ്ടമാവാൻ സാധ്യതയുണ്ട്.

---

സങ്കലനം:

HTML Geolocation API ഉപയോക്താവിന്റെ സ്ഥാനം കണ്ടെത്തി പേജിൽ ഇന്ററാക്ടീവ് ഫീച്ചറുകൾ സൃഷ്ടിക്കാനും, മാപ്പുകൾ, ലൊക്കേഷൻ അടിസ്ഥാനമാക്കിയുള്ള സേവനങ്ങൾ, മാർഗ നിർദ്ദേശങ്ങൾ, ലൊക്കേഷൻ-ബേസ്ഡ് ആപ്ലിക്കേഷനുകൾ പ്രാപ്റ്റമാക്കാനും സഹായിക്കുന്നു. API പ്രവർത്തിക്കുന്നതിന് ഉപയോക്താവിന്റെ അനുമതി നിർബന്ധമാണ്.