X

X

X

HTML5 -এ Geolocation বা ব্যবহারকারীর অবস্থান নির্ণয়


ব্যবহারকারীরর অবস্থান নির্ণয় করার জন্য HTML Geolocation API ব্যবহার করা হয়।


ব্যবহারকারীরর অবস্থান নির্ণয় করুন

বি:দ্র: Geolocation সঠিক হবে যখন ব্রাউজার সঠিকভাবে কাজ করবে। যেমন, iPhone এ সঠিক অবস্থান নির্ণয় করা সম্ভব।


Browser সাপোর্ট

Geolocation সাপোর্ট করে এমন ব্রাউজারের সর্বনিম্ন ভার্শনগুলো উল্লেখ্য করা হলো।

API
Geolocation 5.0 – 49.0 (http)
50.0 (https)
9.0 3.5 5.0 16.0

বি:দ্র:Chrome 50 এর পরবর্তী ব্রাউজারে যদি ওয়েব কানেকশন HTTPS দিয়ে হয় তবেই শুধুমাত্র Geolocation কাজ করবে। না হলে কাজ করবে না। 


HTML Geolocation এর ব্যবহার

উদাহরণে getCurrentPosition() method দিয়ে ব্যবহারকারীর অবস্থান নির্ণয় করা হয়েছে।

নিচের উদাহরণে ব্যবহারকারীর ল্যাটিটিউড ও লগগিটিউড নির্ণয় করা হয়েছে।

Code Example

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উদাহরণের ব্যাখ্যা:

  • প্রথমে চেক করুন Geolocation সাপোর্ট করে কি না
  • যদি সাপোর্ট করে তবে, getCurrentPosition() method রান করুন।
  • যদি getCurrentPosition() method সঠিকভাবে কাজ করে তবে এটি ব্যবহারকারীর অবস্থান প্রদর্শণ করবে।
  • showPosition() function ব্যবহারকারীর Latitude এবং Longitude রিটার্ন করে।

উপরের উদাহরণটি খুবই বেসিক একটি উদাহরণ। এটিতে কোনো ভুল নির্ণয় বা হ্যান্ডেল করার কোনো পদ্ধতি ব্যবহার করা হয়নি।


Error Handling এবং Rejection সমূহ

getCurrentPosition() এর দ্বিতীয় প্যারামিটার দিয়ে ভুল হ্যান্ডেল করা হয়। যদি কোনো ভুল হয়, তবে এই প্যারামিটারটি এক্সিকিউট হবে।

Code Example

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

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

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Map এ ফলাফল উপস্থাপণ

ম্যাপের মাধ্যমে ফলাফল উপস্থাপণ করার জন্য গুগল ম্যাপের মত সার্ভিস ব্যবহার করতে হবে। নিচের উদাহরণে প্রথমে ব্যবহারকারীর অবস্থান নির্ণয় করা হয়। তারপর ওই latitude ও longitude ম্যাপ প্রদর্শণে ব্যবহার করা হয়েছে।

Code Example

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বিস্তারিত জানার জন্য Google Map Script লিংকটি ব্যবহার করুন।

marker, zoom এবং drag options ব্যবহার করে Google Map প্রদর্শণ করার নিয়ম নিচে বর্ণনা করা হলো।


অবস্থানভিত্তিক তথ্য

এই পেজে শধুমাত্র ব্যবহারকারীরর অবস্থানের উপর ভিত্তি করে ম্যাপে তার অবস্থান দেখানো হয়েছে। তবে এটি আরো অনেক গুরুত্বপূর্ণ কাজে ব্যবহার করা যায়। যেমন,

  • Up-to-date স্থানীয় তথ্য।
  • ব্যবহারকারীর পছন্দ অনুযায়ী কাছাকাছি জায়গার তথ্য উপস্থাপণ।
  • (GPS) অবস্থান।

getCurrentPosition() Method এর Returned Data

getCurrentPosition() method সফলভাবে সম্পন্ন হলে একটি ডাটা অবজেক্ট রিটার্ন করে। সবসময় latitude, longitude এবং accuracy property গুলো রিটার্ন হয়। অন্যান্য প্রোপার্টিগুলো যদি থাকে তবে রিটার্ন করে।

Property Returns
coords.latitude latitude দশমিক নাম্বার হিসেবে রিটার্ন হয়।
coords.longitude longitude দশমিক নাম্বার হিসেবে রিটার্ন হয়।
coords.accuracy অবস্থানের accuracy
coords.altitude সমূদ্র সৈকতের উপরে কতটুকু উচ্চতা (যদি সম্ভব হয়)
coords.altitudeAccuracy অবস্থানের altitude accuracy (যদি সম্ভব হয়)
coords.heading ঘড়ির কাটার বিপরীতে হেডিং ডিগ্রীতে প্রকাশ করে (যদি সম্ভব হয়)।
coords.speed বেগ (যদি সম্ভব হয়))
timestamp রেসপন্স এর সময়/তারিখ ((যদি সম্ভব হয়))

Geolocation Object এর অন্যান্য মজার Method সমূহ

  • watchPosition() – ব্যবহারকারীর অবস্থান তার গতির উপর ভিত্তি করে রিটার্ন করতেই থাকে। GPS কারে এটি ব্যবহার করা যায়।
  • clearWatch() – watchPosition() method এর ক্রিয়া বন্ধ করার জন্য ব্যবহৃত হয়।

নিচে watchPosition() method এর উদাহরণ দেওয়া হলো।

Code Example

<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";}
    }
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}
</script>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।