LeafletJS এর মাধ্যমে আপনি ম্যাপের কেন্দ্র কাস্টমাইজ করতে পারেন, অর্থাৎ আপনি কোন নির্দিষ্ট স্থান থেকে ম্যাপটি শুরু হতে চান, তা সেট করতে পারেন। এতে আপনি ম্যাপের ভিউ বা পজিশন কাস্টমাইজ করে এমন একটি পয়েন্ট নির্বাচন করতে পারবেন যেখানে ম্যাপের কেন্দ্র স্থাপন করা হবে।
Custom Map Center সেট করার প্রক্রিয়া
১. ম্যাপ ভিউ সেট করা
LeafletJS এ ম্যাপের কেন্দ্র সেট করতে L.map() ফাংশন ব্যবহার করা হয়। setView() মেথডটি দিয়ে আপনি ম্যাপের কেন্দ্র এবং যেটি প্রথমে জুম লেভেল হিসেবে থাকবে, তা কাস্টমাইজ করতে পারবেন।
Syntax:
var map = L.map('map').setView([latitude, longitude], zoomLevel);
এখানে,
latitudeএবংlongitudeহলো সেই স্থানটির অক্ষাংশ (latitude) এবং দ্রাঘিমাংশ (longitude) যেখান থেকে আপনি ম্যাপের কেন্দ্র শুরু করতে চান।zoomLevelহলো ম্যাপের জুম লেভেল, সাধারণত এটি ০ থেকে ১৮ এর মধ্যে হতে পারে। ছোট জুম মান হলে ম্যাপের আরো বড় এলাকা দেখাবে, আর বড় জুম মানে ম্যাপের ছোট অংশ বড় করে দেখা যাবে।
উদাহরণ
ধরা যাক, আপনি লন্ডন শহরের উপর ম্যাপটি কেন্দ্র করতে চান, যার অক্ষাংশ (latitude) 51.505 এবং দ্রাঘিমাংশ (longitude) -0.09। আপনি চাইলে জুম লেভেল 13 দিয়ে সেট করতে পারেন।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Map Center</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
<div id="map" style="height: 500px;"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// ম্যাপ তৈরি এবং কাস্টম সেন্টার সেট করা
var map = L.map('map').setView([51.505, -0.09], 13);
// Tile Layer যোগ করা (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>
এই কোডে, setView([51.505, -0.09], 13) দিয়ে ম্যাপের কেন্দ্র লন্ডন শহরের উপর স্থাপন করা হয়েছে এবং জুম লেভেল ১৩ সেট করা হয়েছে।
Custom Map Center সেট করার পরের পদক্ষেপ
যদি আপনি ম্যাপের কেন্দ্র পরিবর্তন করতে চান বা কোন নির্দিষ্ট জায়গা থেকে নতুন কেন্দ্র সেট করতে চান, তাহলে setView() মেথডটি আবার ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:
map.setView([40.7128, -74.0060], 12); // এইটি নিউ ইয়র্ক শহরের জন্য
এটি ম্যাপকে নিউ ইয়র্ক শহরের দিকে কেন্দ্রিত করবে এবং জুম লেভেল ১২ দিয়ে দেখাবে।
সারাংশ
LeafletJS এ ম্যাপের কেন্দ্র কাস্টমাইজ করতে setView() মেথড ব্যবহার করা হয়, যা ম্যাপের শুরুতে নির্দিষ্ট স্থান এবং জুম লেভেল নির্ধারণ করতে সাহায্য করে। এটি একটি সহজ প্রক্রিয়া, যা ম্যাপিং অ্যাপ্লিকেশন বা ওয়েবসাইটে ম্যাপের কেন্দ্র ঠিক করার জন্য অপরিহার্য।
Read more
