স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

KmlLayer মাইগ্রেশন পাথ

ভূমিকা

এই নির্দেশিকার উদ্দেশ্য হলো KmlLayer- এর সবচেয়ে প্রচলিত ব্যবহারগুলো তুলে ধরা এবং এর বিকল্প সংস্করণগুলোতে স্থানান্তরের পথ দেখানো। এই তথ্যটি সেইসব ডেভেলপারদের জন্য, যাদের নির্ধারিত অবলুপ্তির কারণে KmlLayer-এর ব্যবহার থেকে সরে আসতে হবে। KmlLayer সমর্থনকারী সর্বশেষ সংস্করণটি হলো 3.65, যা ২০২৭ সালের মে মাসে বন্ধ করে দেওয়া হবে।

আপনার মাইগ্রেশনের পথ নির্ভর করে আপনি KmlLayer কীভাবে ব্যবহার করছেন তার উপর:

সীমানা/প্রান্তর/আগ্রহের এলাকার তথ্য স্টাইল করার জন্য KML ফাইল : গুগলের সীমানা ডেটা ব্যবহার করে প্রশাসনিক এলাকার সীমানার জন্য ডেটা-ড্রাইভেন স্টাইলিং (DDS) ব্যবহার করুন।
ভেক্টর ডেটা (পয়েন্ট/পলিলাইন/বাউন্ডারি/পলিগন) সহ KML ফাইল : ডেটাসেটের জন্য DDS , GeoJSON , অথবা deck.gl বা geoxml3 এর মতো থার্ড-পার্টি লাইব্রেরি ব্যবহার করুন।
ইন্টারেক্টিভ উপাদানসহ KML ফাইল : ফিচার ইন্টারঅ্যাকশনের জন্য ম্যানুয়াল ইভেন্ট লিসেনার এবং কাস্টম ইনফো উইন্ডো প্রয়োগ করুন।
চিত্রসহ KML ফাইল : চিত্র ওভারলে-এর জন্য GroundOverlays বা তৃতীয় পক্ষের পার্সার ব্যবহার করুন।
নেটওয়ার্ক লিঙ্ক সহ KML ফাইল : প্রতিটি KML ফাইলকে আলাদা ডেটাসেট হিসেবে আপলোড করুন, অথবা KML ফাইলগুলোকে একত্রিত করুন। ডাইনামিক ডেটা প্রদর্শন করার ক্ষেত্রে, ডেটাসেটস এপিআই (Datasets API) ব্যবহার করে ডেটাসেটটি রিফ্রেশ করুন।
স্ক্রিন ওভারলে প্রদর্শন করতে KML ব্যবহার করুন : লোগো, লিজেন্ড বা নেভিগেশন এইডের মতো স্থির UI উপাদানগুলি প্রতিস্থাপন করতে কাস্টম কন্ট্রোল ব্যবহার করুন।

সীমানা/প্রান্তর/আগ্রহের এলাকার তথ্য শৈলীবদ্ধ করার জন্য KML ফাইল

যেসব ডেভেলপার প্রশাসনিক সীমানা প্রদর্শন বা স্টাইল করার জন্য—যেমন কোনো নির্দিষ্ট দেশ, রাজ্য বা এলাকা হাইলাইট করতে— KmlLayer ব্যবহার করেন, তাদের জন্য গুগল ম্যাপস প্ল্যাটফর্ম সীমানার ক্ষেত্রে ডেটা-ড্রাইভেন স্টাইলিং (DDS)- এ স্থানান্তরিত হওয়ার পরামর্শ দেয়।

স্থানান্তর সুপারিশ: সীমানার জন্য ডেটা-ভিত্তিক স্টাইলিং

সীমানার জন্য ডেটা-চালিত স্টাইলিং গুগলের প্রশাসনিক সীমানা বহুভুজগুলিতে সরাসরি অ্যাক্সেস প্রদান করে, যার ফলে আপনি বাহ্যিক KML ফাইল হোস্ট বা পরিচালনা করার প্রয়োজন ছাড়াই এই অঞ্চলগুলিতে কাস্টম স্টাইল (ফিল এবং স্ট্রোক) প্রয়োগ করতে পারেন।

উপলব্ধ বৈশিষ্ট্যের ধরণ

প্রশাসনিক এলাকাগুলোকে কার্যকারিতা অনুসারে শ্রেণিবদ্ধ করা হয় এবং স্তর অনুযায়ী বিন্যস্ত করা হয়। স্টাইলিংয়ের জন্য নিম্নলিখিত বৈশিষ্ট্য প্রকারগুলি সমর্থিত:

COUNTRY : জাতীয় রাজনৈতিক সত্তা।
ADMINISTRATIVE_AREA_LEVEL_1 : দেশ স্তরের নিচের একটি প্রথম-স্তরের বেসামরিক সত্তা (যেমন, মার্কিন যুক্তরাষ্ট্রের রাজ্যসমূহ)।
ADMINISTRATIVE_AREA_LEVEL_2 : দেশ স্তরের নিচের একটি দ্বিতীয়-স্তরের বেসামরিক সত্তা (যেমন, মার্কিন যুক্তরাষ্ট্রে কাউন্টি)।
LOCALITY : একটি অন্তর্ভুক্ত শহর বা নগর।
POSTAL_CODE : ডাক যোগাযোগের জন্য ব্যবহৃত পোস্টাল কোড।
SCHOOL_DISTRICT : একীভূত, প্রাথমিক বা মাধ্যমিক স্কুল ডিস্ট্রিক্ট।

যেসব অঞ্চলে এই বৈশিষ্ট্যগুলির প্রকার উপলব্ধ, সেগুলির সীমানা পরিধি দেখুন।

কীভাবে একটি এলাকা হাইলাইট করবেন

কোনো নির্দিষ্ট অঞ্চলকে স্টাইল করতে হলে, আপনাকে তার প্লেস আইডি (Place ID) দিয়ে সেটিকে টার্গেট করতে হবে।

সেটআপ : আপনাকে অবশ্যই জাভাস্ক্রিপ্ট ভেক্টর ম্যাপ টাইপের জন্য কনফিগার করা একটি ম্যাপ আইডি ব্যবহার করতে হবে এবং গুগল ক্লাউড কনসোলে উপলব্ধ ফিচার লেয়ারটি সক্রিয় করতে হবে।
বাস্তবায়ন : 'Style a boundary polygon' নমুনা কোডটি ব্যবহার করুন।

একটি এলাকায় প্যানিং সীমাবদ্ধ করা

ব্যবহারকারীদের আপনার হাইলাইট করা এলাকার বাউন্ডিং বক্সের বাইরে যাওয়া থেকে বিরত রাখতে, আপনি MapOptions মধ্যে থাকা restriction অপশনটি ব্যবহার করতে পারেন।

restriction অবজেক্টটি একটি latLngBounds নির্ধারণ করে, যা ম্যাপের দর্শনযোগ্য এলাকাকে সীমাবদ্ধ করে। রেস্ট্রিকশন কীভাবে কাজ করে সে সম্পর্কে আরও বিস্তারিত জানতে ডকুমেন্টেশন দেখুন।

// Restrict panning to a specific bounding box
restriction: {
  latLngBounds: {
    north: 47.8,
    south: 45.8,
    east: 10.5,
    west: 5.9,
  },
  strictBounds: true,
},

সারসংক্ষেপ অভিবাসন বাস্তবায়ন

সীমানা নির্ধারণ এবং অঞ্চল সীমাবদ্ধতার জন্য ডেটা-চালিত স্টাইলিং ব্যবহার করে কীভাবে মানচিত্রকে একটি নির্দিষ্ট এলাকার চারপাশে কেন্দ্রীভূত করা যায়, তার একটি সম্পূর্ণ উদাহরণ এখানে দেওয়া হলো।

const myTargetRegion = "ChIJYW1Zb-9kjEcRFXvLDxG1Vlw"; // Place ID for Switzerland

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 46.8, lng: 8.2 },
    zoom: 9,
    mapId: "YOUR_MAP_ID", // Required for DDS
    // Restrict panning to a specific bounding box
    restriction: {
    // Bounding box for Switzerland
      latLngBounds: {
        north: 47.8,
        south: 45.8,
        east: 10.5,
        west: 5.9,
      },
      strictBounds: true,
    },
  });

  // Access the Country layer and style a specific region by Place ID
  const countryLayer = map.getFeatureLayer("COUNTRY");
  countryLayer.style = (options) => {
    if (options.feature.placeId === myTargetRegion) {
      return {
        fillColor: "#FF0000",
        fillOpacity: 0.5,
        strokeColor: "#FF0000",
        strokeWeight: 2,
      };
    } else {
    // Style everything else whited out, to make the area of interest pop out more.
      return {
        fillColor: '#ffffff',
        fillOpacity: 0.8,
      };
    }
  };
}

ভেক্টর ডেটা সহ KML ফাইল (পয়েন্ট/পলিলাইন/সীমানা/বহুভুজ)

মাইগ্রেশন সুপারিশ: ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং

স্টাইলিং ও পারফরম্যান্সের ওপর আরও বেশি নিয়ন্ত্রণ পাওয়ার পাশাপাশি সর্বজনীনভাবে উপলব্ধ ভৌগোলিক ডেটা প্রদর্শনের জন্য গুগল নিচের পদ্ধতিটি সুপারিশ করে।

ডেটা সেটগুলির জন্য ডেটা-চালিত স্টাইলিং আপনাকে আপনার নিজস্ব ভূ-স্থানিক ডেটা (KML, GeoJSON, বা CSV) আপলোড করতে, ডেটার বৈশিষ্ট্যগুলির উপর ভিত্তি করে কাস্টম স্টাইলিং প্রয়োগ করতে এবং ভেক্টর মানচিত্রে বৈশিষ্ট্যগুলি প্রদর্শন করতে দেয়।

১. সেটআপ এবং আপলোড

KmlLayer মতো নয়, যা রানটাইমে একটি URL ফেচ করে, DDS-এর জন্য আপনাকে Google Cloud Console-এ ডেটা ডেটাসেট হিসেবে হোস্ট করতে হয়।

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

২. ডেটাতে ভিউপোর্ট সেট করা

ডিফল্টরূপে KmlLayer স্বয়ংক্রিয়ভাবে ডেটার অবস্থানে প্যান ও জুম করে। ডেটাসেটের জন্য DDS-এর ক্ষেত্রে এই আচরণটি স্বয়ংক্রিয় নয় এবং এটি ম্যানুয়ালি প্রয়োগ করতে হয়।

হার্ডকোডেড সীমাবদ্ধতা : যদি ডেটা এরিয়াটি স্থির থাকে, তাহলে ভিউপোর্টকে নির্দিষ্ট সীমানায় লক করতে MapOptions এর restriction অপশনটি ব্যবহার করুন।
ডাইনামিক জুমিং : ভিউপোর্ট গতিশীলভাবে সেট করতে, আপনি আপনার ডেটাসেটের বাউন্ডিং বক্স সহ map.fitBounds() ব্যবহার করতে পারেন।

৩. ফিচার অ্যাট্রিবিউট থেকে স্টাইলিং

KML ফাইলগুলিতে প্রায়শই এমন স্টাইল সংক্রান্ত তথ্য (যেমন রঙ) থাকে যা DDS স্বয়ংক্রিয়ভাবে প্রয়োগ করে না। রঙ এবং অস্বচ্ছতা প্রয়োগ করার জন্য আপনাকে অবশ্যই একটি ক্লায়েন্ট-সাইড স্টাইল ফাংশন তৈরি করতে হবে, যা ডেটাসেটের ফিচারগুলো থেকে অ্যাট্রিবিউটগুলো পড়ে। আপনার ডেটা কীভাবে স্টাইল করবেন তার সম্পূর্ণ বিবরণের জন্য ডেভেলপার ডকুমেন্টেশন দেখুন।

উদাহরণ: অ্যাট্রিবিউট ব্যবহার করে ফাংশনের স্টাইলিং

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এমন একটি স্টাইল ফাংশন তৈরি করতে হয় যা আপলোড করা ডেটাসেট থেকে সরাসরি background_color এবং opacity অ্যাট্রিবিউটগুলো পড়ে নেয়:

/**
 * Migration example: Styling features from dataset attributes.
 */
function styleDDSLayer(map, datasetId) {
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  // Set the style function
  datasetLayer.style = (params) => {
    // Access attributes defined in your KML/Dataset
    const featureAttributes = params.feature.datasetAttributes;

    // Read style values from attributes, with fallback defaults
    const fillColor = featureAttributes['background_color'] || '#4285F4';
    const fillOpacity = parseFloat(featureAttributes['opacity']) || 0.5;
    const strokeColor = featureAttributes['border_color'] || '#34A853';

    return {
      fillColor: fillColor,
      fillOpacity: fillOpacity,
      strokeColor: strokeColor,
      strokeWeight: 2,
    };
  };
}

ইন্টারঅ্যাকশন এবং স্টাইলিং বাস্তবায়নের বিষয়ে আরও বিস্তারিত জানতে, “ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং” ওভারভিউ এবং “ডাইনামিক ডেটার জন্য ডেটাসেট এপিআই” দেখুন।

মাইগ্রেশন সুপারিশ: GeoJSON ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

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

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

১. KML কে GeoJSON এ রূপান্তর করুন

প্রথম ধাপ হলো আপনার KML ফাইলগুলোকে GeoJSON-এ রূপান্তর করা। এটি বেশ কিছু জনপ্রিয় ওপেন-সোর্স টুল ব্যবহার করে করা যেতে পারে:

ogr2ogr : GDAL স্যুটের একটি অংশ, এই শক্তিশালী কমান্ড-লাইন ইউটিলিটিটি বিভিন্ন ভেক্টর ফরম্যাটের মধ্যে রূপান্তর করতে পারে।

ogr2ogr -f GeoJSON output.json input.kml

togeojson : KML এবং GPX ফাইলকে GeoJSON-এ রূপান্তর করার জন্য বিশেষভাবে তৈরি একটি ক্ষুদ্র ও সুপরীক্ষিত টুল।

togeojson input.kml > output.json

২. ডেটাতে ভিউপোর্ট সেট করা

KmlLayer স্বয়ংক্রিয়ভাবে ডেটার অবস্থানে প্যান ও জুম করলেও, Data লেয়ার তা করে না। আপনার GeoJSON ডেটার সাথে মানানসই করে ভিউপোর্ট সেট করতে, আপনাকে অবশ্যই ম্যানুয়ালি বাউন্ডিং বক্স গণনা করতে হবে এবং map.fitBounds() কল করতে হবে।

৩. ফিচার অ্যাট্রিবিউট থেকে স্টাইলিং

ডেটা লেয়ারে, আপনি একটি style ফাংশন সংজ্ঞায়িত করতে পারেন যা প্রতিটি GeoJSON ফিচারের চেহারা নির্ধারণ করার জন্য সরাসরি তার অ্যাট্রিবিউট (প্রপার্টি) পড়ে।

উদাহরণ: স্টাইলিং ফাংশন এবং ভিউপোর্ট অ্যাডজাস্টমেন্ট

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে GeoJSON ডেটা লোড করতে হয়, ভিউপোর্ট সেট করার জন্য এর সীমানা গণনা করতে হয় এবং ফিচারগুলির অ্যাট্রিবিউটের উপর ভিত্তি করে সেগুলিকে স্টাইল করতে হয়:

/**
 * Migration example: Loading GeoJSON, fitting viewport, and styling from attributes.
 */
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // Load the GeoJSON data
  map.data.loadGeoJson('path/to/your/data.json', null, (features) => {
    // Adjust viewport to show all loaded features
    const bounds = new google.maps.LatLngBounds();
    features.forEach((feature) => {
      feature.getGeometry().forEachLatLng((latlng) => {
        bounds.extend(latlng);
      });
    });
    map.fitBounds(bounds);
  });

  // Set the style function to read from GeoJSON properties
  map.data.setStyle((feature) => {
    // Access attributes defined in your GeoJSON properties
    const fillColor = feature.getProperty('background_color') || '#4285F4';
    const opacity = parseFloat(feature.getProperty('opacity')) || 0.5;
    const strokeColor = feature.getProperty('border_color') || '#34A853';

    return {
      fillColor: fillColor,
      fillOpacity: opacity,
      strokeColor: strokeColor,
      strokeWeight: 2,
      visible: true
    };
  });
}

ডেটা লেয়ার ব্যবহারের বিষয়ে আরও তথ্যের জন্য, “ Importing GeoJSON into Maps” ডকুমেন্টেশনটি দেখুন।

স্থানান্তরের পথ: তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

যেসব ডেভেলপার KmlLayer এর বিকল্প খুঁজছেন, তাদের জন্য গুগল ম্যাপস প্ল্যাটফর্ম জাভাস্ক্রিপ্ট এপিআই-তে KML ডেটা রেন্ডার করার জন্য কমিউনিটি দ্বারা পরিচালিত বেশ কিছু লাইব্রেরি রয়েছে।

1. deck.gl

deck.gl হলো একটি উচ্চ-পারফরম্যান্স সম্পন্ন WebGL-চালিত ভিজ্যুয়ালাইজেশন ফ্রেমওয়ার্ক। এর GoogleMapsOverlay এবং GeoJsonLayer মাধ্যমে এটিকে KML রেন্ডারিং-এর প্রায় সরাসরি বিকল্প হিসেবে ব্যবহার করা যায়।

ক্যানভাসের প্রয়োজনীয়তা: deck.gl কার্যকরভাবে ব্যবহার করার জন্য, আপনাকে অবশ্যই আপনার ম্যাপটিকে ভেক্টর ম্যাপ টাইপে (যা একটি ক্যানভাস এলিমেন্টে রেন্ডার হয়) এবং এর WebGL রেন্ডারিং ক্ষমতা ব্যবহার করার জন্য রূপান্তর করতে হবে।
KML সাপোর্ট: জিওমেট্রি পার্সিংয়ের কাজটি @loaders.gl/kml দ্বারা পরিচালিত হয়, যা KML-কে GeoJSON-এ রূপান্তর করে। উল্লেখ্য যে, জটিল স্টাইল, আইকন এবং নেটওয়ার্কলিঙ্কের মতো কিছু KML ফিচারের জন্য অতিরিক্ত ম্যানুয়াল ইমপ্লিমেন্টেশনের প্রয়োজন হতে পারে।
ডকুমেন্টেশন: deck.gl ডকুমেন্টেশন | loaders.gl কেএমএল লোডার ।
উদাহরণ:
- গুগল ম্যাপস গিটহাব রিপোজিটরিতে থাকা deckgl-kml-updated স্যাম্পলটি দেখায়, কীভাবে deck.gl ব্যবহার করে রিয়েল-টাইমে আপডেট হওয়া KML ডেটা রেন্ডার করা যায়।
- deckgl-kml স্যাম্পলটি দেখায় কিভাবে deck.gl ব্যবহার করে KML ডেটা রেন্ডার করতে হয়।

২. জিওএক্সএমএল৩

geoxml3 হলো একটি KML প্রসেসর যা বিশেষভাবে গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই v3-এর জন্য ডিজাইন করা হয়েছে। এটি ব্রাউজারে স্থানীয়ভাবে KML পার্স করে এবং ডেটাগুলোকে মার্কার, পলিলাইন ও পলিগনের মতো স্ট্যান্ডার্ড গুগল ম্যাপস এপিআই অবজেক্ট হিসেবে রেন্ডার করে।

স্ট্যান্ডার্ড ম্যাপ সাপোর্ট: WebGL-ভিত্তিক সলিউশনের মতো নয়, geoxml3 কোনো নির্দিষ্ট রেন্ডারিং মোডের প্রয়োজন ছাড়াই স্ট্যান্ডার্ড Google Maps JS API v3 ম্যাপে কাজ করে।
সতর্কতা:
- সীমিত KMZ সমর্থন: লাইব্রেরিটি স্বাভাবিকভাবে KMZ ফাইল সম্পূর্ণরূপে সমর্থন করে না ; KMZ আর্কাইভ আনজিপ করার জন্য সাধারণত ZipFile.complete.js মতো অতিরিক্ত তৃতীয় পক্ষের স্ক্রিপ্টের সাথে ইন্টিগ্রেশনের প্রয়োজন হয়।
- অসমর্থিত উপাদানসমূহ: ত্রিমাত্রিক জ্যামিতি, জটিল লেবেল এবং কিছু নতুন KML উপাদানের মতো বৈশিষ্ট্যগুলো সমর্থিত নয়।
ডকুমেন্টেশন: geoxml3 গিটহাব রিপোজিটরি ।

ইন্টারেক্টিভ উপাদান সহ KML ফাইল

মাইগ্রেশন সুপারিশ: ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং

যেসব ডেভেলপার ডেটাসেটের জন্য KmlLayer থেকে ডেটা-ড্রাইভেন স্টাইলিং (DDS)- এ স্থানান্তরিত হচ্ছেন, তাদের জন্য এই নির্দেশিকাটি ব্যাখ্যা করে যে কীভাবে স্বয়ংক্রিয় KML ইন্টারঅ্যাকশন থেকে মাউস ক্লিক এবং হোভারের মতো কাস্টম, উচ্চ-পারফরম্যান্স ইন্টারঅ্যাকশনে রূপান্তর করা যায়।

প্রাথমিক সেটআপ

ইন্টারঅ্যাকশনগুলি প্রয়োগ করার আগে, নিশ্চিত করুন যে আপনি KML মাইগ্রেশন: ভেক্টর ডেটা গাইড থেকে সেটআপ ধাপগুলি অনুসরণ করেছেন:

ম্যাপ আইডি: ভেক্টর ম্যাপ টাইপের জন্য একটি ম্যাপ আইডি কনফিগার করুন।
আপলোড: ডেটাসেট আইডি পেতে আপনার KML ডেটা গুগল ক্লাউড কনসোলে আপলোড করুন।
লেয়ার অ্যাক্সেস: ইন্টারেক্টিভ লেয়ারটি অ্যাক্সেস করতে map.getDatasetFeatureLayer(datasetId) ব্যবহার করুন।

১. ইন্টারঅ্যাকশন ইভেন্ট পরিচালনা

KmlLayer এ, ফিচার ক্লিকগুলো API দ্বারা স্বয়ংক্রিয়ভাবে একটি তথ্য উইন্ডো পপ আপ করার জন্য পরিচালিত হয়। ডেটাসেটের জন্য DDS-এর ক্ষেত্রে, আপনাকে ডেটাসেট লেয়ারে মাউস ইভেন্টের জন্য লিসেনারগুলো ম্যানুয়ালি রেজিস্টার করতে হবে।

click : যখন কোনো ব্যবহারকারী কোনো ফিচারে ক্লিক করেন তখন এটি সক্রিয় হয়।
mousemove : কার্সর কোনো ফিচারের উপর দিয়ে গেলে এটি সক্রিয় হয়, যা হোভার ইফেক্টের জন্য উপযোগী।

২. ডাইনামিক স্টাইলিং (হোভার এফেক্ট)

যেহেতু ডিডিএস স্টাইলগুলো লেয়ারে বিশ্বব্যাপী প্রয়োগ করা হয়, তাই কোন ফিচারটির সাথে ইন্টারঅ্যাক্ট করা হচ্ছে তা ট্র্যাক করতে এবং স্টাইলটি পুনরায় প্রয়োগ করতে আপনার একটি স্টেট ভেরিয়েবল বজায় রাখা উচিত।

let currentFeatureId = null;

function initInteraction(map, datasetId) {
  const datasetLayer = map.getDatasetFeatureLayer(datasetId);

  // Apply the style function
  datasetLayer.style = (params) => {
    const isHovered = params.feature.datasetAttributes['id'] === currentFeatureId;
    return {
      strokeColor: 'green',
      strokeWeight: isHovered ? 4.0 : 2.0, // Bold border on hover
      fillColor: 'green',
      fillOpacity: isHovered ? 0.5 : 0.3,
    };
  };

  // Add interaction listeners
  datasetLayer.addListener('mousemove', (event) => {
    if (event.features.length > 0) {
      currentFeatureId = event.features[0].datasetAttributes['id'];
      datasetLayer.style = datasetLayer.style; // Re-apply style to reflect changes
    }
  });

  // Clear hover state when the mouse leaves the features
  map.addListener('mousemove', () => {
    if (currentFeatureId !== null) {
      currentFeatureId = null;
      datasetLayer.style = datasetLayer.style;
    }
  });
}

৩. `description` অ্যাট্রিবিউট থেকে HTML প্রদর্শন করা

KML-এ, <description> ট্যাগে প্রায়শই ডিফল্ট ইনফো উইন্ডোর জন্য HTML থাকে। যখন এই ডেটা একটি ডেটাসেট হিসাবে ইম্পোর্ট করা হয়, তখন description একটি ফিচার অ্যাট্রিবিউটে পরিণত হয়। এটি রেন্ডার করতে, স্ট্রিংটি সরাসরি একটি স্ট্যান্ডার্ড google.maps.InfoWindow এ পাস করুন।

const infoWindow = new google.maps.InfoWindow();

datasetLayer.addListener('click', (event) => {
  if (event.features.length > 0) {
    const feature = event.features[0];
    // Access the HTML description attribute
    const htmlContent = feature.datasetAttributes['description'];

    infoWindow.setContent(htmlContent);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

৪. `ExtendedData` সহ কাস্টম তথ্যউইন্ডো

আপনার KML ফাইলে যদি কাস্টম নাম/মান জোড়া সংরক্ষণের জন্য <ExtendedData> ব্যবহৃত হয়, তবে সেগুলোকে datasetAttributes সাথে ম্যাপ করা হয়। আপনি একটি কাস্টম HTML ডিসপ্লে তৈরি করার জন্য এই অ্যাট্রিবিউটগুলোর মধ্যে দিয়ে পুনরাবৃত্তি করতে পারেন।

function createCustomContent(feature) {
  const attributes = feature.datasetAttributes;
  const container = document.createElement("div");
  container.style.padding = "10px";
  container.innerHTML = "<h3>Feature Details</h3><dl></dl>";

  const dl = container.querySelector("dl");

  // Iterate through all data attributes imported from KML ExtendedData
  for (const key in attributes) {
    const dt = document.createElement("dt");
    dt.style.fontWeight = "bold";
    dt.textContent = key;

    const dd = document.createElement("dd");
    dd.textContent = attributes[key];

    dl.appendChild(dt);
    dl.appendChild(dd);
  }
  return container;
}

datasetLayer.addListener('click', (event) => {
  if (event.features.length > 0) {
    const content = createCustomContent(event.features[0]);
    infoWindow.setContent(content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

আরও উন্নত ভিজ্যুয়ালাইজেশন কৌশলের জন্য, ডেটা ফিচারগুলোকে কীভাবে স্টাইল করতে হয় সে বিষয়ে ডেভেলপার ডকুমেন্টেশন দেখুন।

মাইগ্রেশন সুপারিশ: GeoJSON ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

যেসব ডেভেলপার KmlLayer থেকে GeoJSON এবং Data layer ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং-এ স্থানান্তরিত হচ্ছেন, তাদের জন্য এই নির্দেশিকাটি স্বয়ংক্রিয় KML ইন্টারঅ্যাকশন থেকে কাস্টম, ইভেন্ট-চালিত ইন্টারঅ্যাকশন এবং ডায়নামিক স্টাইলিং-এ রূপান্তরের পদ্ধতি ব্যাখ্যা করে।

প্রাথমিক সেটআপ

ইন্টারঅ্যাকশন প্রয়োগ করার আগে, আপনাকে অবশ্যই আপনার KML ডেটা GeoJSON-এ রূপান্তর করে ডেটা লেয়ারে লোড করতে হবে। ogr2ogr বা togeojson মতো টুল ব্যবহার এবং map.data.loadGeoJson() দিয়ে ম্যাপ ইনিশিয়ালাইজ করার বিস্তারিত তথ্যের জন্য “Migration Recommendation: Client-Side Rendering with GeoJSON” গাইডটি দেখুন।

১. স্বয়ংক্রিয় বনাম ম্যানুয়াল মিথস্ক্রিয়া

এই স্তরগুলোর মধ্যে একটি প্রধান পার্থক্য হলো ব্যবহারকারীর ইনপুট পরিচালনার পদ্ধতি:

KmlLayer : ফিচার ক্লিক স্বয়ংক্রিয়ভাবে পরিচালনা করে এবং KML সম্বলিত একটি InfoWindow প্রদর্শন করে। এবং ডেটা।
ডেটা লেয়ার : InfoWindow অবজেক্টগুলো স্বয়ংক্রিয়ভাবে প্রদর্শন করে না। ব্যবহারকারীর কার্যকলাপ শনাক্ত করতে আপনাকে ম্যানুয়ালি ইভেন্ট লিসেনার যোগ করতে হবে এবং ডেটা প্রদর্শনের জন্য কোড লিখতে হবে।

২. ইন্টারঅ্যাকশন ইভেন্ট পরিচালনা

GeoJSON ফিচারগুলোকে ইন্টারেক্টিভ করতে, map.data অবজেক্টের addListener() মেথডটি ব্যবহার করুন। সাধারণ ইভেন্টগুলোর মধ্যে রয়েছে:

click : তথ্য উইন্ডো বা নির্বাচন প্রক্রিয়া চালু করতে ব্যবহৃত হয়।
mouseover / mouseout : হোভার এফেক্ট এবং হাইলাইট করার জন্য ব্যবহৃত হয়।

৩. একটি ইনফোউইন্ডোতে এইচটিএমএল বিবরণ প্রদর্শন করা

যখন KML কে GeoJSON এ রূপান্তর করা হয়, তখন <description> ট্যাগটি (যার মধ্যে প্রায়শই HTML থাকে) সাধারণত description নামের একটি প্রপার্টিতে ম্যাপ করা হয়। আপনি feature.getProperty('description') ব্যবহার করে এই স্ট্রিংটি পেতে পারেন এবং এটিকে একটি সাধারণ google.maps.InfoWindow ভিতরে রেন্ডার করতে পারেন।

const infoWindow = new google.maps.InfoWindow();

// Handle clicks to show the HTML description
map.data.addListener('click', (event) => {
  // Access the 'description' property from the GeoJSON feature
  const htmlContent = event.feature.getProperty('description');

  if (htmlContent) {
    infoWindow.setContent(htmlContent);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
});

৪. কাস্টম ইনফোউইন্ডো এবং `ExtendedData`

যদি আপনার মূল KML ফাইলে <ExtendedData> ব্যবহার করা হয়ে থাকে, তাহলে এই নেম-ভ্যালু পেয়ারগুলো GeoJSON প্রপার্টিতে রূপান্তরিত হয়। যেহেতু ডেটা লেয়ারে এগুলোর জন্য কোনো ডিফল্ট UI নেই, তাই এগুলোর মধ্যে দিয়ে যাওয়া-আসা এবং প্রদর্শন করার জন্য আপনাকে একটি কাস্টম InfoWindow ইমপ্লিমেন্ট করতে হবে।

আপনি event.feature.getProperty('attribute_name') ব্যবহার করে এই অ্যাট্রিবিউটগুলো অ্যাক্সেস করতে পারেন এবং infoWindow.setContent() মেথডে পাস করার জন্য একটি কাস্টম HTML স্ট্রিং বা DOM এলিমেন্ট তৈরি করতে পারেন।

৫. ডাইনামিক স্টাইলিং (হোভার এফেক্ট)

ডেটা লেয়ার আপনাকে ইভেন্টের প্রতিক্রিয়ায় প্রোগ্রাম্যাটিকভাবে ফিচার স্টাইল আপডেট করার সুযোগ দেয়। কোনো ফিচারের চেহারা সাময়িকভাবে পরিবর্তন করতে (যেমন, হোভার করার সময়) overrideStyle() ব্যবহার করুন এবং গ্লোবাল স্টাইলে ফিরে যেতে revertStyle() ব্যবহার করুন।

// Set a base style for all features
map.data.setStyle({
  fillColor: 'blue',
  strokeWeight: 1
});

// Highlight feature on mouseover
map.data.addListener('mouseover', (event) => {
  map.data.revertStyle(); // Clear previous highlights
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

// Revert style on mouseout
map.data.addListener('mouseout', (event) => {
  map.data.revertStyle();
});

আরও বিস্তারিত বাস্তবায়ন তথ্যের জন্য, ডেটা লেয়ার: ইভেন্ট হ্যান্ডলিং এবং ডেটা লেয়ার: ডাইনামিক স্টাইলিং- এর ডকুমেন্টেশন দেখুন।

স্থানান্তরের পথ: তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

যেসব ডেভেলপার KmlLayer থেকে থার্ড-পার্টি সলিউশনে স্থানান্তরিত হচ্ছেন, তাদের জন্য এই নির্দেশিকাটি deck.gl এবং geoxml3 ব্যবহার করে মাউস ক্লিক এবং ডাইনামিক ইভেন্টের মতো ইন্টারেক্টিভ ডেটা পরিচালনার উপর আলোকপাত করে।

প্রাথমিক সেটআপ

ইন্টারঅ্যাকশন প্রয়োগ করার আগে, নিশ্চিত করুন যে আপনি "মাইগ্রেশন পাথ: থার্ড পার্টি লাইব্রেরি সহ ক্লায়েন্ট-সাইড রেন্ডারিং" গাইড থেকে সেটআপ ধাপগুলো অনুসরণ করেছেন। এর মধ্যে রয়েছে:

deck.gl : আপনার ম্যাপকে ভেক্টর ম্যাপ টাইপ ব্যবহার করার জন্য রূপান্তর করা হচ্ছে (ক্যানভাসের আবশ্যকতা)।
geoxml3 : আপনার নিজস্ব হোস্ট থেকে লাইব্রেরি স্ক্রিপ্টগুলি পরিবেশন করা এবং ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) পরিচালনা করা।

১. deck.gl-এর সাথে ইন্টারেক্টিভ ডেটা

deck.gl সরাসরি ইনপুট ফরম্যাট হিসেবে KML সমর্থন করে এবং KML ফাইলে প্রদত্ত তথ্যের উপর ভিত্তি করে ক্লিকের মতো ফিচার ইন্টারঅ্যাকশনগুলো স্বয়ংক্রিয়ভাবে পরিচালনা করে।

KMLLoader হ্যান্ডলিং : @loaders.gl/kml মডিউলটি ব্যবহার করে, জ্যামিতি এবং প্রোপার্টিগুলোকে এমন একটি ফরম্যাটে পার্স করা হয় যা deck.gl নেটিভভাবে ইন্টারঅ্যাকশন ইভেন্ট ট্রিগার করতে ব্যবহার করে।
ফিচার ক্লিক : যখন কোনো ফিচারে ক্লিক করা হয়, তখন deck.gl ইভেন্টটি ক্যাপচার করতে পারে এবং এর সাথে সম্পর্কিত মেটাডেটা (যেমন <name> বা <description> ) প্রদর্শন করতে পারে।
উদাহরণ : deckgl-kml-updated নমুনাটি রিয়েল-টাইম KML রেন্ডারিং প্রদর্শন করে, যেখানে ভূমিকম্প চিহ্নিতকারীগুলির উপর মাউস রাখলে ঘটনার বিস্তারিত তথ্য দেখা যায়।

২. geoxml3 সহ ইন্টারেক্টিভ ডেটা

geoxml3 ব্রাউজারে স্থানীয়ভাবে KML ফাইলটি পার্স করে, স্টাইল সংক্রান্ত তথ্য বের করে এবং স্ট্যান্ডার্ড গুগল ম্যাপস এপিআই অবজেক্ট তৈরি করে, যেগুলো তাদের ইন্টারঅ্যাকটিভিটি বজায় রাখে।

নেটিভ স্টাইল এক্সট্র্যাকশন : লাইব্রেরিটি তৈরি করা মার্কার, পলিলাইন এবং পলিগনগুলিতে প্রয়োগ করার জন্য KML থেকে <Style> এবং <StyleMap> এলিমেন্টগুলি গ্রহণ করে।
ক্লিক হ্যান্ডলার : ডিফল্টরূপে, geoxml3 এই অবজেক্টগুলোর জন্য ক্লিক হ্যান্ডলার প্রদান করে। এছাড়াও, আপনি আপনার নিজস্ব সিলেকশন লজিক বা সাইডবার আপডেট বাস্তবায়নের জন্য পার্সার ইনস্ট্যানসিয়েশনের সময় কাস্টম কলব্যাক ফাংশন ( createMarker , createOverlay ) সংজ্ঞায়িত করতে পারেন।
উদাহরণ: এই উদাহরণটি দেখায় কিভাবে geoxml3 ব্যবহার করে KML রেন্ডার করতে হয়, যেখানে ইন্টারঅ্যাকশন সহ বৃত্তাকার মার্কারের মতো কাস্টমাইজেশন রয়েছে, যেমন ভূমিকম্পের তথ্য প্রদর্শনের জন্য মার্কারগুলিতে ক্লিক করা।
ব্যবহারের ধরণ :

var myParser = new geoXML3.parser({
  map: map,
  processStyles: true, // Automatically handle KML styles
  afterParse: function(doc) {
    // Code to run after the KML is fully parsed
  }
});
myParser.parse('interactive_data.kml');

ছবি সহ KML ফাইল

যেসব ডেভেলপার স্যাটেলাইট থেকে প্রাপ্ত ডেটাযুক্ত মানচিত্র, আবহাওয়ার ধরণ বা ঐতিহাসিক নকশার মতো চিত্রাবলী প্রদর্শনের জন্য KmlLayer ব্যবহার করেন, তাদের জন্য এই নির্দেশিকাটিতে GroundOverlays বা তৃতীয় পক্ষের পার্সারে স্থানান্তরের পথরেখা তুলে ধরা হয়েছে।

মাইগ্রেশন সুপারিশ: ম্যাপস জাভাস্ক্রিপ্ট এপিআই গ্রাউন্ডওভারলে

ইমেজ স্থানান্তরের জন্য প্রস্তাবিত উপায় হলো google.maps.GroundOverlay ক্লাসটি ব্যবহার করা। এর মাধ্যমে আপনি সরাসরি আপনার কোডে নির্দিষ্ট ভৌগোলিক স্থানাঙ্কে ম্যাপের উপর একটি ইমেজ স্থাপন করতে পারবেন।

১. বাস্তবায়ন

সীমানা নির্ধারণের জন্য KML ফাইলের উপর নির্ভর করার পরিবর্তে, আপনি ছবির URL এবং মানচিত্রের আয়তক্ষেত্রটিকে প্রতিনিধিত্বকারী একটি LatLngBounds অবজেক্ট নির্দিষ্ট করে দেন।

ডকুমেন্টেশন : গ্রাউন্ড ওভারলে গাইড ।
ইমেজ প্রস্তুতি : যদি আপনার ইমেজটি জিওরেফারেন্সড হয় কিন্তু সঠিক প্রজেকশনে (EPSG:4326) না থাকে, তাহলে আপনি Maps JS API-এর সাথে ব্যবহারের জন্য ইমেজটিকে ওয়ার্প করতে ওপেন-সোর্স টুল gdalwarp ব্যবহার করতে পারেন।

gdalwarp -t_srs EPSG:4326 image.jp2 image.jpg

মাইগ্রেশন পথ: তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে

আপনার কর্মপ্রক্রিয়ায় যদি ডেটা KML ফরম্যাটে রাখার প্রয়োজন হয়, তাহলে ইমেজেরি ওভারলে রেন্ডার করার জন্য geoxml3 বা deck.gl মতো থার্ড-পার্টি লাইব্রেরি ব্যবহার করা যেতে পারে।

সতর্কীকরণ: এই থার্ড-পার্টি সমাধানগুলো গুগল দ্বারা সমর্থিত নয় । তবে, এগুলো পরীক্ষা করা হয়েছে এবং বেশিরভাগ ক্ষেত্রেই কাজ করার কথা।

১. জিওএক্সএমএল৩

ব্রাউজারে স্থানীয়ভাবে সাধারণ GroundOverlay এলিমেন্টগুলো পার্স করে সেগুলোকে গুগল ম্যাপস এপিআই অবজেক্টে রূপান্তর করার জন্য geoxml3 একটি ভালো বিকল্প।

ব্যবহারের উদাহরণ:

const geoXmlParser = new geoXML3.parser({
    map: map,
    afterParse: function(doc) {
        console.log("Parsing complete. Number of documents: " + doc.length);
        const bounds = doc[0].gbounds;
        if (bounds && !bounds.isEmpty()) {
           map.fitBounds(bounds);
        }
    },
    createOverlay: function(groundOverlayData) {
        // Extract bounds and URL from parsed KML data
        const imageUrl = groundOverlayData.icon.href;
        const imageBounds = {
            north: parseFloat(groundOverlayData.latLonBox.north),
            south: parseFloat(groundOverlayData.latLonBox.south),
            east: parseFloat(groundOverlayData.latLonBox.east),
            west: parseFloat(groundOverlayData.latLonBox.west)
        };

        // Create the Google Maps GroundOverlay
        const nativeOverlay = new google.maps.GroundOverlay(imageUrl, imageBounds);
        nativeOverlay.setMap(map);
    }
});
geoXmlParser.parse('your_file.kml');

2. deck.gl

যদিও deck.gl এর স্ট্যান্ডার্ড GeoJsonLayer ভেক্টর ডেটা পরিচালনা করে, এটি BitmapLayer ব্যবহার করে ম্যানুয়াল বাস্তবায়নের মাধ্যমে GroundOverlays সমর্থন করতে পারে।

এই পদ্ধতিতে KMLLoader ব্যবহার করে ফাইলটি পার্স করা হয় এবং তারপর KML ডেটা থেকে সংগৃহীত ছবির URL ও স্থানাঙ্ক দিয়ে একটি BitmapLayer সুস্পষ্টভাবে সংজ্ঞায়িত করা হয়।

পূর্বশর্ত: deck.gl ব্যবহার করার জন্য ভেক্টর ম্যাপ টাইপ প্রয়োজন।
ডকুমেন্টেশন: deck.gl বিটম্যাপ লেয়ার

উন্নত কেস: gdal2tiles ব্যবহার করে টাইল পিরামিড

ইমেজারি টাইল পিরামিড ধারণকারী জটিল KML ফাইলগুলির ক্ষেত্রে মাইগ্রেশন আরও কঠিন এবং এর জন্য ইমেজারি ডেটা এক্সট্র্যাক্ট করার প্রয়োজন হয়।

টুল gdal2tiles একটি KMZ পিরামিড থেকে ডেটা এক্সট্র্যাক্ট করতে পারে এবং টাইলসগুলো প্রদর্শন করার জন্য স্ট্যান্ডার্ড ম্যাপস জাভাস্ক্রিপ্ট এপিআই কোড তৈরি করতে পারে। উল্লেখ্য যে, বিদ্যমান কোনো ম্যাপে অন্তর্ভুক্ত করার জন্য চূড়ান্ত ফলাফলে ম্যানুয়াল পরিবর্তনের প্রয়োজন হতে পারে।

gdal2tiles -z 10- -n -u https://yourhost.com/tiles/ -w google input.kmz

নেটওয়ার্ক লিঙ্ক সহ KML ফাইল

নেটওয়ার্ক লিঙ্কের মাধ্যমে KML ফাইল পরিচালনা করার জন্য, KmlLayer এর স্বয়ংক্রিয় ও ক্লাউড-ভিত্তিক ডেটা সংগ্রহের পদ্ধতি থেকে সরে এসে আরও সুস্পষ্ট ডেটা ব্যবস্থাপনা কৌশল গ্রহণ করা প্রয়োজন।

সমর্থিত সমাধান: ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং (ডিডিএস)

যেহেতু গুগল ম্যাপস প্ল্যাটফর্ম ডেটাসেটগুলো স্বাভাবিকভাবে <NetworkLink> এলিমেন্টগুলো পার্স করে না, তাই আপনাকে আপনার ডেটা স্ট্রাকচারের উপর ভিত্তি করে একটি মাইগ্রেশন কৌশল বেছে নিতে হবে:

কৌশল A: স্বতন্ত্র ডেটাসেট (ব্যবহারকারী-নিয়ন্ত্রিত লেয়ারের জন্য সেরা) প্রতিটি KML ফাইল, যা পূর্বে একটি নেটওয়ার্ক লিঙ্ক ছিল, সেটিকে Google Cloud Console-এ তার নিজস্ব স্বতন্ত্র ডেটাসেট হিসেবে আপলোড করুন। এরপর আপনি জাভাস্ক্রিপ্ট ব্যবহার করে প্রয়োজন অনুযায়ী map.getDatasetFeatureLayer(datasetId) কল করে এবং এর ভিজিবিলিটি বা স্টাইল সামঞ্জস্য করে এই লেয়ারগুলিকে ডায়নামিকভাবে লোড ও প্রদর্শন করতে পারবেন।
কৌশল B: ফ্ল্যাটেনড KML ফাইল (উচ্চ-পারফরম্যান্স প্রদর্শনের জন্য সেরা) ডেটাসেট হিসাবে আপলোড করার আগে আপনার বিভিন্ন নেটওয়ার্ক-লিঙ্কযুক্ত ফাইলগুলির সমস্ত বৈশিষ্ট্যকে একটি একক, ব্যাপক KML ফাইলে একত্রিত করুন। এরপর আপনি ফিচার অ্যাট্রিবিউটের উপর ভিত্তি করে ডায়নামিক স্টাইলিং ব্যবহার করে তাৎক্ষণিকভাবে নির্দিষ্ট ডেটা সাবসেট ফিল্টার এবং প্রদর্শন করতে পারবেন।

ডাইনামিক ডেটা আপডেট করা: নেটওয়ার্ক লিঙ্কের 'অটো-রিফ্রেশ' আচরণ অনুকরণ করতে, যখনই সোর্স ডেটা পরিবর্তিত হবে, ডেটাসেটস এপিআই (Datasets API) ব্যবহার করে প্রোগ্রাম্যাটিকভাবে আপনার ডেটাসেটের একটি নতুন সংস্করণ আপলোড করুন।

ওপেন-সোর্স সমাধান: deck.gl এবং geoxml3

deck.gl বা geoxml3 কোনোটিই KML <NetworkLink> এলিমেন্ট পার্সিং এবং স্বয়ংক্রিয়ভাবে ফেচ করার জন্য শক্তিশালী সাপোর্ট প্রদান করে না।

deck.gl

deck.gl togeojson উপর ভিত্তি করে নির্মিত KMLLoader ব্যবহার করে, যা স্পষ্টভাবে NetworkLinks সমর্থন করে না ।

কেন এটি একটি ভালো সমাধান নয়: পার্সারটিকে একটি সিনক্রোনাস, "ঝামেলাহীন" কনভার্টার হিসেবে ডিজাইন করা হয়েছে, যা নির্ভরযোগ্যতা এবং সরলতা নিশ্চিত করতে নিজের নেটওয়ার্ক রিকোয়েস্ট করা এড়িয়ে চলে। যদি আপনার অ্যাপ্লিকেশন এমন KML ফাইলের উপর নির্ভর করে যা একাধিক অন্য URL-কে নির্দেশ করে, তাহলে deck.gl স্বয়ংক্রিয়ভাবে সেগুলোকে রিজলভ করবে না।

জিওএক্সএমএল৩

যদিও maps JS API-এর জন্য KML পার্স করতে geoxml3 তৈরি করা হয়েছিল, নেটওয়ার্ক লিঙ্কের ক্ষেত্রে এর সমর্থন পরীক্ষামূলক এবং রক্ষণাবেক্ষণহীন ।

কেন এটি একটি ভালো সমাধান নয়: এই কার্যকারিতাটি শুধুমাত্র একটি নির্দিষ্ট "network_link" ব্রাঞ্চে বিদ্যমান, যা পুরোনো এবং ভালোভাবে পরীক্ষিত নয়। প্রোডাকশন ডেটা মাইগ্রেশনের জন্য এটি ব্যবহার করা নিরুৎসাহিত করা হয়, কারণ এটি জটিল লিঙ্ক কাঠামো বা CORS-এর মতো আধুনিক নিরাপত্তা প্রয়োজনীয়তাগুলো সামলাতে ব্যর্থ হতে পারে।

সারসংক্ষেপ সুপারিশ

একটি নির্ভরযোগ্য মাইগ্রেশনের জন্য, ডেভেলপারদের নেটওয়ার্ক লিঙ্কযুক্ত ফাইলগুলির ক্ষেত্রে থার্ড-পার্টি পার্সার ব্যবহার করা থেকে বিরত থাকা উচিত এবং এর পরিবর্তে ডেটাসেটস এপিআই (Datasets API) ব্যবহার করে ডেটা-ফেচিং লজিকটি পুনর্নির্মাণ করা উচিত । এটি নিশ্চিত করে যে আপনার ডেটা রক্ষণাবেক্ষণহীন ক্লায়েন্ট-সাইড পার্সারের উপর নির্ভর না করে, গুগল ম্যাপস প্ল্যাটফর্মের অবকাঠামোর মধ্যেই নিরাপদে পরিচালিত হচ্ছে।

স্ক্রিন ওভারলে প্রদর্শন করতে KML ব্যবহার করুন

যেসব ডেভেলপার KmlLayer থেকে ডেটা-ড্রাইভেন স্টাইলিং (DDS)-এর মতো আধুনিক বিকল্পে স্থানান্তরিত হচ্ছেন, তাদের জন্য এটি মনে রাখা গুরুত্বপূর্ণ যে ডেটাসেটে স্ক্রিন ওভারলে সমর্থিত নয় । ম্যাপের উপরে স্থির ছবি, লোগো বা লিজেন্ড প্রদর্শনের একই প্রভাব অর্জন করতে, আপনাকে অবশ্যই ম্যাপস জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে কাস্টম কন্ট্রোল তৈরি করতে হবে।

১. আপনার KML ফাইলে কী কী দেখতে হবে

একটি সমতুল্য কাস্টম কন্ট্রোল তৈরি করতে, আপনার KML ফাইলের <ScreenOverlay> এলিমেন্টে নিম্নলিখিত মূল অ্যাট্রিবিউটগুলো পরীক্ষা করুন:

<Icon><href> : আপনি যে ছবিটি প্রদর্শন করতে চান তার URL।
<screenXY> : এটি নির্ধারণ করে যে স্ক্রিনে ওভারলেটি কোথায় অবস্থান করবে।
- x=0, y=1 (ভগ্নাংশ) উপরের বাম দিককে নির্দেশ করে।
- x=1, y=1 উপরের ডান দিককে নির্দেশ করে।
- x=0, y=0 নিচের বাম দিককে নির্দেশ করে।
- x=1, y=0 নিচের ডান দিককে নির্দেশ করে।
<size> : ওভারলেটির প্রস্থ এবং উচ্চতা নির্ধারণ করে।
<rotation> : ছবিটি ঘোরানো হবে কিনা তা নির্দেশ করে।

২. বাস্তবায়ন: একটি কাস্টম কন্ট্রোল তৈরি করা

কাস্টম কন্ট্রোল হলো মূলত একটি সাধারণ HTML এলিমেন্ট (যেমন <div> বা <img> ) যাকে আপনি ম্যাপের পূর্বনির্ধারিত অবস্থানগুলোর কোনো একটিতে "পুশ" করেন।

KML পজিশনগুলোকে `ControlPosition` ম্যাপ করা

Maps JavaScript API কন্ট্রোলগুলিকে অ্যাঙ্কর করার জন্য ControlPosition enum ব্যবহার করে। আপনার KML <screenXY> কে উপযুক্ত JS API কনস্ট্যান্টের সাথে ম্যাপ করতে নিচের টেবিলটি ব্যবহার করুন:

KML অবস্থান ( `screenXY` )	JS API `ControlPosition`
উপরের বাম ( `x:0, y:1` )	`TOP_LEFT` (লেগ্যাসি) অথবা `BLOCK_START_INLINE_START` (লজিক্যাল)
উপরের ডানদিকে ( `x:1, y:1` )	`TOP_RIGHT` অথবা `BLOCK_START_INLINE_END`
নীচে বাম ( `x:0, y:0` )	`BOTTOM_LEFT` অথবা `BLOCK_END_INLINE_START`
নীচে ডানদিকে ( `x:1, y:0` )	`BOTTOM_RIGHT` অথবা `BLOCK_END_INLINE_END`

৩. মাইগ্রেশন উদাহরণ: স্থির লোগো ওভারলে

নিম্নলিখিত উদাহরণটি মানচিত্রের উপরের ডানদিকে অবস্থিত একটি KML ScreenOverlay লোগোর অনুকরণ করে।

সিএসএস স্টাইলিং

আপনার 'ওভারলে'-র আকার ও চেহারা নির্ধারণ করতে CSS ব্যবহার করুন।

#logo-control {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  margin: 10px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

#logo-control img {
  width: 150px; /* Equivalent to KML <size> */
  display: block;
}

জাভাস্ক্রিপ্ট বাস্তবায়ন

এলিমেন্টটি map.controls অ্যারেতে যোগ করুন।

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 41.85, lng: -87.65 },
  });

  // 1. Create the container for the overlay
  const logoControlDiv = document.createElement("div");
  logoControlDiv.id = "logo-control";

  // 2. Create the image (KML <Icon>)
  const logoImage = document.createElement("img");
  logoImage.src = "https://example.com/logo.png";
  logoImage.alt = "Company Logo";

  logoControlDiv.appendChild(logoImage);

  // 3. Position the control (KML <screenXY>)
  // In this case, we use TOP_RIGHT
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(logoControlDiv);
}

ভূমিকা

সীমানা/প্রান্তর/আগ্রহের এলাকার তথ্য শৈলীবদ্ধ করার জন্য KML ফাইল

স্থানান্তর সুপারিশ: সীমানার জন্য ডেটা-ভিত্তিক স্টাইলিং

উপলব্ধ বৈশিষ্ট্যের ধরণ

কীভাবে একটি এলাকা হাইলাইট করবেন

একটি এলাকায় প্যানিং সীমাবদ্ধ করা

সারসংক্ষেপ অভিবাসন বাস্তবায়ন

ভেক্টর ডেটা সহ KML ফাইল (পয়েন্ট/পলিলাইন/সীমানা/বহুভুজ)

মাইগ্রেশন সুপারিশ: ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং

১. সেটআপ এবং আপলোড

২. ডেটাতে ভিউপোর্ট সেট করা

৩. ফিচার অ্যাট্রিবিউট থেকে স্টাইলিং

উদাহরণ: অ্যাট্রিবিউট ব্যবহার করে ফাংশনের স্টাইলিং

মাইগ্রেশন সুপারিশ: GeoJSON ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

১. KML কে GeoJSON এ রূপান্তর করুন

২. ডেটাতে ভিউপোর্ট সেট করা

৩. ফিচার অ্যাট্রিবিউট থেকে স্টাইলিং

উদাহরণ: স্টাইলিং ফাংশন এবং ভিউপোর্ট অ্যাডজাস্টমেন্ট

স্থানান্তরের পথ: তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

1. deck.gl

২. জিওএক্সএমএল৩

ইন্টারেক্টিভ উপাদান সহ KML ফাইল

মাইগ্রেশন সুপারিশ: ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং

প্রাথমিক সেটআপ

১. ইন্টারঅ্যাকশন ইভেন্ট পরিচালনা

২. ডাইনামিক স্টাইলিং (হোভার এফেক্ট)

৩. description অ্যাট্রিবিউট থেকে HTML প্রদর্শন করা

৪. ExtendedData সহ কাস্টম তথ্যউইন্ডো

মাইগ্রেশন সুপারিশ: GeoJSON ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

প্রাথমিক সেটআপ

১. স্বয়ংক্রিয় বনাম ম্যানুয়াল মিথস্ক্রিয়া

২. ইন্টারঅ্যাকশন ইভেন্ট পরিচালনা

৩. একটি ইনফোউইন্ডোতে এইচটিএমএল বিবরণ প্রদর্শন করা

৪. কাস্টম ইনফোউইন্ডো এবং ExtendedData

৫. ডাইনামিক স্টাইলিং (হোভার এফেক্ট)

স্থানান্তরের পথ: তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে ক্লায়েন্ট-সাইড রেন্ডারিং

প্রাথমিক সেটআপ

১. deck.gl-এর সাথে ইন্টারেক্টিভ ডেটা

২. geoxml3 সহ ইন্টারেক্টিভ ডেটা

ছবি সহ KML ফাইল

মাইগ্রেশন সুপারিশ: ম্যাপস জাভাস্ক্রিপ্ট এপিআই গ্রাউন্ডওভারলে

১. বাস্তবায়ন

মাইগ্রেশন পথ: তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করে

১. জিওএক্সএমএল৩

2. deck.gl

উন্নত কেস: gdal2tiles ব্যবহার করে টাইল পিরামিড

নেটওয়ার্ক লিঙ্ক সহ KML ফাইল

সমর্থিত সমাধান: ডেটাসেটের জন্য ডেটা-চালিত স্টাইলিং (ডিডিএস)

ওপেন-সোর্স সমাধান: deck.gl এবং geoxml3

deck.gl

জিওএক্সএমএল৩

সারসংক্ষেপ সুপারিশ

স্ক্রিন ওভারলে প্রদর্শন করতে KML ব্যবহার করুন

১. আপনার KML ফাইলে কী কী দেখতে হবে

২. বাস্তবায়ন: একটি কাস্টম কন্ট্রোল তৈরি করা

KML পজিশনগুলোকে ControlPosition ম্যাপ করা

৩. মাইগ্রেশন উদাহরণ: স্থির লোগো ওভারলে

সিএসএস স্টাইলিং

জাভাস্ক্রিপ্ট বাস্তবায়ন

আরও তথ্য

৩. `description` অ্যাট্রিবিউট থেকে HTML প্রদর্শন করা

৪. `ExtendedData` সহ কাস্টম তথ্যউইন্ডো

৪. কাস্টম ইনফোউইন্ডো এবং `ExtendedData`

KML পজিশনগুলোকে `ControlPosition` ম্যাপ করা