GeoJSON ফাইল কী এবং এর ব্যবহার

GeoJSON (Geospatial JSON) হলো একটি ওপেন স্ট্যান্ডার্ড ফাইল ফরম্যাট, যা জিওস্পেশাল ডেটা (জিওগ্রাফিক তথ্য) স্টোর করতে ব্যবহৃত হয়। এটি JSON (JavaScript Object Notation) ফরম্যাটের উপর ভিত্তি করে তৈরি, এবং এটি স্থানিক ডেটা যেমন পয়েন্ট, লাইন, পলিগন ইত্যাদি ধারণ করে। GeoJSON ফাইলটি ম্যাপিং সিস্টেমে, বিশেষ করে ওয়েব ম্যাপিং অ্যাপ্লিকেশনগুলিতে, খুবই জনপ্রিয়। LeafletJS এর মাধ্যমে GeoJSON ডেটা লোড, প্রদর্শন এবং কাস্টমাইজ করা সহজ এবং কার্যকরী।

GeoJSON ফাইলের কাঠামো

GeoJSON ফাইল সাধারণত একটি FeatureCollection ধারণ করে, যা এক বা একাধিক Feature ধারণ করে। প্রতিটি Feature একটি geometry (যেমন পয়েন্ট, লাইন, পলিগন) এবং properties (যেমন নাম, বর্ণনা ইত্যাদি) ধারণ করে।

একটি সাধারণ GeoJSON ফাইলের উদাহরণ:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "Sample Point"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [102.0, 0.0],
            [103.0, 0.0],
            [103.0, 1.0],
            [102.0, 1.0],
            [102.0, 0.0]
          ]
        ]
      },
      "properties": {
        "name": "Sample Polygon"
      }
    }
  ]
}

এখানে:

• type: GeoJSON ফাইলের মূল ধরনের তথ্য। এখানে FeatureCollection ব্যবহার করা হয়েছে।
• geometry: ডেটার ভৌগলিক রূপ, যেমন পয়েন্ট, লাইন, পলিগন ইত্যাদি।
• properties: ফিচারের সাথে সম্পর্কিত অতিরিক্ত তথ্য।

GeoJSON এর ব্যবহার

GeoJSON ফাইলের মাধ্যমে আপনি সহজেই LeafletJS-এ বিভিন্ন ধরনের জিওস্পেশাল ডেটা যেমন Point, Line, Polygon, MultiPolygon ইত্যাদি প্রদর্শন করতে পারেন। এটি ম্যাপিং অ্যাপ্লিকেশনগুলিতে ব্যবহৃত ডেটাকে আরো সহজ এবং পরিষ্কারভাবে উপস্থাপন করে।

১. GeoJSON ফাইল ম্যাপে লোড করা

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

// 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"
      }
    }
  ]
};

// ম্যাপ তৈরি
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() ফাংশনটি GeoJSON ডেটা লোড করে ম্যাপে দেখানোর জন্য ব্যবহার করা হয়েছে।
• Point এবং Polygon দুটি ভিন্ন ধরনের ফিচার যুক্ত করা হয়েছে।

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

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

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

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 ফিচারের উপর ইন্টারঅ্যাকশন যোগ করতে আপনি 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() পপ-আপ যোগ করতে ব্যবহৃত হয়।

৪. GeoJSON ফিচারের স্টাইল কাস্টমাইজেশন

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

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

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

এখানে:

• style() ফাংশন ব্যবহার করে GeoJSON ফিচারের স্টাইল কাস্টমাইজ করা হয়েছে।

সারাংশ

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