LeafletJS তে Shape Options ব্যবহার করে আপনি ম্যাপে বিভিন্ন ধরনের শেপ যেমন Polyline, Polygon, Circle, Rectangle ইত্যাদি তৈরি এবং কাস্টমাইজ করতে পারেন। শেপগুলো ম্যাপের উপর কোনো নির্দিষ্ট এলাকা বা রুট চিহ্নিত করতে ব্যবহৃত হয় এবং এগুলোর ভিজ্যুয়াল স্টাইল কাস্টমাইজ করার জন্য আপনি বিভিন্ন Options ব্যবহার করতে পারেন।
Shape Options কনফিগার করা
LeafletJS-এ বিভিন্ন ধরনের শেপের জন্য কিছু মৌলিক অপশন রয়েছে, যা আপনি কাস্টমাইজ করতে পারেন যেমন রঙ, প্রস্থ, পুরুত্ব, স্বচ্ছতা ইত্যাদি।
১. Polyline Options কনফিগার করা
Polyline হল একাধিক পয়েন্টের মধ্যে একটি সরল রেখা তৈরি করা। Polyline এর জন্য কিছু সাধারণ অপশন কনফিগার করা যায় যেমন রঙ, প্রস্থ, ড্যাশ স্টাইল ইত্যাদি।
উদাহরণ:
var latlngs = [
[51.505, -0.09],
[51.515, -0.1],
[51.525, -0.11]
];
var polyline = L.polyline(latlngs, {
color: 'blue', // পলিলাইনের রঙ
weight: 4, // পলিলাইনের পুরুত্ব
opacity: 0.7, // পলিলাইনের স্বচ্ছতা
dashArray: '10, 5' // ড্যাশড লাইনের প্যাটার্ন
}).addTo(map);
ব্যাখ্যা:
color: পলিলাইনের রঙ নির্ধারণ করে।weight: পলিলাইনের পুরুত্ব নির্ধারণ করে।opacity: পলিলাইনের স্বচ্ছতা কাস্টমাইজ করে।dashArray: ড্যাশড লাইন তৈরি করার জন্য প্যাটার্ন সেট করে, যেখানে প্রথম সংখ্যা হলো দৈর্ঘ্য এবং দ্বিতীয়টি হলো বিরতি।
২. Polygon Options কনফিগার করা
Polygon হল একটি বন্ধ আকৃতি, যা একাধিক পয়েন্ট দিয়ে তৈরি হয়। এটি সাধারণত এলাকা বা সীমারেখা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var latlngs = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
var polygon = L.polygon(latlngs, {
color: 'red', // পলিগনের সীমানার রঙ
weight: 3, // পলিগনের সীমানার পুরুত্ব
fillColor: 'yellow', // পলিগনের ভিতরের রঙ
fillOpacity: 0.5 // পলিগনের ভিতরের স্বচ্ছতা
}).addTo(map);
ব্যাখ্যা:
color: পলিগনের সীমানার রঙ নির্ধারণ করে।weight: পলিগনের সীমানার পুরুত্ব নির্ধারণ করে।fillColor: পলিগনের ভিতরের রঙ নির্ধারণ করে।fillOpacity: পলিগনের ভিতরের স্বচ্ছতা নির্ধারণ করে।
৩. Circle Options কনফিগার করা
Circle একটি বিশেষ ধরনের শেপ যা নির্দিষ্ট রেডিয়াস (radius) সহ তৈরি হয়। এটি সাধারণত একটি স্থান বা এলাকা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var circle = L.circle([51.508, -0.11], {
color: 'green', // বর্ডারের রঙ
fillColor: 'green', // ভিতরের রঙ
fillOpacity: 0.5, // ভিতরের স্বচ্ছতা
radius: 500 // রেডিয়াস
}).addTo(map);
ব্যাখ্যা:
color: সীমানার রঙ নির্ধারণ করে।fillColor: ভিতরের রঙ নির্ধারণ করে।fillOpacity: ভিতরের স্বচ্ছতা নির্ধারণ করে।radius: বৃত্তের রেডিয়াস নির্ধারণ করে।
৪. Rectangle Options কনফিগার করা
Rectangle একটি চারকোণা আকার, যা দুইটি কোণের মধ্যে সীমানা নির্ধারণ করে। এটি সাধারণত এলাকা বা সীমানা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var bounds = [[51.49, -0.08], [51.5, -0.06]];
var rectangle = L.rectangle(bounds, {
color: 'blue', // বর্ডারের রঙ
weight: 3, // সীমানার পুরুত্ব
fillColor: 'blue', // ভিতরের রঙ
fillOpacity: 0.2 // ভিতরের স্বচ্ছতা
}).addTo(map);
ব্যাখ্যা:
color: সীমানার রঙ নির্ধারণ করে।weight: সীমানার পুরুত্ব নির্ধারণ করে।fillColor: ভিতরের রঙ নির্ধারণ করে।fillOpacity: ভিতরের স্বচ্ছতা নির্ধারণ করে।
৫. Custom Shape Options কনফিগার করা
LeafletJS আপনাকে আপনার শেপগুলির জন্য কাস্টম স্টাইল তৈরি করার সুযোগ দেয়, যেমন আইকন বা বিশেষ কোনো অ্যানিমেশন যুক্ত করা।
উদাহরণ:
var customIcon = L.divIcon({
className: 'custom-icon', // আইকনের ক্লাস
html: '<div style="background-color: red; width: 30px; height: 30px; border-radius: 50%"></div>' // কাস্টম আইকন তৈরি
});
var marker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);
ব্যাখ্যা:
className: আইকনের জন্য একটি ক্লাস নির্ধারণ করে।html: আইকনের HTML কনটেন্ট কাস্টমাইজ করে।
সারাংশ
LeafletJS এর Shape Options ব্যবহার করে আপনি ম্যাপে বিভিন্ন শেপ কাস্টমাইজ করতে পারেন যেমন Polyline, Polygon, Circle, এবং Rectangle। এগুলোর জন্য আপনি রঙ, প্রস্থ, পুরুত্ব, স্বচ্ছতা এবং অন্যান্য স্টাইল বিকল্প কাস্টমাইজ করতে পারেন। এভাবে আপনি ম্যাপের শেপগুলোর ভিজ্যুয়াল প্রেজেন্টেশন আরও আকর্ষণীয় এবং কার্যকরী করতে পারেন।
Read more
