ডিভাইস অর্থাৎ ওয়েব সাইট বাবহারকারীর অবস্থান জানার জন্য এইচটিএমএল ৫.০ এর জিওলোকেশন এপিআই ব্যবহার করা যায়।
জিওলোকেশন API আমাদের সার্চের পরিপ্রেক্ষিতে মোবাইল ফোন টাওয়ার এবং WIFI নোড গুলো ব্যাবহার করে লোকেশন এবং accuracy radius নির্ভর তথ্য গুলো প্রেরণ করে। এটা আসলে একটা protocol ব্যাবহার করে করা হুয় যেখানে সার্চ সংক্রান্ত তথ্য সার্ভারে প্রেরণ করা হয় এবং তার ফলাফল client বা ব্যাবহারকারীর কাছে ফেরত পাঠায়।
এই তথ্যের আদান-প্রদান গুলো HTTPS এর POST মেথড ব্যাবহার করে করা হয়। এই সমস্ত request এবং response গুলো JSON ব্যাবহার করে করা হয়। এই সবগুলোর জন্য কন্টেন্ট টাইপ হয় application/json.
বাবহারকারীর ভৌগোলিক বা geographical অবস্থান নির্ণয়ের জন্য এইচটিএমএল জিওলোকেশন এপিআই ব্যবহার করা হয়। এর জন্য প্রথমে প্রথমে ইউজারে কাছে অনুমতি চাওয়া হয় যেহেতু এটি একটি গোপনীয় তথ্য, ব্যবহারকারী অনুমতি দিলে কেবল তখনই ভৌগোলিক অবস্থান পাওয়া যায়।
নোট - iphone এর মত GPS সহ ডিভাইস গুলোর জন্য নিখুঁত ভৌগলিক-অবস্থান বা Geolocation খুব গুরুত্বপূর্ণ।
টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে ভৌগলিক-অবস্থান বা 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 + "<br />Longitude: " + position.coords.longitude; } </script>
উপরে উদাহরণটি একটি খুব সাধারন জিওলোশন স্ক্রিপ্ট, এটাতে কোনও error handling এর বাবস্থা নেই। নিচে উদাহরণটির ব্যাখ্যা দেখুন।
দ্বিতীয় প্যারামিটার টি হল 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 + "<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>
ফলাফল ম্যাপে প্রদর্শন করতে হলে, 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 = "<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>
টিউটোরিয়ালের এই অংশে আমরা কোন মানচিত্রে ব্যবহারকারী বা user এর অবস্থান প্রদর্শন করেছি। বাবহারকারীর অবস্থান নির্ভর তথ্যের জন্য ভূ-অবস্থান বা Geolocation খুব উপযোগী, যেমন -
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() মেথড এর ব্যবহার দেখানো হয়েছে।
<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 + "<br />Longitude: " + position.coords.longitude; } </script>
এইচটিএমএল এর Geolocation API সম্পর্কে জানতে W3C এর Geolocation API Specification ওয়েব পেজটি ব্রাউজ করুন।