বিমানবন্দরে উন্নত ন্যাভিগেশন, বিমানবন্দরে উন্নত নেভিগেশন

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

এটি যেভাবে এটি সম্পন্ন করে তা হলো:

বিমানবন্দর/স্থান অনুসন্ধান : ব্যবহারকারীরা গুগল প্লেসেস অটোকমপ্লিট ইনপুট ব্যবহার করে একটি প্রধান স্থান (যেমন, "ইন্দিরা গান্ধী আন্তর্জাতিক বিমানবন্দর") অনুসন্ধান করা শুরু করেন, যা শুধুমাত্র ভারতের জন্য সীমাবদ্ধ।

উপ-অবস্থান আবিষ্কার : একবার একটি প্রাথমিক অবস্থান নির্বাচন করা হলে, স্ক্রিপ্টটি Google Places API ব্যবহার করে তার বিবরণ সংগ্রহ করে, যার মধ্যে গুরুত্বপূর্ণভাবে সেই স্থানের সাথে সম্পর্কিত তালিকাভুক্ত যেকোনো "উপ-গন্তব্য" অন্তর্ভুক্ত থাকে (যেমন টার্মিনাল ১, টার্মিনাল ৩, নির্দিষ্ট গেট ইত্যাদি, যদি Google-এর ডেটাতে উপলব্ধ থাকে)।

ভিজ্যুয়াল ম্যাপিং : স্ক্রিপ্টটি মূল অবস্থান এবং এর উপ-গন্তব্যগুলির স্থানাঙ্ক খুঁজে বের করার জন্য জিওকোডিং এপিআই ব্যবহার করে।

এরপর এটি মূল অবস্থানটি প্রদর্শন করে এবং চিহ্নিত প্রতিটি উপ-গন্তব্যের জন্য মানচিত্রে স্বতন্ত্র, ক্লিকযোগ্য মার্কার (নীল বৃত্ত) স্থাপন করে।

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

এয়ারপোর্ট নেভিগেশন অ্যাপে গুগল ম্যাপস প্ল্যাটফর্ম এপিআই

এই ডকুমেন্টটিতে প্রদত্ত "Navigate to Airport" ডেমো অ্যাপ্লিকেশনে ব্যবহৃত প্রধান গুগল ম্যাপস প্ল্যাটফর্ম এপিআই এবং তাদের প্যারামিটারগুলো ব্যাখ্যা করা হয়েছে। অ্যাপটি ম্যাপ প্রদর্শন, স্থান অনুসন্ধান, স্থানের বিস্তারিত তথ্য এবং উন্নত অবস্থান-সংক্রান্ত তথ্য প্রদানের জন্য বিভিন্ন পরিষেবা ব্যবহার করে।

১. মানচিত্র প্রারম্ভিকীকরণ এবং প্রদর্শন

অ্যাপ্লিকেশনটির ভিত্তি হলো স্বয়ং ইন্টারেক্টিভ মানচিত্রটি।

• ব্যবহৃত এপিআই: google.maps.Map (ম্যাপস জাভাস্ক্রিপ্ট এপিআই থেকে)
• উদ্দেশ্য: ওয়েবপেজে ইন্টারেক্টিভ মানচিত্র তৈরি ও প্রদর্শন করা।
• মূল পরামিতি:
  • center : মানচিত্রের প্রাথমিক ভৌগোলিক কেন্দ্র নির্ধারণ করে। এই অ্যাপে, এটি প্রাথমিকভাবে দিল্লির স্থানাঙ্কে ( { lat: 28.461835685621395, lng: 77.05004035761647 } ) সেট করা আছে।
  • zoom : মানচিত্রের প্রাথমিক জুম স্তর নির্ধারণ করে। DEFAULT_ZOOM_LEVEL (15) একটি ক্লোজ-আপ ভিউয়ের জন্য ব্যবহৃত হয়।
  • mapId : গুগল ক্লাউড কনসোলে কনফিগার করা ম্যাপ স্টাইলের একটি অনন্য শনাক্তকারী।

২. স্থান অনুসন্ধান এবং স্বয়ংক্রিয় পূরণ

সার্চ বারের কার্যকারিতাটি প্লেসেস এপিআই (Places API) দ্বারা চালিত।

• ব্যবহৃত এপিআই: google.maps.places.Autocomplete (ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর প্লেসেস লাইব্রেরি থেকে)
• উদ্দেশ্য: ব্যবহারকারী টাইপ করার সাথে সাথে ভৌগোলিক অনুসন্ধানের জন্য ভবিষ্যদ্বাণীমূলক টেক্সট কমপ্লিশন প্রদান করে, যা বিমানবন্দরের মতো প্রাসঙ্গিক স্থানের পরামর্শ দেয়।
• মূল পরামিতি:
  • input : এইচটিএমএল ইনপুট এলিমেন্ট ( #search-input ) যেখানে ব্যবহারকারী তার অনুসন্ধান টাইপ করেন।
  • componentRestrictions : অনুসন্ধানের ফলাফল একটি নির্দিষ্ট দেশে সীমাবদ্ধ করে। এখানে, { country: 'in' } ফলাফলকে ভারতে সীমাবদ্ধ করে।
  • fields : নির্বাচিত স্থানের জন্য যে ডেটা ক্ষেত্রগুলি ফেরত দেওয়া হবে তা নির্দিষ্ট করে। ডেটা স্থানান্তর অপ্টিমাইজ করার জন্য, প্রাথমিকভাবে শুধুমাত্র স্থানটির অনন্য শনাক্তকারী পুনরুদ্ধার করতে ['place_id'] ব্যবহার করা হয়।
• অটোকমপ্লিট কীভাবে ব্যবহার করবেন

    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

৩. স্থানের বিস্তারিত তথ্য পুনরুদ্ধার এবং উপ-গন্তব্যস্থল পরিচালনা

অটোকমপ্লিট সাজেশন থেকে কোনো স্থান নির্বাচন করা হলে, তার আরও বিস্তারিত তথ্য পাওয়া যায়।

• ব্যবহৃত এপিআই: প্লেসেস এপিআই ( https://places.googleapis.com/v1/places/{placeId} -এ সরাসরি fetch কলের মাধ্যমে)
• উদ্দেশ্য: কোনো নির্দিষ্ট স্থান সম্পর্কে বিস্তারিত তথ্য পুনরুদ্ধার করা, যার মধ্যে রয়েছে এর প্রদর্শিত নাম, ঠিকানা, প্রকারভেদ এবং সবচেয়ে গুরুত্বপূর্ণভাবে, এর subDestinations (যেমন, স্বতন্ত্র টার্মিনাল বা বিমানবন্দরের মতো কোনো বৃহত্তর কমপ্লেক্সের অন্তর্গত গুরুত্বপূর্ণ এলাকা)।
• URL-এর প্রধান প্যারামিটারসমূহ:
  1. {placeId} : নির্বাচিত স্থানের অনন্য শনাক্তকারী।
  2. fields : ঠিক কোন কোন ডেটা ফিল্ড পুনরুদ্ধার করতে হবে তা নির্দিষ্ট করে। অ্যাপটি id , displayName , subDestinations , types , এবং formattedAddress জন্য অনুরোধ করে। খরচ নিয়ন্ত্রণ এবং শুধুমাত্র প্রয়োজনীয় ডেটা পাওয়ার জন্য এটি অত্যন্ত গুরুত্বপূর্ণ।
• একটি অবস্থান দেওয়া থাকলে subDestinations কীভাবে পাওয়া যায়

async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

৪. জিওকোডিং ও রিভার্স জিওকোডিং: উপ-গন্তব্যগুলির বিবরণ সংগ্রহ করা

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

• ব্যবহৃত এপিআই: google.maps.Geocoder (ম্যাপস জাভাস্ক্রিপ্ট এপিআই থেকে) এবং জিওকোডিং এপিআই ( https://maps.googleapis.com/maps/api/geocode/json -এ সরাসরি fetch কলের মাধ্যমে)
• উদ্দেশ্য:
  • google.maps.Geocoder : Autocomplete বা Places API থেকে প্রাপ্ত একটি placeId ভৌগোলিক স্থানাঙ্ক ( lat , lng ) এবং একটি ভিউপোর্টে রূপান্তর করতে ব্যবহৃত হয়, যা মানচিত্রকে নির্বাচিত স্থান এবং তার উপ-গন্তব্যগুলিতে সঠিকভাবে কেন্দ্রস্থ করতে এবং জুম করতে সাহায্য করে।
  • জিওকোডিং এপিআই ( fetch ): এটি রিভার্স জিওকোডিং (অক্ষাংশ ও দ্রাঘিমাংশকে মানুষের পাঠযোগ্য ঠিকানায় রূপান্তর) এবং ভবনের রূপরেখা ও নেভিগেশন পয়েন্টের মতো উন্নত অবস্থান ডেটা পুনরুদ্ধার করতে ব্যবহৃত হয়।
• মূল পরামিতি:
  • google.maps.Geocoder.geocode() :
    • placeId : জিওকোড করার জন্য স্থানের আইডি।
    • location : রিভার্স জিওকোডিং-এর জন্য LatLng অবজেক্ট।
  • জিওকোডিং এপিআই fetch কল:
    • latlng : রিভার্স জিওকোডিং-এর জন্য অক্ষাংশ ও দ্রাঘিমাংশের স্থানাঙ্ক।
    • extra_computations=BUILDING_AND_ENTRANCES : এই গুরুত্বপূর্ণ প্যারামিটারটি অতিরিক্ত ডেটার অনুরোধ করে, বিশেষত বিল্ডিংয়ের ভিত্তি এবং প্রবেশপথের তথ্য, যা পরবর্তীতে বিল্ডিংয়ের রূপরেখা এবং দিকনির্দেশক বিন্দু প্রদর্শনের জন্য ব্যবহৃত হয়।

subDestination আইডি ব্যবহার করে কীভাবে আরও বিস্তারিত তথ্য (যেমন, অবস্থান, ফরম্যাট করা ঠিকানা, প্রকার) পাওয়া যায়

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

৫. মার্কার প্রদর্শন করা

মানচিত্রে নির্দিষ্ট স্থান চিহ্নিত করতে মার্কার ব্যবহার করা হয়।

• ব্যবহৃত এপিআই: google.maps.Marker (ম্যাপস জাভাস্ক্রিপ্ট এপিআই থেকে) এবং google.maps.marker.AdvancedMarkerElement ও google.maps.marker.PinElement (ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর মার্কার লাইব্রেরি থেকে)
• উদ্দেশ্য:
  • google.maps.Marker : এটি প্রাথমিক ড্র্যাগযোগ্য মার্কারের জন্য ব্যবহৃত হয় (যদিও প্রদত্ত কোডে draggable false সেট করা আছে, এটি এর ক্ষমতারই একটি অংশ) এবং ৩ নং বিভাগে বর্ণিত মৌলিক উপ-গন্তব্য মার্কারের জন্যও ব্যবহৃত হয়।
  • AdvancedMarkerElement এবং PinElement : আরও সুস্পষ্টভাবে দৃশ্যমান নেভিগেশন পয়েন্ট মার্কারের জন্য ব্যবহৃত হয়, যা মার্কারের পিনের কাস্টম স্টাইলিংয়ের সুযোগ দেয়।
• মূল পরামিতি:
  • position : LatLng স্থানাঙ্ক যেখানে মার্কারটি স্থাপন করা হবে।
  • map : যে ম্যাপ ইনস্ট্যান্সের উপর মার্কারটি প্রদর্শিত হবে।
  • title : মার্কারের উপর মাউস রাখলে যে লেখাটি প্রদর্শিত হয়।
  • icon : google.maps.Marker এর জন্য নিজস্ব আইকন ব্যবহারের সুযোগ দেয় (যেমন, নিজস্ব রঙের google.maps.SymbolPath.CIRCLE )।
  • content : AdvancedMarkerElement এর ক্ষেত্রে, এটি কাস্টম HTML কন্টেন্ট এম্বেড করার সুযোগ দেয়, যার মধ্যে আগে থেকে স্টাইল করা পিনের জন্য PinElement অন্তর্ভুক্ত।
  • PinElement প্যারামিটারগুলো হলো: background , borderColor , glyphColor , scale , যা ভিজ্যুয়াল কাস্টমাইজেশনের জন্য ব্যবহৃত হয়।

৬. ভবনের রূপরেখা প্রদর্শন

অ্যাপ্লিকেশনটি ভবনগুলোর আয়তন দৃশ্যমানভাবে উপস্থাপন করতে পারে।

• ব্যবহৃত এপিআই: google.maps.Data (ম্যাপস জাভাস্ক্রিপ্ট এপিআই থেকে)
• উদ্দেশ্য: ভৌগোলিক ডেটা প্রদর্শন করা, যেমন ভবনের রূপরেখা (যা জিওকোডিং এপিআই-এর extra_computations থেকে GeoJSON display_polygon হিসেবে ফেরত আসে)।
• মূল পরামিতি:
  • map : যে ম্যাপ ইনস্ট্যান্সটিতে ডেটা লেয়ারটি প্রয়োগ করা হয়।
  • style : GeoJSON ফিচারগুলির দৃশ্যমান রূপ নির্ধারণ করে (যেমন, strokeColor , fillColor , fillOpacity )।
  • addGeoJson() : লেয়ারে GeoJSON ডেটা যোগ করার মেথড।

৭. মানচিত্রের সীমানা এবং জুম

মানচিত্রের দৃশ্যে সমস্ত প্রাসঙ্গিক স্থান অন্তর্ভুক্ত আছে কিনা তা যাচাই করা হচ্ছে।

• ব্যবহৃত এপিআই: google.maps.LatLngBounds (ম্যাপস জাভাস্ক্রিপ্ট এপিআই থেকে)
• উদ্দেশ্য: একাধিক ভৌগোলিক বিন্দুর (যেমন, মূল স্থান এবং এর সমস্ত উপ-গন্তব্য) সাথে মানানসই করার জন্য মানচিত্রের ভিউপোর্টকে গতিশীলভাবে সামঞ্জস্য করা।
• মূল পদ্ধতিসমূহ:
  • extend(location) : সীমানার মধ্যে একটি LatLng পয়েন্ট যোগ করে এবং প্রয়োজনে সেটিকে প্রসারিত করে।
  • fitBounds(bounds) : LatLngBounds অবজেক্ট দ্বারা সংজ্ঞায়িত সম্পূর্ণ এলাকাটি প্রদর্শন করার জন্য মানচিত্রের কেন্দ্র এবং জুম স্তর সামঞ্জস্য করে।

এই গুগল ম্যাপস প্ল্যাটফর্ম এপিআইগুলোকে একত্রিত করে, অ্যাপ্লিকেশনটি স্থান অনুসন্ধান, সেগুলোর বিবরণ দেখা এবং উপ-গন্তব্য ও ভবনের রূপরেখার মতো সম্পর্কিত ভৌগোলিক তথ্য দেখার জন্য একটি ব্যাপক ও ইন্টারেক্টিভ অভিজ্ঞতা প্রদান করে।

বাস্তবায়ন সংক্রান্ত বিবেচ্য বিষয়: মনে রাখবেন যে এটি বিমানবন্দরের সকল এলাকায় কাজ করে না এবং (বিমানবন্দর টার্মিনালে) ডেটার প্রাপ্যতার উপর নির্ভরশীল।

রিসোর্স জিওকোডিং এপিআই প্লেসেস এপিআই ম্যাপস জাভাস্ক্রিপ্ট এপিআই

লেখকগণ: