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