LeafletJS তে Current Location বা ব্যবহারকারীর অবস্থান ম্যাপে প্রদর্শন করা খুবই সহজ। Geolocation API ব্যবহার করে আপনি ব্যবহারকারীর বর্তমান অবস্থান নির্ধারণ করতে পারেন এবং সেই অবস্থানটি ম্যাপে মার্কার বা পপ-আপের মাধ্যমে দেখাতে পারেন। এটি বিভিন্ন ম্যাপিং অ্যাপ্লিকেশনের জন্য খুবই কার্যকরী, যেমন নেভিগেশন সিস্টেম, সঠিক অবস্থান নির্ধারণ, এবং ভ্রমণ নির্দেশনা প্রদান।
১. Geolocation API ব্যবহার করা
Geolocation API ব্যবহার করে আপনি ব্যবহারকারীর বর্তমান অবস্থান (latitude, longitude) পেতে পারেন। LeafletJS এর সাথে এটি সংযুক্ত করে আপনি সহজেই ব্যবহারকারীর অবস্থান ম্যাপে দেখাতে পারবেন।
উদাহরণ: Current Location প্রদর্শন করা
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// ব্রাউজারের Geolocation API ব্যবহার করে বর্তমান অবস্থান নির্ধারণ
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude; // latitude
var lon = position.coords.longitude; // longitude
// অবস্থান ম্যাপে মার্কার হিসেবে যোগ করা
var marker = L.marker([lat, lon]).addTo(map);
marker.bindPopup("Your current location").openPopup();
// ম্যাপের ভিউ সেট করা
map.setView([lat, lon], 13);
});
} else {
alert("Geolocation is not supported by this browser.");
}
এখানে:
- navigator.geolocation.getCurrentPosition() ফাংশনটি ব্যবহার করে আমরা ব্যবহারকারীর বর্তমান অবস্থান (latitude, longitude) পেয়ে যাই।
- L.marker() ফাংশনটি দিয়ে ব্যবহারকারীর অবস্থানে একটি মার্কার তৈরি করা হয়।
- map.setView() ফাংশনটি ম্যাপের কেন্দ্র ব্যবহারকারীর অবস্থান অনুযায়ী সেট করা হয়।
২. Current Location এর স্টাইল কাস্টমাইজ করা
আপনি current location মার্কারের স্টাইল কাস্টমাইজ করতে পারেন, যেমন রঙ, আকার ইত্যাদি।
উদাহরণ: Current Location এর মার্কার কাস্টমাইজ করা
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// ব্রাউজারের Geolocation API ব্যবহার করে বর্তমান অবস্থান নির্ধারণ
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// কাস্টম স্টাইল সহ মার্কার তৈরি করা
var customIcon = L.icon({
iconUrl: 'https://example.com/custom-icon.png', // কাস্টম আইকন
iconSize: [32, 32], // আইকনের আকার
iconAnchor: [16, 32], // আইকনের অবস্থান
popupAnchor: [0, -32] // পপ-আপ অবস্থান
});
var marker = L.marker([lat, lon], { icon: customIcon }).addTo(map);
marker.bindPopup("You are here").openPopup();
map.setView([lat, lon], 13);
});
} else {
alert("Geolocation is not supported by this browser.");
}
এখানে:
- L.icon() ফাংশনটি ব্যবহার করে একটি কাস্টম মার্কার আইকন তৈরি করা হয়েছে।
- iconUrl: আইকনের URL নির্ধারণ করে।
- iconSize: আইকনের আকার নির্ধারণ করে।
- iconAnchor: আইকনের অবস্থান কাস্টমাইজ করা হয়।
৩. Current Location Tracking
আপনি যদি ব্যবহারকারীর অবস্থান ট্র্যাক করতে চান, তাহলে watchPosition() ব্যবহার করে তার গতিবিধি ট্র্যাক করা সম্ভব। এটি ব্যবহারকারীর অবস্থান পরিবর্তন হলে ম্যাপটি স্বয়ংক্রিয়ভাবে আপডেট করবে।
উদাহরণ: Current Location Tracking
// ম্যাপ তৈরি
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// ট্র্যাকিং ফাংশন
function trackPosition(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
// ট্র্যাকিং মার্কার তৈরি করা
var marker = L.marker([lat, lon]).addTo(map);
marker.bindPopup("Your current location").openPopup();
// ম্যাপের ভিউ আপডেট করা
map.setView([lat, lon], 13);
}
// ব্রাউজারের Geolocation API ব্যবহার করে অবস্থান ট্র্যাক করা
if (navigator.geolocation) {
navigator.geolocation.watchPosition(trackPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
এখানে:
- navigator.geolocation.watchPosition() ব্যবহার করে ব্যবহারকারীর অবস্থান পরিবর্তনের সময় তা ট্র্যাক করা হচ্ছে এবং trackPosition() ফাংশনটি নতুন অবস্থান অনুযায়ী মার্কার এবং ম্যাপ আপডেট করে।
৪. Current Location Error Handling
কখনও কখনও ব্যবহারকারীর ব্রাউজারে Geolocation API সমর্থিত নাও হতে পারে বা অন্যান্য সমস্যা হতে পারে। এ ক্ষেত্রে, আপনাকে ত্রুটি হ্যান্ডলিং করতে হবে।
উদাহরণ: Geolocation API Error Handling
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var marker = L.marker([lat, lon]).addTo(map);
marker.bindPopup("You are here").openPopup();
map.setView([lat, lon], 13);
}, function(error) {
alert("Error occurred: " + error.message);
});
} else {
alert("Geolocation is not supported by this browser.");
}
এখানে:
- দ্বিতীয় ফাংশন error ব্যবহার করে যদি কোন ত্রুটি ঘটে তবে তার বার্তা alert দিয়ে প্রদর্শন করা হয়।
সারাংশ
LeafletJS ব্যবহার করে Geolocation API এর মাধ্যমে ব্যবহারকারীর Current Location সহজে প্রদর্শন করা সম্ভব। আপনি marker, popup, এবং trackPosition ফাংশন ব্যবহার করে তার অবস্থান ম্যাপে দেখাতে পারেন এবং অবস্থান পরিবর্তনের সময়ও তা ট্র্যাক করতে পারেন। এভাবে ব্যবহারকারীর অবস্থান বা গতিবিধি নির্ধারণ এবং ম্যাপে দেখানো যায়।
Read more
