এইচটিএমএল ৫ জিওলোকেশন-HTML5 Geolocation

ব্রাউজার সাপোর্ট

API	Google Chrome	Edge/IE	Mozila Firefox	Safari	Opera
geolocation	৫.০-৪৯.০(http) ৫০.০(https)	৯.০	৩.৫	৫.০	১৬.০

ইউজারের অবস্থান নির্ণয়ের জন্য এইচটিএমএল জিওলোকেশন এপিআই ব্যবহার করা হয়।

ব্রাউজার সাপোর্ট

বর্তমান সময়ের অধিকাংশ ব্রাউজারেই জিওলোকেশন সাপোর্ট করে। ক্রোম ৫.০, ইন্টারনেট এক্সপ্লোরার ৯.০, ফায়ারফক্স ৩.৫, সাফারি ৫.০ এবং অপেরা ১৬.০ ভার্সন থেকে জিওলোকেশন সাপোর্ট করে।

ক্রোম ৪৯.০ ভার্সন পর্যন্ত http সাইটগুলোতেও ইউজারের অবস্থান জানার রিকুয়েস্ট কাজ করে, ভার্সন ৫০.০ থেকে শুধুমাত্র https সাইটগুলোর জন্য কাজ করে।

getCurrentPosition() মেথডের রিটার্নকৃত ডেটা

getCurrentPosition() মেথড সফল হলে যেসকল প্রোপার্টি রিটার্ন হয় তার একটি লিস্ট দেওয়া হলোঃ

প্রোপার্টি	রিটার্ন
coords.latitude	দশমিক সংখ্যায় অক্ষাংশ(latitude) রিটার্ন করে
coords.longitude	দশমিক সংখায় দ্রাঘিমাংশ(longitude) রিটার্ন করে
coords.accuracy	অবস্থানের যথার্থতা রিটার্ন করে
coords.altitude	সমুদ্রপৃষ্ঠ থেকে উচ্চতা রিটার্ন করে(যদি পাওয়া যায়)
coords.altitudeAccuracy	সমুদ্রপৃষ্ঠ থেকে উচ্চতার যথার্থতা রিটার্ন করে(যদি পাওয়া যায়)
coords.heading	coords.heading এই প্রোপার্টিটি উত্তর মেরু থেকে দূরত্বকে ডিগ্রী হিসেবে প্রকাশ করে
coords.speed	প্রতি সেকেন্ডে গতি রিটার্ন করে(মিটারে)
timestamp	তারিখ/সময়

ইউজারের অবস্থান নির্ণয়

ইউজারের অবস্থান নির্ণয়ের জন্য এইচটিএমএল জিওলোকেশন এপিআই ব্যবহার করা হয়। এক্ষেত্রে প্রথমে ইউজারের কাছ থেকে অনুমতি চাওয়া হয়, ব্যবহারকারী অনুমতি দিলে তখনই অবস্থান পাওয়া যায়।

এইচটিএমএল জিওলোকেশন এর ব্যবহার

getCurrentPosition() মেথডের মাধ্যমে ইউজারের অবস্থান পাওয়া যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল ৫ জিওলোকেশন</title>
</head>
<body>

<p> বাটনটি চাপুন ফলাফল পাওয়ার জন্য ।</p>

<button onclick="getLocation()">চেষ্টা করুন</button>

<p id="test"></p>

<script>
var a = document.getElementById("test");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        a.innerHTML = "দুঃখিত,আপনার ব্রাউজারে  জিওলোকেশন  সাপোর্ট করে না।";
    }
}

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

</body>
</html>

ফলাফল

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

প্রথমে if কন্ডিশনের মাধ্যমে জিওলোকেশন সাপোর্ট চেক করা হয়
যদি সাপোর্ট করে তাহলে getCurrentPosition() মেথডটি রান হবে, অন্যথায় ব্যবহারকারীকে অ্যালার্ট দেওয়া হয় আপনার ব্রাউজার জিওলোকেশন সাপোর্ট করেনা
যদি getCurrentPosition() মেথডটি সফল হয় তাহলে এটি showPosition ফাংশনকে স্থানাংক অবজেক্ট রিটার্ন করে
showPosition() ফাংশনের মাধ্যমে অক্ষাংশ এবং দ্রাঘিমাংশ ডকুমেন্টে দেখানো হয়।

এরর এবং অননুমোদন নিয়ন্ত্রন পদ্ধতি

getCurrentPosition() মেথড ইউজারের অবস্থান নির্ণয় করতে অথবা কোন এরর ঘটলে এই ফাংশনটি রান হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল Error নিয়ন্ত্রন</title>
</head>
<body>

<p>ফলাফল পাওয়ার জন্য বাটনটি চাপুন।।</p>

<button onclick="getLocation()">চেষ্টা করুন </button>

<p id="test"></p>

<script>
var a = document.getElementById("test");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        a.innerHTML = "দুঃখিত,আপনার ব্রাউজারে  জিওলোকেশন  সাপোর্ট করে না।";
    }
}

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

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            a.innerHTML = "জিওলোকেশন এর জন্য রিকুয়েস্ট তৈরি করা হয়েছে।"
            break;
        case error.POSITION_UNAVAILABLE:
            a.innerHTML = "এই লোকেশনে কোন তথ্য খুঁজে পাওয়া যায়নি।"
            break;
        case error.TIMEOUT:
            a.innerHTML = "ইউজার লোকেশন এর জন্য যে রিকুয়েস্টটি করা হয়েছে তা টাইম আউট হয়ে গেছে।"
            break;
        case error.UNKNOWN_ERROR:
            a.innerHTML = "এখানে একটি অজানা ত্রুটি ঘটেছে।"
            break;
    }
}
</script>

</body>
</html>

ফলাফল

স্ক্রিপ্টের মাধ্যমে অবস্থান প্রদর্শন

আমরা গুগল ম্যাপের সাহায্যে ইউজারের অবস্থান প্রদর্শন করতে পারিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল জিওলোকেশন</title>
</head>
<body>

<p id="test">আপনার অবস্থান দেখতে বাটনে ক্লিক করুন।</p>

<button onclick="getLocation()">এখানে ক্লিক করুন</button>

<div id="mapholder"></div>

<script src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAIkVN8rsnCicnrvUOhv1ZYcO_8j_Zx9uM"></script>
<script>
var a = document.getElementById("test");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        a.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';


    var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
    
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

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

</body>
</html>

ফলাফল

জিওলোকেশন অবজেক্ট - অন্যান্য মেথড

watchPosition() - এই মেথডের মাধ্যমে ইউজারের বর্তমান অবস্থান নির্ণয় করা যায় এবং স্থান পরিবর্তন করলে তার আপডেটও পাওয়া যায়

clearWatch() - এর মাধ্যমে watchPosition() মেথডকে স্থগিত রাখা হয়

নিচের উদাহরনে watchPosition() মেথড এর ব্যবহার দেখানো হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল জিওলোকেশন</title>
</head>
<body>

<p>বাটনটি চাপুন ফলাফল পাওয়ার জন্য ।</p>

<button onclick="getLocation()">চেষ্টা করুন</button>

<p id="test"></p>

<script>
var a = document.getElementById("test");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        a.innerHTML = "দুঃখিত,আপনার ব্রাউজারে  জিওলোকেশন  সাপোর্ট করে না।";}
    }
    
function showPosition(position) {
    a.innerHTML="Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

</body>
</html>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল ফর্ম