LeafletJS-এর মাধ্যমে Multiple Waypoints এবং Alternative Routes তৈরি করা সম্ভব, যা ব্যবহারকারীদের জন্য বিভিন্ন রুট নির্ধারণ করার সুবিধা প্রদান করে। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি একটি ম্যাপে বিভিন্ন গন্তব্য (waypoints) বা রুটের মধ্যে পার্থক্য দেখাতে চান। এই ফিচারের মাধ্যমে আপনি একটি সঠিক এবং কার্যকর রুট নেভিগেশন তৈরি করতে পারেন।
১. Multiple Waypoints
Multiple Waypoints এর মাধ্যমে আপনি একাধিক গন্তব্যের মধ্যে একটি রুট চিহ্নিত করতে পারেন। এটি সাধারণত রুটের মধ্যে একাধিক স্টপ পয়েন্টের মাধ্যমে নেভিগেশন তৈরি করার জন্য ব্যবহৃত হয়।
LeafletJS-এ একাধিক Waypoints যোগ করার জন্য, আমরা Leaflet Routing Machine প্লাগইন ব্যবহার করি। এই প্লাগইনটি ব্যবহার করে আপনি Multiple Waypoints সহ রুট তৈরি করতে পারবেন।
১.১. Multiple Waypoints এর উদাহরণ
প্রথমে, আপনাকে Leaflet Routing Machine প্লাগইন ইনস্টল করতে হবে।
<!-- LeafletJS এবং Leaflet Routing Machine CDN -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
কোড উদাহরণ:
// ম্যাপ তৈরি করা
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap টাইল লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Multiple Waypoints সহ রুট তৈরি করা
var routeControl = L.Routing.control({
waypoints: [
L.latLng(51.505, -0.09), // প্রথম গন্তব্য
L.latLng(51.515, -0.1), // দ্বিতীয় গন্তব্য
L.latLng(51.525, -0.12) // তৃতীয় গন্তব্য
],
routeWhileDragging: true // রুট ড্র্যাগ করার সময় লাইভ রুট আপডেট
}).addTo(map);
এখানে:
- waypoints অ্যারে এর মধ্যে একাধিক গন্তব্য যোগ করা হয়েছে।
- routeWhileDragging অপশনটি দ্বারা ব্যবহারকারী যখন রুটের উপর ক্লিক করে ড্র্যাগ করবেন, তখন রুটটি লাইভ আপডেট হবে।
২. Alternative Routes
Alternative Routes এর মাধ্যমে আপনি একাধিক রুট প্রদর্শন করতে পারেন, যাতে ব্যবহারকারী বিভিন্ন রুটের মধ্যে নির্বাচন করতে পারেন। Leaflet Routing Machine প্লাগইনটি একাধিক রুট খোঁজার জন্য Alternative Routes সরবরাহ করে।
২.১. Alternative Routes এর উদাহরণ
কোড উদাহরণ:
// ম্যাপ তৈরি করা
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap টাইল লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Multiple Waypoints সহ Alternative Routes খোঁজার জন্য রুট কন্ট্রোল তৈরি করা
var routeControl = L.Routing.control({
waypoints: [
L.latLng(51.505, -0.09), // প্রথম গন্তব্য
L.latLng(51.515, -0.1), // দ্বিতীয় গন্তব্য
L.latLng(51.525, -0.12) // তৃতীয় গন্তব্য
],
routeWhileDragging: true, // লাইভ রুট আপডেট
alternativeRoutes: true // Alternative Routes খোঁজা
}).addTo(map);
এখানে:
- alternativeRoutes অপশনটি true সেট করে দেওয়া হয়েছে, যা একাধিক রুট প্রদান করবে। ব্যবহারকারী যে রুটটি পছন্দ করবেন, সেটি ম্যাপে প্রদর্শিত হবে।
৩. Waypoints এবং Alternative Routes কাস্টমাইজেশন
আপনি Waypoints এবং Alternative Routes কাস্টমাইজ করতে পারেন যেমন:
- রুটের স্টাইল (রঙ, পুরুত্ব, প্রস্থ)
- বিভিন্ন রুটের জন্য ভিন্ন ভিন্ন অপশন যেমন উচ্চতা, দূরত্ব ইত্যাদি
- কাস্টম লোগো এবং পপ-আপ যোগ করা
উদাহরণ: কাস্টম রুট স্টাইল
var routeControl = L.Routing.control({
waypoints: [
L.latLng(51.505, -0.09),
L.latLng(51.515, -0.1)
],
createMarker: function() { return null; }, // মার্কার তৈরি না করা
lineOptions: { // রুটের স্টাইল কাস্টমাইজ করা
styles: [{color: 'blue', weight: 5}]
},
routeWhileDragging: true
}).addTo(map);
এখানে:
- createMarker ফাংশনটি ব্যবহার করে মার্কার তৈরি বন্ধ করা হয়েছে।
- lineOptions.styles দ্বারা রুটের রঙ এবং পুরুত্ব কাস্টমাইজ করা হয়েছে।
সারাংশ
LeafletJS ব্যবহার করে Multiple Waypoints এবং Alternative Routes তৈরি করা অত্যন্ত সহজ। Leaflet Routing Machine প্লাগইন ব্যবহার করে আপনি একাধিক গন্তব্যের মধ্যে রুট তৈরি করতে পারেন এবং ব্যবহারকারীদের জন্য একাধিক রুট দেখানোর সুযোগ তৈরি করতে পারেন। এটি ম্যাপিং অ্যাপ্লিকেশনগুলির জন্য একটি অত্যন্ত কার্যকরী ফিচার, যা বিভিন্ন রুট নেভিগেশন এবং ব্যবহারকারী ইন্টারঅ্যাকশনের সুবিধা প্রদান করে।
Read more
