Geolocation API ব্যবহার করে একটি সাধারণ ট্রিপ মিটার

Michael Mahemoff

ভূমিকা

জিওলোকেশন API-এর সাহায্যে আপনি ব্যবহারকারীর লোকেশন জানতে পারবেন এবং তিনি এক জায়গা থেকে অন্য জায়গায় গেলে তার উপর নজর রাখতে পারবেন, তবে এর জন্য সবসময় ব্যবহারকারীর সম্মতি প্রয়োজন। এই কার্যকারিতা ব্যবহারকারীর কোয়েরির অংশ হিসেবে ব্যবহার করা যেতে পারে, যেমন, কাউকে গন্তব্যে পৌঁছানোর জন্য গাইড করা। ব্যবহারকারীর তৈরি করা কিছু কন্টেন্ট "জিও-ট্যাগ" করার জন্যও এটি ব্যবহার করা হতে পারে, যেমন, কোনও ফটো কোথায় তোলা হয়েছে তা চিহ্নিত করা। API ডিভাইস-অ্যাগনস্টিক; ব্রাউজার কীভাবে লোকেশন নির্ধারণ করে তা নিয়ে এটি মাথা ঘামায় না, যতক্ষণ না ক্লায়েন্ট স্ট্যান্ডার্ড উপায়ে লোকেশন ডেটার অনুরোধ করতে ও তা পেতে পারে। জিপিএস, ওয়াই-ফাই বা ব্যবহারকারীকে ম্যানুয়ালি লোকেশন লিখতে বলার মাধ্যমে এটি করা হতে পারে। যেহেতু এই লুকআপগুলির যেকোনও একটির জন্য কিছুটা সময় লাগবে, তাই API অ্যাসিঙ্ক্রোনাস; আপনি যখনই কোনও লোকেশনের জন্য অনুরোধ করেন তখনই আপনি এটিকে একটি কলব্যাক পদ্ধতি পাস করেন।

এখানে উদাহরণ হিসেবে একটি ট্রিপ মিটার দেখানো হয়েছে যা প্রাথমিক লোকেশন দেখায় এবং পৃষ্ঠা লোড হওয়ার পর থেকে কতটা দূরত্ব অতিক্রম করা হয়েছে তা ডিসপ্লেতে দেখায়।

ধাপ ১. মানানসই কিনা চেক করুন

Browser Support

• 5
• 12
• 3.5
• 5

Source

আপনি সহজেই জিওলোকেশন অবজেক্টের উপস্থিতি পরীক্ষা করে কম্প্যাটিবিলিটি চেক করতে পারেন:

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

ধাপ ২. ট্রিপ মিটার HTML ঘোষণা করুন

এই উদাহরণে, আপনি একটি ট্রিপ মিটার তৈরি করছেন, তাই নিম্নলিখিত HTML ঘোষণা করুন:

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

পরবর্তী কয়েকটি ধাপে Geolocation API ব্যবহার করে খালি স্প্যানগুলি পূরণ করা হবে।

ধাপ ৩. ব্যবহারকারীর বর্তমান লোকেশন নির্ধারণ করা

getCurrentPosition() ব্যবহারকারীর বর্তমান লোকেশন সম্পর্কে অ্যাসিঙ্ক্রোনাসভাবে রিপোর্ট করবে। পৃষ্ঠা লোড হওয়ার সাথে সাথেই এটি কল করুন, যাতে এটি সঠিকভাবে পপুলেট হয় - এবং পরে ব্যবহারের জন্য সেভ করুন - শুরুর পজিশন:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

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

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

ধাপ ৪। সমস্যা ম্যানেজ করা

সব লোকেশন লুকআপ সফল হয়নি। হয়ত জিপিএস লোকেশন পাওয়া যায়নি অথবা ব্যবহারকারী হঠাৎ লোকেশন লুকআপ বন্ধ করে দিয়েছেন। getCurrentPosition()-এর জন্য দ্বিতীয়, ঐচ্ছিক, আর্গুমেন্ট কোনও সমস্যা হলে কল করা হবে, যাতে আপনি কলব্যাকের মধ্যে ব্যবহারকারীকে জানাতে পারেন:

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

ধাপ ৫. ব্যবহারকারীর লোকেশন মনিটর করা

getCurrentPosition()-এ আগের কলটি পৃষ্ঠা লোড হওয়ার সময় শুধুমাত্র একবার কার্যকর করা হয়েছিল। পরিবর্তন ট্র্যাক করতে, watchPosition() ব্যবহার করুন। ব্যবহারকারী যখনই নড়াচড়া করবেন তখনই এটি অটোমেটিক একটি কলব্যাক ফাংশনকে বিজ্ঞপ্তি পাঠাবে:

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

ধাপ ৬. কতটা দূরত্ব অতিক্রম করা হয়েছে তা দেখান

এই ধাপটি সরাসরি Geolocation API-এর সাথে সম্পর্কিত নয়, তবে ডেমোটি সম্পূর্ণ করে এবং আপনি কীভাবে লোকেশন ডেটা ব্যবহার করতে পারেন তার একটি উদাহরণ প্রদান করে। অতিক্রম করা দূরত্ব পূরণ করতে watchPosition() হ্যান্ডলারে একটি অতিরিক্ত লাইন যোগ করুন:

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

calculateDistance() ফাংশন দুটি কো-অর্ডিনেটের মধ্যে দূরত্ব নির্ধারণ করতে জ্যামিতিক অ্যালগরিদম সম্পাদন করে। Javascript প্রয়োগের পদ্ধতি Moveable Type-এর প্রদান করা স্ক্রিপ্ট থেকে নেওয়া হয়েছে যা Creative Commons লাইসেন্স-এর অধীনে:

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}