GeoJSON Styling এবং Interactivity

LeafletJS আপনাকে GeoJSON ডেটা ফাইল প্রদর্শন করতে এবং তার স্টাইল ও ইন্টারঅ্যাকশন কাস্টমাইজ করতে সাহায্য করে। GeoJSON হল একটি জনপ্রিয় ফরম্যাট যা জিওস্পেশাল ডেটা, যেমন পয়েন্ট, লাইন, এবং পলিগন, ওয়েব অ্যাপ্লিকেশনে প্রদর্শনের জন্য ব্যবহৃত হয়। LeafletJS এ GeoJSON ফাইল স্টাইলিং এবং ইন্টারঅ্যাকশন যোগ করা সহজ এবং কার্যকরী।

GeoJSON ফাইল লোড করা

GeoJSON ফাইল লোড করতে, প্রথমে LeafletJS এ L.geoJSON() ফাংশন ব্যবহার করে এটি ম্যাপে যোগ করা হয়। এর মাধ্যমে আপনি JSON ফাইল থেকে GeoJSON ডেটা ইম্পোর্ট করতে পারবেন।

GeoJSON লোড করার উদাহরণ:

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);

// GeoJSON ডেটা
var geojsonData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [51.5, -0.09]
            },
            "properties": {
                "name": "London"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [51.49, -0.08],
                        [51.5, -0.06],
                        [51.51, -0.07],
                        [51.49, -0.08]
                    ]
                ]
            },
            "properties": {
                "name": "Sample Area"
            }
        }
    ]
};

// GeoJSON ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);

এখানে, GeoJSON ডেটা একটি পয়েন্ট এবং একটি পলিগন ধারণ করছে, এবং L.geoJSON() ফাংশনটি GeoJSON ডেটা ম্যাপে প্রদর্শন করছে।

GeoJSON Styling

GeoJSON এর স্টাইল কাস্টমাইজ করতে, আপনি style অপশন ব্যবহার করতে পারেন, যা পলিগন, পলিলাইন বা পয়েন্টের রঙ, প্রস্থ, পূর্ণতার পরিমাণ ইত্যাদি নিয়ন্ত্রণ করে।

GeoJSON Styling উদাহরণ:

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);

// GeoJSON ডেটা
var geojsonData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [51.5, -0.09]
            },
            "properties": {
                "name": "London"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [51.49, -0.08],
                        [51.5, -0.06],
                        [51.51, -0.07],
                        [51.49, -0.08]
                    ]
                ]
            },
            "properties": {
                "name": "Sample Area"
            }
        }
    ]
};

// GeoJSON Styling ফাংশন
function style(feature) {
    return {
        weight: 2,
        color: 'green', // সীমান্তের রঙ
        fillColor: 'yellow', // ভরের রঙ
        fillOpacity: 0.5 // পূর্ণতার পরিমাণ
    };
}

// GeoJSON ডেটার স্টাইলিং
L.geoJSON(geojsonData, {
    style: style
}).addTo(map);

এখানে, style() ফাংশন ব্যবহার করা হয়েছে যা GeoJSON ডেটার পলিগনের রঙ, সীমানার প্রস্থ এবং পূর্ণতার পরিমাণ কাস্টমাইজ করেছে।

GeoJSON Interactivity

GeoJSON এর উপর Interactivity যোগ করতে, আপনি onEachFeature ফাংশন ব্যবহার করতে পারেন, যা প্রতিটি ফিচারের জন্য ইভেন্ট হ্যান্ডলিং এবং পপ-আপ যুক্ত করতে সহায়তা করে।

GeoJSON Interactivity উদাহরণ:

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);

// GeoJSON ডেটা
var geojsonData = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [51.5, -0.09]
            },
            "properties": {
                "name": "London"
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [51.49, -0.08],
                        [51.5, -0.06],
                        [51.51, -0.07],
                        [51.49, -0.08]
                    ]
                ]
            },
            "properties": {
                "name": "Sample Area"
            }
        }
    ]
};

// Interactivity যুক্ত করা
function onEachFeature(feature, layer) {
    // পপ-আপ যোগ করা
    if (feature.properties && feature.properties.name) {
        layer.bindPopup("<b>" + feature.properties.name + "</b>");
    }

    // ক্লিক ইভেন্ট
    layer.on('click', function () {
        alert("আপনি " + feature.properties.name + " এ ক্লিক করেছেন!");
    });
}

// GeoJSON এর উপর Interactivity যোগ করা
L.geoJSON(geojsonData, {
    onEachFeature: onEachFeature
}).addTo(map);

এখানে, onEachFeature() ফাংশনটি প্রতিটি ফিচারের জন্য একটি পপ-আপ এবং ক্লিক ইভেন্ট যুক্ত করেছে। যখন ব্যবহারকারী একটি ফিচারে ক্লিক করবেন, তখন একটি এলার্ট বার্তা দেখানো হবে।

সারাংশ

LeafletJS-এ GeoJSON এর মাধ্যমে আপনি ম্যাপে বিভিন্ন ধরনের জিওস্পেশাল ডেটা প্রদর্শন করতে পারেন এবং সেগুলোর Styling এবং Interactivity কাস্টমাইজ করতে পারেন। আপনি GeoJSON ফাইল লোড করতে এবং তার স্টাইল, রঙ, আকার, এবং ইন্টারঅ্যাকটিভ ফিচার (যেমন পপ-আপ, ক্লিক ইভেন্ট) যোগ করতে পারেন। এর ফলে, আপনার ওয়েব অ্যাপ্লিকেশন আরো ইন্টারেকটিভ এবং দর্শনীয় হয়ে ওঠে।