ভূমিকা
জিওলোকেশন এপিআই আপনাকে ব্যবহারকারী কোথায় আছে তা খুঁজে বের করতে দেয় এবং সবসময় ব্যবহারকারীর সম্মতি নিয়ে তারা ঘুরতে যাওয়ার সময় তাদের উপর ট্যাব রাখতে দেয়। এই কার্যকারিতা ব্যবহারকারীর প্রশ্নের অংশ হিসাবে ব্যবহার করা যেতে পারে, যেমন কাউকে গন্তব্য বিন্দুতে গাইড করতে। এটি ব্যবহারকারীর তৈরি কিছু বিষয়বস্তু "জিও-ট্যাগিং" এর জন্যও ব্যবহার করা যেতে পারে, যেমন একটি ছবি কোথায় তোলা হয়েছে তা চিহ্নিত করতে৷ API ডিভাইস-অজ্ঞেয়বাদী; ব্রাউজার কীভাবে অবস্থান নির্ধারণ করে তা বিবেচনা করে না, যতক্ষণ না ক্লায়েন্টরা একটি আদর্শ উপায়ে অবস্থানের ডেটা অনুরোধ করতে এবং গ্রহণ করতে পারে। অন্তর্নিহিত প্রক্রিয়াটি জিপিএস, ওয়াইফাই এর মাধ্যমে হতে পারে বা ব্যবহারকারীকে ম্যানুয়ালি তাদের অবস্থান লিখতে বলা হতে পারে। যেহেতু এই লুকআপগুলির মধ্যে যেকোনও কিছু সময় লাগবে, তাই এপিআই অ্যাসিঙ্ক্রোনাস; আপনি যখনই একটি অবস্থানের অনুরোধ করেন তখন আপনি এটি একটি কলব্যাক পদ্ধতি পাস করেন।
এখানে উদাহরণ হল একটি ট্রিপ মিটার যা প্রাথমিক অবস্থান দেখায় এবং পৃষ্ঠাটি লোড হওয়ার পর থেকে তারা যে দূরত্ব অতিক্রম করেছে তার একটি প্রদর্শন বজায় রাখে।
ধাপ 1. সামঞ্জস্যের জন্য পরীক্ষা করুন
আপনি জিওলোকেশন অবজেক্টের উপস্থিতি পরীক্ষা করে সহজেই সামঞ্জস্যের জন্য পরীক্ষা করতে পারেন:
// 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.');
}
ধাপ 2. ট্রিপ মিটার 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>
পরবর্তী কয়েকটি ধাপে সেই সমস্ত খালি স্প্যানগুলি পূরণ করতে জিওলোকেশন API ব্যবহার করা হবে।
ধাপ 3. ব্যবহারকারীর বর্তমান অবস্থান নির্ধারণ করুন
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;
});
};
যদি এই প্রথমবার এই ডোমেনে কোনো অ্যাপ্লিকেশন অনুমতির জন্য অনুরোধ করে থাকে, তাহলে ব্রাউজারটি সাধারণত ব্যবহারকারীর সম্মতির জন্য পরীক্ষা করবে। ব্রাউজারের উপর নির্ভর করে, অনুমতি লুকআপগুলিকে সর্বদা অনুমতি দেওয়ার - বা অনুমোদন না করার - পছন্দগুলিও থাকতে পারে, এই ক্ষেত্রে নিশ্চিতকরণ প্রক্রিয়াটি বাইপাস করা হবে৷
এই কোডটি চালানোর পরে, আপনি এখন শুরুর অবস্থান দেখতে সক্ষম হবেন। আপনার ব্রাউজার যে লোকেশন ডিভাইসটি ব্যবহার করছে তার উপর নির্ভর করে, অবস্থান বস্তুটিতে আসলে অক্ষাংশ এবং দ্রাঘিমাংশের চেয়ে অনেক বেশি কিছু থাকতে পারে, যেমন এটি একটি উচ্চতা বা একটি দিক অন্তর্ভুক্ত করতে পারে। আপনি কনসোলে অবস্থান পরিবর্তনশীল লগ ইন করে আরও অন্বেষণ করতে পারেন।
ধাপ 4. ত্রুটি হ্যান্ডেল
দুর্ভাগ্যবশত, সব লোকেশন লুকআপ সফল হয় না। সম্ভবত একটি জিপিএস সনাক্ত করা যায়নি বা ব্যবহারকারী হঠাৎ লোকেশন লুকআপ অক্ষম করেছেন৷ একটি সেকেন্ড, ঐচ্ছিক, 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
});
};
ধাপ 5. ব্যবহারকারীর অবস্থান নিরীক্ষণ করুন
getCurrentPosition() এর আগের কলটি পৃষ্ঠা লোডের সময় শুধুমাত্র একবার কার্যকর করা হয়েছিল। পরিবর্তনগুলি ট্র্যাক করতে, watchPosition() ব্যবহার করুন। যখনই ব্যবহারকারী সরে যাবে তখন এটি স্বয়ংক্রিয়ভাবে একটি কলব্যাক ফাংশনকে অবহিত করবে:
navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});
ধাপ 6. ভ্রমণ করা দূরত্ব দেখান
এই ধাপটি সরাসরি ভূ-অবস্থান 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() ফাংশন দুটি কো-অর্ডিনেটের মধ্যে দূরত্ব নির্ধারণ করতে একটি জ্যামিতিক অ্যালগরিদম সম্পাদন করে। জাভাস্ক্রিপ্ট বাস্তবায়ন ক্রিয়েটিভ কমন্স লাইসেন্সের অধীনে মুভযোগ্য টাইপ দ্বারা প্রদত্ত একটি স্ক্রিপ্ট থেকে অভিযোজিত হয়েছে:
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;
}