LeafletJS সেটআপ করা খুবই সহজ এবং আপনি এটি আপনার লোকাল (local) ডেভেলপমেন্ট পরিবেশে খুব সহজে সেটআপ করতে পারেন। এই প্রক্রিয়ায় আপনার ওয়েবসাইটে ইন্টারেক্টিভ ম্যাপ ব্যবহার করার জন্য প্রাথমিকভাবে যা যা প্রয়োজন তা বিশদভাবে ব্যাখ্যা করা হবে।
প্রয়োজনীয় উপকরণ
- একটি টেক্সট এডিটর (যেমন: Visual Studio Code, Sublime Text)
- ওয়েব ব্রাউজার (যেমন: Chrome, Firefox)
- ইন্টারনেট সংযোগ (প্রাথমিকভাবে CDN ব্যবহার করতে হবে)
১. HTML ফাইলে LeafletJS লাইব্রেরি যুক্ত করা
প্রথমে, আপনার HTML ফাইলে LeafletJS লাইব্রেরি অন্তর্ভুক্ত করতে হবে। আপনি এটি CDN (Content Delivery Network) ব্যবহার করে সহজেই যুক্ত করতে পারেন। নিচের কোডটি আপনার HTML ফাইলে <head> অংশে যুক্ত করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafletJS Map</title>
<!-- LeafletJS CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<!-- HTML কোড যেখানে ম্যাপটি থাকবে -->
<div id="map" style="height: 500px;"></div>
<!-- LeafletJS JS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.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);
// একটি মার্কার যোগ করা
var marker = L.marker([51.5, -0.09]).addTo(map);
// মার্কারে পপ-আপ যোগ করা
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
</script>
</body>
</html>
এই কোডে:
- Leaflet CSS এবং Leaflet JS এর CDN লিঙ্ক দেওয়া হয়েছে।
- HTML এ একটি
divএলিমেন্ট (id="map") রয়েছে, যেখানে ম্যাপটি প্রদর্শিত হবে। - JavaScript কোডে, একটি
L.map()ফাংশন ব্যবহার করে ম্যাপ তৈরি করা হয়েছে এবং তারপরে একটি টাইল লেয়ার যোগ করা হয়েছে, যেটি OpenStreetMap থেকে এসেছে। L.marker()ব্যবহার করে একটি মার্কার যোগ করা হয়েছে, এবং সেই মার্কারে একটি পপ-আপ যুক্ত করা হয়েছে।
২. লোকাল LeafletJS ফাইল ডাউনলোড করা
আপনি চাইলে LeafletJS ফাইলগুলো আপনার লোকাল মেশিনেও ডাউনলোড করতে পারেন, এর জন্য:
- LeafletJS অফিসিয়াল ওয়েবসাইট থেকে লাইব্রেরির নতুন ভার্সন ডাউনলোড করুন।
- ডাউনলোড করা ফোল্ডার থেকে
leaflet.cssএবংleaflet.jsফাইলগুলো আপনার প্রজেক্টের ফোল্ডারে কপি করুন। - HTML ফাইলে সেগুলো রেফারেন্স করুন, যেমন:
<link rel="stylesheet" href="path/to/leaflet.css" />
<script src="path/to/leaflet.js"></script>
এভাবে আপনি লোকাল মেশিনে LeafletJS ব্যবহার করতে পারবেন।
৩. ম্যাপ এবং মার্কারের কাস্টমাইজেশন
LeafletJS আপনাকে ম্যাপ এবং মার্কার কাস্টমাইজ করার অনেক সুবিধা দেয়। আপনি বিভিন্ন ধরনের টাইল লেয়ার (যেমন, OpenStreetMap, Google Maps, বা Esri) ব্যবহার করতে পারেন এবং মার্কারের রঙ, আকার ইত্যাদি পরিবর্তন করতে পারবেন। উদাহরণস্বরূপ:
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19,
minZoom: 10
}).addTo(map);
এখানে আপনি maxZoom এবং minZoom এর মান নির্ধারণ করতে পারবেন, যা ম্যাপের জুম লেভেল কন্ট্রোল করবে।
৪. ম্যাপের পরবর্তী কাস্টমাইজেশন
যেহেতু LeafletJS খুবই ফ্লেক্সিবল, আপনি আরও উন্নত ফিচার যেমন, পলিগন, লাইন, সার্ভে টুলস ইত্যাদি যোগ করতে পারবেন। এটি আপনাকে একটি পূর্ণাঙ্গ ম্যাপিং অ্যাপ্লিকেশন তৈরি করতে সাহায্য করবে।
LeafletJS সেটআপ করা সহজ এবং দ্রুত। উপরের ধাপগুলো অনুসরণ করে আপনি আপনার লোকাল ডেভেলপমেন্ট পরিবেশে ইন্টারেক্টিভ ম্যাপ তৈরি করতে শুরু করতে পারবেন।
Read more
