LeafletJS ব্যবহার করে আপনি Shape গুলোর স্টাইল কাস্টমাইজ করতে পারেন, যেমন Polyline, Polygon, Circle, এবং Rectangle এর রঙ, আকার, প্রস্থ, এবং অন্যান্য স্টাইল পরিবর্তন করা। এগুলো কাস্টমাইজ করলে ম্যাপের ডিজাইন আরও আকর্ষণীয় এবং কার্যকরী হতে পারে। নিচে বিভিন্ন শেপের জন্য কাস্টম স্টাইলিং করার পদ্ধতি দেখানো হলো।
১. Polyline Styling
Polyline একটি একাধিক পয়েন্টের মধ্যে রেখা তৈরি করে। এটি সাধারণত পথ বা সীমানা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var latlngs = [
[51.505, -0.09],
[51.515, -0.1],
[51.525, -0.11]
];
var polyline = L.polyline(latlngs, {
color: 'green', // রেখার রঙ
weight: 6, // রেখার পুরুত্ব
opacity: 0.8, // রেখার স্বচ্ছতা
dashArray: '10, 5' // ড্যাশড লাইন স্টাইল
}).addTo(map);
কাস্টম স্টাইল অপশন:
color: রেখার রঙ নির্ধারণ করে।weight: রেখার পুরুত্ব নির্ধারণ করে।opacity: রেখার স্বচ্ছতা নির্ধারণ করে।dashArray: ড্যাশড লাইনের প্যাটার্ন সেট করে।
২. Polygon Styling
Polygon একটি বন্ধ আকৃতি তৈরি করে, যা একাধিক পয়েন্ট দিয়ে গঠিত। এটি সাধারণত এলাকা বা সীমারেখা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var latlngs = [
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
];
var polygon = L.polygon(latlngs, {
color: 'blue', // সীমানার রঙ
weight: 5, // সীমানার পুরুত্ব
fillColor: 'yellow', // ভিতরের রঙ
fillOpacity: 0.5 // ভিতরের স্বচ্ছতা
}).addTo(map);
কাস্টম স্টাইল অপশন:
color: পলিগনের সীমানার রঙ।weight: সীমানার পুরুত্ব।fillColor: পলিগনের ভিতরের রঙ।fillOpacity: পলিগনের ভিতরের স্বচ্ছতা।
৩. Circle Styling
Circle একটি নির্দিষ্ট রেডিয়াস সহ বৃত্ত তৈরি করে। এটি সাধারনত একটি এলাকা চিহ্নিত করতে ব্যবহৃত হয়।
উদাহরণ:
var circle = L.circle([51.508, -0.11], {
color: 'red', // বর্ডারের রঙ
fillColor: 'blue', // ভিতরের রঙ
fillOpacity: 0.5, // ভিতরের স্বচ্ছতা
radius: 300 // রেডিয়াস
}).addTo(map);
কাস্টম স্টাইল অপশন:
color: বর্ডারের রঙ।fillColor: বৃত্তের ভিতরের রঙ।fillOpacity: বৃত্তের ভিতরের স্বচ্ছতা।radius: বৃত্তের রেডিয়াস।
৪. Rectangle Styling
Rectangle একটি চারকোণা আকার, যা দুটি কোণের মধ্যে সীমানা নির্ধারণ করে।
উদাহরণ:
var bounds = [[51.49, -0.08], [51.5, -0.06]];
var rectangle = L.rectangle(bounds, {
color: 'purple', // সীমানার রঙ
weight: 3, // সীমানার পুরুত্ব
fillColor: 'green', // ভিতরের রঙ
fillOpacity: 0.2 // ভিতরের স্বচ্ছতা
}).addTo(map);
কাস্টম স্টাইল অপশন:
color: সীমানার রঙ।weight: সীমানার পুরুত্ব।fillColor: সীমানার ভিতরের রঙ।fillOpacity: সীমানার ভিতরের স্বচ্ছতা।
৫. Custom Icons and Shapes Styling
LeafletJS আপনাকে কাস্টম আইকন বা শেপ তৈরি করার সুযোগ দেয়। আপনি divIcon বা custom markers ব্যবহার করে একটি অনন্য শেপ এবং স্টাইল তৈরি করতে পারেন।
উদাহরণ: কাস্টম আইকন তৈরি করা
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 কনটেন্ট।
৬. Shape Styling Based on Feature Properties
GeoJSON ডেটা ব্যবহার করার সময়, আপনি শেপের স্টাইল কাস্টমাইজ করতে পারেন তাদের properties এর উপর ভিত্তি করে।
উদাহরণ:
L.geoJSON(geojsonData, {
style: function(feature) {
return {
color: feature.properties.name === 'London' ? 'blue' : 'green',
weight: 5,
opacity: 0.7
};
}
}).addTo(map);
এখানে, properties.name এর উপর ভিত্তি করে প্রতিটি GeoJSON ফিচারের স্টাইল নির্ধারণ করা হচ্ছে।
সারাংশ
LeafletJS এ Custom Shape Styling এর মাধ্যমে আপনি ম্যাপে বিভিন্ন ধরনের শেপের রঙ, আকার, প্রস্থ এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন। এটি আপনার ম্যাপের ডিজাইনকে আরো সুস্পষ্ট এবং আকর্ষণীয় করে তোলে। আপনি Polyline, Polygon, Circle, Rectangle, Custom Icons, এবং GeoJSON এর জন্য স্টাইল কাস্টমাইজ করতে পারেন, যা ম্যাপিং অভিজ্ঞতাকে উন্নত করে।
Read more
