LeafletJS একটি শক্তিশালী ম্যাপিং লাইব্রেরি, যা Geo-spatial data প্রদর্শন এবং বিশ্লেষণের জন্য ব্যবহৃত হয়। আপনি driving, walking, এবং cycling রুট তৈরি করতে LeafletJS-এ বিভিন্ন লাইব্রেরি এবং টুল ব্যবহার করতে পারেন, যেমন Leaflet Routing Machine। এটি ব্যবহারের মাধ্যমে আপনি সহজেই রুট নেভিগেশন এবং ডিরেকশন ফিচার অ্যাড করতে পারেন।
এই গাইডে, আমরা দেখব কীভাবে LeafletJS এবং Leaflet Routing Machine ব্যবহার করে ড্রাইভিং, ওয়াকিং, এবং সাইক্লিং রুট তৈরি করা যায়।
১. Leaflet Routing Machine
Leaflet Routing Machine হল একটি LeafletJS প্লাগইন যা রুট তৈরি করার জন্য ব্যবহৃত হয়। এটি আপনাকে রুটের শুরু এবং শেষ পয়েন্টের মধ্যে ড্রাইভিং, ওয়াকিং, এবং সাইক্লিং রুট তৈরি করার সুযোগ দেয়।
১.১. Leaflet Routing Machine ইনস্টলেশন
Leaflet Routing Machine ব্যবহার করতে প্রথমে এই প্লাগইনটি আপনার প্রোজেক্টে অন্তর্ভুক্ত করতে হবে। আপনি CDN বা লোকাল ফাইল ব্যবহার করে এটি যুক্ত করতে পারেন।
CDN এর মাধ্যমে যোগ করা:
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
২. Drivng, Walking, এবং Cycling Routes তৈরি করা
আমরা এখন একটি সাধারণ ম্যাপ তৈরি করে, তাতে driving, walking, এবং cycling রুট যুক্ত করব।
২.১. GeoLocation এবং Map Setup
প্রথমে, একটি সাধারণ LeafletJS ম্যাপ সেটআপ করা হবে এবং রুটের পয়েন্ট নির্ধারণ করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Routing Example</title>
<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" />
</head>
<body>
<div id="map" style="height: 500px;"></div>
<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>
<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);
</script>
</body>
</html>
২.২. Driving Route তৈরি করা
Leaflet Routing Machine ব্যবহার করে একটি ড্রাইভিং রুট তৈরি করা হবে।
// ড্রাইভিং রুট তৈরি
var routeControl = L.Routing.control({
waypoints: [
L.latLng(51.505, -0.09), // Starting point
L.latLng(51.515, -0.1) // Destination point
],
routeWhileDragging: true, // রুটটি টেনে আনলে আপডেট হবে
createMarker: function() { return null; }, // মার্কার এড়ানো
geocoder: L.Control.Geocoder.nominatim() // ঠিকানা অনুসন্ধান
}).addTo(map);
এখানে, L.Routing.control() ব্যবহার করে দুইটি পয়েন্ট (স্টার্ট এবং ডেস্টিনেশন) দিয়ে একটি ড্রাইভিং রুট তৈরি করা হয়েছে।
২.৩. Walking Route তৈরি করা
Walking Route তৈরি করতে profile অপশনের মাধ্যমে ওয়াকিং পাথ নির্ধারণ করা যাবে।
// ওয়াকিং রুট তৈরি
var walkingRoute = L.Routing.control({
waypoints: [
L.latLng(51.505, -0.09), // Starting point
L.latLng(51.515, -0.1) // Destination point
],
routeWhileDragging: true,
createMarker: function() { return null; },
profile: 'foot', // Walking path (foot)
}).addTo(map);
এখানে profile: 'foot' দ্বারা ওয়াকিং রুট নির্ধারণ করা হয়েছে।
২.৪. Cycling Route তৈরি করা
Cycling Route তৈরি করতে profile অপশনের মাধ্যমে সাইক্লিং রুট নির্ধারণ করা হয়।
// সাইক্লিং রুট তৈরি
var cyclingRoute = L.Routing.control({
waypoints: [
L.latLng(51.505, -0.09), // Starting point
L.latLng(51.515, -0.1) // Destination point
],
routeWhileDragging: true,
createMarker: function() { return null; },
profile: 'cycling' // Cycling path
}).addTo(map);
এখানে profile: 'cycling' ব্যবহার করে সাইক্লিং রুট তৈরি করা হয়েছে।
৩. সব রুট একসাথে প্রদর্শন করা
এখন, সব রুট একসাথে দেখানোর জন্য আপনি leaflet-control যোগ করতে পারেন যাতে ব্যবহারকারী সহজেই ড্রাইভিং, ওয়াকিং, এবং সাইক্লিং রুট পরিবর্তন করতে পারেন।
উদাহরণ: রুট সুইচিং কন্ট্রোল
var control = L.control.layers({}, {
"Driving Route": routeControl,
"Walking Route": walkingRoute,
"Cycling Route": cyclingRoute
}).addTo(map);
এখানে:
- L.control.layers() ব্যবহার করে আপনি কন্ট্রোল যোগ করেছেন, যা ব্যবহারকারীকে রুট নির্বাচন করার সুযোগ দেয়।
সারাংশ
LeafletJS এর মাধ্যমে Leaflet Routing Machine প্লাগইন ব্যবহার করে আপনি Driving, Walking, এবং Cycling Routes তৈরি করতে পারেন। এটি আপনাকে একটি ইন্টারঅ্যাকটিভ ম্যাপের উপর রুট তৈরি এবং দেখানোর সুযোগ দেয়, যা ব্যবহারকারীদের জন্য অত্যন্ত কার্যকরী হতে পারে। আপনি profile অপশন ব্যবহার করে বিভিন্ন ধরনের রুট (যেমন ড্রাইভিং, ওয়াকিং, সাইক্লিং) কাস্টমাইজ করতে পারেন এবং Layer control এর মাধ্যমে একাধিক রুট সুইচ করতে পারেন।
Read more
