LeafletJS এ GeoJSON Data লোড করা

GeoJSON হলো একটি ফাইল ফরম্যাট যা Geospatial (জিওস্পেশাল) ডেটা স্টোর করতে ব্যবহৃত হয়। GeoJSON ডেটা ম্যাপে পয়েন্ট, লাইন, পলিগন, মাল্টিপল পলিগন ইত্যাদি ধারণ করে, এবং এটি LeafletJS এর মাধ্যমে ওয়েব ম্যাপে সহজেই প্রদর্শন করা যায়। LeafletJS এর L.geoJSON() ফাংশন ব্যবহার করে আপনি GeoJSON ডেটা ম্যাপে লোড করতে পারেন।

নিচে আমরা GeoJSON ডেটা লোড করার এবং প্রদর্শন করার বিভিন্ন পদ্ধতি আলোচনা করবো।

১. GeoJSON ডেটা লোকালি লোড করা

উদাহরণ ১: GeoJSON ডেটা ম্যাপে যোগ করা

এই উদাহরণে, আমরা একটি GeoJSON ডেটা তৈরি করব এবং সেটি LeafletJS এর মাধ্যমে ম্যাপে প্রদর্শন করব।

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.5, -0.1],
            [51.51, -0.1],
            [51.51, -0.09],
            [51.5, -0.09],
            [51.5, -0.1]
          ]
        ]
      },
      "properties": {
        "name": "Polygon Example"
      }
    }
  ]
};

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 ডেটা ম্যাপে যোগ করা
L.geoJSON(geojsonData).addTo(map);

এখানে:

• L.geoJSON(geojsonData) ফাংশনটি GeoJSON ডেটা লোড এবং ম্যাপে যোগ করার জন্য ব্যবহার করা হয়েছে।

২. GeoJSON ফাইল URL থেকে লোড করা

GeoJSON ডেটা যদি একটি এক্সটার্নাল ফাইল বা URL থেকে লোড করতে হয়, তবে fetch() ফাংশন ব্যবহার করা হয়।

উদাহরণ ২: GeoJSON ফাইল URL থেকে লোড করা

fetch('path/to/your/geojson-file.geojson')
  .then(response => response.json())
  .then(data => {
    L.geoJSON(data).addTo(map);
  })
  .catch(error => console.log('Error loading GeoJSON file: ', error));

এখানে:

• fetch() ফাংশনটি ব্যবহার করে GeoJSON ফাইলটি লোড করা হয়েছে এবং তারপর L.geoJSON() ব্যবহার করে সেটি ম্যাপে প্রদর্শন করা হয়েছে।

৩. GeoJSON ডেটা প্রপার্টি এবং স্টাইল কাস্টমাইজেশন

GeoJSON ফিচারের উপর স্টাইল কাস্টমাইজ করতে style অপশন ব্যবহার করা হয়।

উদাহরণ ৩: GeoJSON ডেটার স্টাইল কাস্টমাইজেশন

L.geoJSON(geojsonData, {
  style: function (feature) {
    return {
      color: feature.properties.name === 'London' ? 'blue' : 'green',
      weight: 3,
      opacity: 0.7
    };
  }
}).addTo(map);

এখানে:

• style() ফাংশনটি GeoJSON ফিচারের স্টাইল কাস্টমাইজ করতে ব্যবহৃত হয়। feature.properties.name এর উপর ভিত্তি করে রঙ পরিবর্তন করা হচ্ছে।

৪. GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন

GeoJSON ফিচারের উপর ইন্টারঅ্যাকশন যোগ করতে onEachFeature ফাংশন ব্যবহার করা হয়। এতে ক্লিক, হোভার ইভেন্ট যোগ করা যায়।

উদাহরণ ৪: ক্লিক ইভেন্ট এবং পপ-আপ

L.geoJSON(geojsonData, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup('Name: ' + feature.properties.name);

    // ক্লিক ইভেন্ট
    layer.on('click', function () {
      alert('You clicked on ' + feature.properties.name);
    });
  }
}).addTo(map);

এখানে:

• onEachFeature ফাংশনটি প্রতিটি GeoJSON ফিচারের উপর ইভেন্ট হ্যান্ডলিং করার জন্য ব্যবহৃত হয়।
• bindPopup() পপ-আপ প্রদর্শন করার জন্য ব্যবহৃত হয়।
• on('click') ক্লিক ইভেন্ট যোগ করতে ব্যবহৃত হয়।

৫. GeoJSON ফিচারের উপর হোভার ইফেক্ট

GeoJSON ফিচারের উপর mouseover এবং mouseout ইভেন্ট ব্যবহার করা হয় যাতে ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারেন।

উদাহরণ ৫: হোভার ইফেক্ট

L.geoJSON(geojsonData, {
  onEachFeature: function (feature, layer) {
    layer.on({
      mouseover: function () {
        layer.setStyle({
          weight: 5,
          color: 'orange',
          opacity: 0.7
        });
      },
      mouseout: function () {
        layer.setStyle({
          weight: 3,
          color: 'blue',
          opacity: 0.7
        });
      }
    });
  }
}).addTo(map);

এখানে:

• mouseover ইভেন্টে, আপনি লেয়ারের স্টাইল পরিবর্তন করেছেন যখন মাউস এর উপর আসে।
• mouseout ইভেন্টে, আপনি আগের স্টাইলে ফিরে যান।

সারাংশ

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