KML ডেটা প্রদর্শন করুন

সংক্ষিপ্ত বিবরণ

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

নিচের অংশে ম্যাপ এবং সাইডবার তৈরি করার জন্য প্রয়োজনীয় সম্পূর্ণ কোডটি দেখানো হয়েছে। 

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

নিজেই চেষ্টা করে দেখুন

কোড উইন্ডোর উপরের ডান কোণায় থাকা <> আইকনটিতে ক্লিক করে আপনি JSFiddle-এ এই কোডটি নিয়ে পরীক্ষা-নিরীক্ষা করতে পারেন।

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

শুরু করা

এই টিউটোরিয়ালের জন্য ম্যাপ এবং সাইডবার তৈরির ধাপগুলো হলো:

  1. KML ফাইল সেট আপ করা
  2. KMLlayer প্রদর্শন করা হচ্ছে
  3. সাইডবারে ডেটা প্রদর্শন করা

আমদানির জন্য KML ফাইল প্রস্তুত করা

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

আপনি যদি সবে শিখতে শুরু করেন এবং আপনার কাছে কোনো KML ফাইল না থাকে, তাহলে আপনি করতে পারেন:

  • এই টিউটোরিয়ালের জন্য নিম্নলিখিত KML ফাইলটি ব্যবহার করুন:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • ওয়েবে একটি KML ফাইল খুঁজুন। আপনি গুগলের filetype সার্চ অপারেটর ব্যবহার করতে পারেন।

    velodromes জন্য যেকোনো সার্চ টার্ম ব্যবহার করুন, অথবা সমস্ত KML ফাইল খুঁজে পেতে টার্মটি সম্পূর্ণ বাদ দিন।

আপনি যদি নিজের ফাইল তৈরি করেন, তাহলে এই উদাহরণের কোডটি ধরে নেয় যে:

  • আপনি ফাইলটি ইন্টারনেটে সর্বজনীনভাবে হোস্ট করেছেন। যেসব অ্যাপ্লিকেশন KMLLayer এ KML লোড করে, তাদের সকলের জন্য এটি একটি আবশ্যিক শর্ত, যাতে গুগলের সার্ভারগুলো মানচিত্রে প্রদর্শনের জন্য বিষয়বস্তুটি খুঁজে পেতে ও পুনরুদ্ধার করতে পারে।
  • ফাইলটি কোনো পাসওয়ার্ড-সুরক্ষিত পৃষ্ঠায় নেই।
  • আপনার ফিচারগুলিতে তথ্য উইন্ডোর বিষয়বস্তু থাকে। আপনি এই বিষয়বস্তুটি একটি description এলিমেন্টের মধ্যে রাখতে পারেন, অথবা একটি ExtendedData এলিমেন্ট এবং এনটিটি রিপ্লেসমেন্ট ব্যবহার করে অন্তর্ভুক্ত করতে পারেন (আরও তথ্যের জন্য নিচে পড়ুন)। উভয় পদ্ধতিই ফিচারটির infoWindowHtml প্রপার্টি হিসেবে অ্যাক্সেসযোগ্য।

বর্ধিত ডেটা উপাদান

এই টিউটোরিয়ালের KML ফাইলটিতে একটি ExtendedData এলিমেন্টের মধ্যে ফিচারের তথ্য অন্তর্ভুক্ত করা হয়েছে। এই তথ্যটিকে ফিচারের বিবরণে নিয়ে আসার জন্য, এনটিটি রিপ্লেসমেন্ট (entity replacement ) ব্যবহার করুন, যা মূলত BalloonStyle ট্যাগের একটি ভ্যারিয়েবল।

নিচের সারণিতে এই অংশের কোড ব্যাখ্যা করা হয়েছে।

কোড এবং বিবরণ 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

KML ফাইলটিতে একটিমাত্র Style এলিমেন্ট রয়েছে যা সমস্ত প্লেসমার্কে প্রয়োগ করা হয়।
এই Style এলিমেন্টটি BalloonStyle এর text এলিমেন্টে #[video] ভ্যালুটি অ্যাসাইন করে।
$[x] ফরম্যাটটি KML পার্সারকে video নামের একটি Data এলিমেন্ট খুঁজতে এবং সেটিকে বেলুন টেক্সট হিসেবে ব্যবহার করতে নির্দেশ দেয়। 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

প্রতিটি Placemark একটি ExtendedData এলিমেন্ট থাকে, যা Data এলিমেন্টটিকে ধারণ করে। লক্ষ্য করুন যে, প্রতিটি Placemark একটিমাত্র Data এলিমেন্ট রয়েছে, যার name অ্যাট্রিবিউটের নাম হলো video ।
এই টিউটোরিয়ালের ফাইলটিতে প্রতিটি প্লেসমার্কের বেলুন টেক্সটের ভ্যালু হিসেবে এমবেড করা ইউটিউব ভিডিও ব্যবহার করা হয়েছে।

আপনি KML ডকুমেন্টেশনের ' কাস্টম ডেটা যোগ করা' অধ্যায়ে এনটিটি প্রতিস্থাপন সম্পর্কে আরও জানতে পারবেন।

KMLLayer প্রদর্শন করা হচ্ছে

মানচিত্র প্রারম্ভিকীকরণ করা হচ্ছে

এই সারণিতে এই অংশের কোড ব্যাখ্যা করা হয়েছে।

কোড এবং বিবরণ 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

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

KMLLayer তৈরি করা

এই সারণিতে KMLLayer তৈরি করার কোডটি ব্যাখ্যা করা হয়েছে।

কোড এবং বিবরণ 
var kmlLayer = new google.maps.KmlLayer();

আপনার KML প্রদর্শনের জন্য একটি নতুন KMLLayer অবজেক্ট তৈরি করে। 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

KMLLayer কনস্ট্রাক্টর আপনার KML ফাইলের URL নির্ধারণ করে। এটি KMLLayer অবজেক্টের জন্য এমন কিছু প্রোপার্টিও সংজ্ঞায়িত করে, যেগুলো নিম্নলিখিত কাজগুলো করে:
  • লেয়ারটিকে নির্দেশ দেয় যেন ক্লিক করা হলে কোনো তথ্য উইন্ডো প্রদর্শন না করা হয়।
  • লেয়ারের বিষয়বস্তুর বাউন্ডিং বক্সে ম্যাপকে কেন্দ্র করে জুম করতে নির্দেশ দেয়।
  • পূর্বে তৈরি করা Map অবজেক্টটিতে ম্যাপটি সেট করে।
Maps JavaScript API রেফারেন্স গাইডে এই লেয়ারের জন্য উপলব্ধ সমস্ত অপশন তালিকাভুক্ত করা আছে।
বেস ম্যাপের উপরে একটি লেয়ার হিসেবে KML ফাইলের বিষয়বস্তু প্রদর্শন করতে আপনার HTML ফাইলটি লোড করুন। তবে, আপাতত কোনো ফিচারে ক্লিক করলে কোনো কাজ হবে না।

সাইডবারে ডেটা প্রদর্শন করা

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

  • KMLLayer-এর যেকোনো ফিচারে ক্লিক ইভেন্টের জন্য অপেক্ষা করা হচ্ছে।
  • ক্লিক করা ফিচারটির ডেটা সংগ্রহ করা হচ্ছে।
  • সেই ডেটা সাইডবারে লেখা হচ্ছে।

একটি ইভেন্ট লিসেনার যোগ করা

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

নিচের সারণিতে এই অংশের কোড ব্যাখ্যা করা হয়েছে।

কোড এবং বিবরণ 
kmlLayer.addListener('click', function(event) {});

kmlLayer.addListener ইভেন্ট লিসেনারটি নিম্নলিখিত বিষয়গুলির উপর আলোকপাত করে:
  • কোন ধরনের ইভেন্টের জন্য লিসেন করতে হবে। এই টিউটোরিয়ালে, সেটি হলো click ইভেন্ট।
  • ইভেন্টটি ঘটলে যে ফাংশনটি কল করা হবে।
আপনি ডেভেলপার গাইড- এ ইভেন্টগুলো সম্পর্কে আরও জানতে পারবেন।

সাইডবারে KML ফিচার ডেটা লেখা

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

নিচের সারণিতে এই অংশের কোড ব্যাখ্যা করা হয়েছে।

কোড এবং বিবরণ 
var content = event.featureData.infoWindowHtml;

তথ্য উইন্ডোর বিষয়বস্তু একটি ভেরিয়েবলে লেখে। 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

যে div টিতে লিখতে হবে তা শনাক্ত করে এবং এর ভেতরের HTML-কে ফিচারটির কন্টেন্ট দিয়ে প্রতিস্থাপন করে। 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

এই কোড লাইনগুলো addListener কনস্ট্রাক্টরের ভেতরের ফাংশন হয়ে যায়।

এখন থেকে প্রতিবার ম্যাপের কোনো KML ফিচারে ক্লিক করলে, সাইডবারটি আপডেট হয়ে সেটির তথ্য উইন্ডোর বিষয়বস্তু প্রদর্শন করবে।

আরও তথ্য

KML ফাইল ব্যবহার সম্পর্কে আরও পড়ুন।