LeafletJS এ Circle, CircleMarker, এবং Rectangle তৈরি করা খুবই সহজ। এগুলি ম্যাপের উপর বিভিন্ন শেপ বা আকার তৈরি করতে ব্যবহৃত হয় এবং ইন্টারেক্টিভ ম্যাপিং এর জন্য বিশেষভাবে কার্যকরী। আপনি এই শেপগুলির আকার, রঙ, সীমা ইত্যাদি কাস্টমাইজ করতে পারেন।
Circle তৈরি করা
Circle হল একটি গোলাকার আকার যা ম্যাপের একটি নির্দিষ্ট পয়েন্টের চারপাশে প্রদর্শিত হয়। এটি L.circle() ফাংশন ব্যবহার করে তৈরি করা হয়।
উদাহরণ:
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);
// Circle তৈরি করা
var circle = L.circle([51.508, -0.11], {
color: 'red', // বর্ডারের রঙ
fillColor: 'red', // ভরের রঙ
fillOpacity: 0.5, // ভরের অপাসিটি
radius: 500 // রেডিয়াস (মিটার)
}).addTo(map);
এখানে, L.circle() ফাংশনটি একটি নির্দিষ্ট পজিশন এবং রেডিয়াস সহ গোলাকার আকার তৈরি করেছে। color এবং fillColor দ্বারা রঙ কাস্টমাইজ করা হয়েছে, এবং radius দ্বারা আকার নির্ধারণ করা হয়েছে।
CircleMarker তৈরি করা
CircleMarker হল একটি ছোট, নির্দিষ্ট আকারের গোলাকার মার্কার যা pixel মাপের। এটি সাধারণত ম্যাপে আরও ছোট আকারে ব্যবহৃত হয়। L.circleMarker() ফাংশনটি ব্যবহার করে এটি তৈরি করা হয়।
উদাহরণ:
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);
// CircleMarker তৈরি করা
var circleMarker = L.circleMarker([51.508, -0.11], {
color: 'green', // বর্ডারের রঙ
fillColor: 'green', // ভরের রঙ
fillOpacity: 0.7, // ভরের অপাসিটি
radius: 10 // রেডিয়াস (পিক্সেল)
}).addTo(map);
এখানে, L.circleMarker() ফাংশনটি ব্যবহার করে একটি ছোট গোলাকার মার্কার তৈরি করা হয়েছে, যেখানে আকার পিক্সেল আকারে নির্ধারণ করা হয়েছে এবং রঙ কাস্টমাইজ করা হয়েছে।
Rectangle তৈরি করা
Rectangle হল একটি আয়তাকার আকৃতি, যা ম্যাপে প্রদর্শিত হতে পারে। এটি L.rectangle() ফাংশন ব্যবহার করে তৈরি করা হয় এবং আপনি এর আয়তন এবং সীমানা কাস্টমাইজ করতে পারেন।
উদাহরণ:
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);
// Rectangle তৈরি করা
var bounds = [[51.49, -0.08], [51.5, -0.06]]; // দিয়া দুইটি পয়েন্টের বাউন্ডারি
var rectangle = L.rectangle(bounds, {
color: 'blue', // বর্ডারের রঙ
weight: 1, // বর্ডারের প্রস্থ
fillColor: 'blue', // ভরের রঙ
fillOpacity: 0.3 // ভরের অপাসিটি
}).addTo(map);
এখানে, L.rectangle() ফাংশনটি দুটি কোঅর্ডিনেট পয়েন্ট (বাউন্ডস) দিয়ে একটি আয়তাকার শেপ তৈরি করেছে। এর রঙ এবং অন্যান্য প্রপার্টিজ কাস্টমাইজ করা হয়েছে।
সারাংশ
LeafletJS এর মাধ্যমে আপনি সহজেই Circle, CircleMarker, এবং Rectangle তৈরি করতে পারেন এবং এগুলির বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করতে পারেন। এই শেপগুলো ওয়েব ম্যাপে বিভিন্ন এলাকা চিহ্নিত করতে, ফোকাস তৈরি করতে, বা ব্যবহারকারীদের কাছে বিশেষ তথ্য প্রদর্শন করতে ব্যবহৃত হতে পারে। আপনি তাদের আকার, রঙ, সীমা, ভরের অপাসিটি ইত্যাদি কাস্টমাইজ করে একটি ইন্টারঅ্যাকটিভ ম্যাপ তৈরি করতে পারবেন।
