LeafletJS এর মাধ্যমে ইন্টারেক্টিভ ম্যাপ তৈরি করা খুবই সহজ এবং দ্রুত। এর জন্য কিছু মৌলিক স্টেপ অনুসরণ করতে হয়। এখানে আমরা একটি সহজ ম্যাপ তৈরির প্রক্রিয়া দেখব।
প্রাথমিক প্রস্তুতি
প্রথমে, LeafletJS লাইব্রেরিটি ওয়েব পেজে অন্তর্ভুক্ত করতে হবে। এটি দুটি উপায়ে করা যায়:
- CDN (Content Delivery Network) ব্যবহার করে
- লাইব্রেরিটি ডাউনলোড করে
CDN ব্যবহার করে LeafletJS অন্তর্ভুক্ত করা
এটি সবচেয়ে সহজ এবং দ্রুততম পদ্ধতি। শুধু HTML ফাইলে নিচের কোডটি যুক্ত করুন:
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
ম্যাপ তৈরি করার জন্য কোড
HTML ফাইল
এখন, আপনার HTML ফাইলে একটি <div> ট্যাগ তৈরি করুন যেখানে ম্যাপটি প্রদর্শিত হবে। এটি সাধারণত id="map" থাকে:
<div id="map" style="width: 600px; height: 400px;"></div>
এখানে width এবং height দিয়ে ম্যাপের আকার নির্ধারণ করা হবে। আপনি এগুলো আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন।
JavaScript কোড
এখন JavaScript কোড ব্যবহার করে ম্যাপটি তৈরি করা হবে:
<script>
// ম্যাপ তৈরি করা
var map = L.map('map').setView([51.505, -0.09], 13); // [latitude, longitude] এবং zoom level
// 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);
// একটি মার্কার যুক্ত করা
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
</script>
এই কোডে:
L.map(): ম্যাপ তৈরি করার জন্য ব্যবহৃত হয়, যেখানে প্রথম প্যারামিটার হচ্ছে ম্যাপের ডিভেরid(এখানেmap) এবং দ্বিতীয় প্যারামিটার হচ্ছে ম্যাপের latitude, longitude এবং zoom level।L.tileLayer(): ম্যাপের জন্য টাইল লেয়ার যোগ করা হয়। এখানে OpenStreetMap এর টাইলস ব্যবহার করা হয়েছে, তবে আপনি অন্য যেকোনো ম্যাপ সার্ভিস ব্যবহার করতে পারেন।L.marker(): ম্যাপে একটি মার্কার তৈরি করে এবং তা নির্দিষ্ট কোঅরডিনেটে (latitude, longitude) স্থাপন করে।bindPopup(): মার্কারের উপর ক্লিক করলে একটি পপ-আপ উইন্ডো প্রদর্শিত হবে।
পর্যালোচনা
এখন, আপনার HTML ফাইলটি ব্রাউজারে চালু করলে একটি ইন্টারেক্টিভ ম্যাপ প্রদর্শিত হবে, যেখানে একটি মার্কার থাকবে এবং পপ-আপ উইন্ডোটি দেখতে পাবেন।
এভাবে, LeafletJS ব্যবহার করে খুব সহজেই ওয়েব পেজে ইন্টারেক্টিভ ম্যাপ তৈরি করা সম্ভব। এটি আরও বিভিন্ন ফিচার যেমন লাইন, পলিগন, এবং বিভিন্ন ধরনের মার্কার যোগ করার জন্য এক্সটেনশন সাপোর্ট করে।
Read more
