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



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


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

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

নোট - iphone এর মত GPS সহ ডিভাইস গুলোর জন্য নিখুঁত ভৌগলিক-অবস্থান বা Geolocation খুব গুরুত্বপূর্ণ।


ব্রাউজার সমর্থন বা support

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে ভৌগলিক-অবস্থান বা Geolocation সমর্থন বা support করে।

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

নোট - ক্রোম 50 এর পরের ভার্সন থেকে, জিওলোকেশন এপিআই শুধুমাত্র নিরাপদ ওয়েবসাইট যেমন HTTPS, তে কাজ করবে। যদি ওয়েব সাইট একটি অ-নিরাপদ root, যেমন HTTP এ হোস্ট করা হয় তবে ব্যবহারকারীদের অবস্থানের জন্য এই ভৌগলিক-অবস্থান বা Geolocation request কাজ করবে না।


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

getCurrentPosition() মেথড ব্যবহার করে ইউজারের অবস্থান নির্ণয় করা যায়। নিচে একটি উদাহরণ দেখুন, যেখানে ইউজারের অক্ষাংশ বা latitude এবং দ্রাঘিমাংশ বা longitude অর্থাৎ অবস্থানের তথ্য ফেরত বা return করে।

উদাহরণ

<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<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 +
"
Longitude: " + position.coords.longitude;
}
</script>


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

উপরে উদাহরণটি একটি খুব সাধারন জিওলোশন স্ক্রিপ্ট, এটাতে কোনও error handling এর বাবস্থা নেই। নিচে উদাহরণটির ব্যাখ্যা দেখুন।

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


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

দ্বিতীয় প্যারামিটার টি হল getCurrentPosition() মেথড, যা কোন ভূল বা error ঘটলে সেটা নিয়ন্ত্রন করে। এটি ব্যবহারকারি বা usar এর অবস্থান পেতে ব্যর্থ হলে একটি নির্দিষ্ট ফাংশন চালানো বা run করে।

উদাহরণ

<button onclick="getLocation()">Try It</button>
<p id="demo"></p>

<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 +
"
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>




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

ফলাফল ম্যাপে প্রদর্শন করতে হলে, Google ম্যাপের মত কোন একটি মানচিত্র পরিসেবার প্রয়োজন। আমরা গুগল ম্যাপের সাহায্যে ইউজারের অবস্থান প্রদর্শন করতে পারি। নীচের উদাহরণে, ফেরত অক্ষাংশ এবং দ্রাঘিমাংশ ব্যবহার করে Google মানচিত্রে অবস্থান প্রদর্শন করা হয়েছে।

উদাহরণ

<button onclick="getLocation()">Try It</button>

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

<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 = "";
}
//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>




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

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

তাৎক্ষণিক বা Up-to-date স্থানীয় তথ্য,
বাবহারকারী বা user এর কাছাকাছি কোন অবস্থান,
প্রতি পদে পদে বা Turn-by-turn অবস্থান (GPS)


getCurrentPosition() পদ্ধতি - তথ্য ফেরত বা return

getCurrentPosition() মেথড সফল হলে কতগুলো অবজেক্ট ফিরে আসে। অক্ষাংশ বা latitude, দ্রাঘিমাংশ বা longitude এবং নির্ভুলতার প্রপার্টিগুলো সবসময়ই ফিরে আসে। আরও কিছু প্রপার্টি যদি পাওয়া যায় তবে সেগুলোও ফিরে আসে।

getCurrentPosition() মেথড সফল হলে যেসকল প্রোপার্টি রিটার্ন হয় তার একটি তালিকা নিচে দেখুন।

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


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

Geolocation বা জিওলোকেশন অবজেক্টের আরও কিছু আকর্ষণীয় পদ্ধতি বা method রয়েছে -

watchPosition() - এই মেথডের মাধ্যমে ইউজারের বর্তমান অবস্থান নির্ণয় করা যায় এবং স্থান পরিবর্তন করলে তার আপডেট পাওয়া যায়,
clearWatch() - এর মাধ্যমে watchPosition() মেথডকে স্থগিত রাখা হয়।


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

উদাহরণ

<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<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 +
"
Longitude: " + position.coords.longitude;
}
</script>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.