LeafletJS ব্যবহার করে প্রথম মানচিত্র তৈরি করা খুবই সহজ এবং সরল প্রক্রিয়া। এই টিউটোরিয়ালে আমরা দেখব কীভাবে একটি বেসিক মানচিত্র তৈরি করতে হয় এবং কিভাবে সেটি ওয়েবপেজে এম্বেড করা যায়।
পদক্ষেপ ১: LeafletJS অন্তর্ভুক্ত করা
প্রথমে, আপনাকে LeafletJS লাইব্রেরিটি আপনার HTML ফাইলে অন্তর্ভুক্ত করতে হবে। আপনি দুইটি পদ্ধতিতে এটি করতে পারেন: সিডিএন (CDN) বা লোকাল ফাইল ব্যবহার করে।
CDN ব্যবহার করে LeafletJS অন্তর্ভুক্ত করা:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS মানচিত্র</title>
<!-- LeafletJS এর CSS অন্তর্ভুক্ত করা -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<!-- মানচিত্রের জন্য ডিভ -->
<div id="map" style="height: 500px;"></div>
<!-- LeafletJS এর জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করা -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<!-- মানচিত্র তৈরির জন্য স্ক্রিপ্ট -->
<script>
var map = L.map('map').setView([23.8103, 90.4125], 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);
// একটি মার্কার যোগ করা
L.marker([23.8103, 90.4125]).addTo(map)
.bindPopup('এটি ঢাকা শহর!')
.openPopup();
</script>
</body>
</html>
পদক্ষেপ ২: মানচিত্রের এলাকা চিহ্নিত করা
উপরের কোডে আমরা একটি মানচিত্র তৈরি করেছি, যার কেন্দ্রবিন্দু ঢাকা শহরের অক্ষাংশ এবং দ্রাঘিমাংশ (latitude, longitude) সেট করা হয়েছে। এছাড়া, L.tileLayer() ফাংশনটি OpenStreetMap এর টাইল লেয়ার ব্যবহার করে মানচিত্রের ভিউ যোগ করে এবং L.marker() ফাংশনটি একটি মার্কার (Pin) যোগ করে, যা ঢাকা শহরের অবস্থান নির্দেশ করে।
পদক্ষেপ ৩: জুম লেভেল ও মার্কার কনফিগারেশন
- জুম লেভেল:
setView()ফাংশনের দ্বিতীয় আর্গুমেন্টটি হলো মানচিত্রের জুম লেভেল। এর মান ১ থেকে ১৮ পর্যন্ত হতে পারে, যেখানে ১ হচ্ছে সবচেয়ে বড় আউটজুম এবং ১৮ হচ্ছে সবচেয়ে ডিটেইলড ইনজুম। - মার্কার পপ-আপ:
bindPopup()ফাংশনটি একটি পপ-আপ উইন্ডো যোগ করে, যা মানচিত্রের উপর ক্লিক করলে প্রদর্শিত হয়।
মানচিত্র কাস্টমাইজ করা
LeafletJS আপনার মানচিত্রকে কাস্টমাইজ করার জন্য অনেক সুযোগ প্রদান করে, যেমন:
- লেয়ার কন্ট্রোল: বিভিন্ন ধরনের লেয়ার যেমন স্যাটেলাইট, থিম্যাটিক ম্যাপ ইত্যাদি যোগ করা।
- ইন্টারঅ্যাকটিভ মার্কার: মার্কারগুলির সাথে আরও কাস্টম ইন্টারঅ্যাকশন যোগ করা, যেমন ড্র্যাগ বা ড্রপ।
এইভাবে আপনি খুব সহজেই LeafletJS ব্যবহার করে একটি বেসিক ইন্টারেক্টিভ মানচিত্র তৈরি করতে পারেন।
Read more
