রেন্ডারিং টাইপ (রাস্টার এবং ভেক্টর)

ম্যাপস জাভাস্ক্রিপ্ট এপিআই দুই ধরনের ম্যাপ ইমপ্লিমেন্টেশন প্রদান করে: রাস্টার এবং ভেক্টর। রাস্টার ম্যাপ পিক্সেল-ভিত্তিক রাস্টার ইমেজ টাইলসের একটি গ্রিড হিসেবে ম্যাপ লোড করে, যা গুগল ম্যাপস প্ল্যাটফর্ম সার্ভার-সাইডে তৈরি করে আপনার ওয়েব অ্যাপে পরিবেশন করা হয়। ভেক্টর ম্যাপ ভেক্টর-ভিত্তিক টাইলস দ্বারা গঠিত, যা লোড হওয়ার সময় ক্লায়েন্ট-সাইডে WebGL ব্যবহার করে আঁকা হয়। WebGL হলো একটি ওয়েব প্রযুক্তি যা ব্রাউজারকে ব্যবহারকারীর ডিভাইসের GPU অ্যাক্সেস করে ২ডি এবং ৩ডি গ্রাফিক্স রেন্ডার করার সুযোগ দেয়।

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

ডিফল্ট রেন্ডারিং টাইপ

আপনার বাস্তবায়নের ওপর নির্ভর করে মানচিত্রের ডিফল্ট রেন্ডারিং ধরণ পরিবর্তিত হয়।

• <gmp-map> এলিমেন্ট ব্যবহার করা ম্যাপগুলো ডিফল্টভাবে ভেক্টর রেন্ডারিং টাইপে রেন্ডার হয়।

• <div> এলিমেন্টের সাথে google.maps.Map ব্যবহার করা ম্যাপগুলো ডিফল্টভাবে রাস্টার রেন্ডারিং টাইপে রেন্ডার হয়।

একটি ম্যাপের জন্য রেন্ডারিং টাইপ নির্ধারণ করতে, হয় ` renderingType ম্যাপ অপশনটি নির্দিষ্ট করুন, অথবা এর সাথে যুক্ত কোনো ম্যাপ আইডিতে অপশনটি সেট করুন। ` renderingType অপশনটি ম্যাপ আইডি কনফিগার করার মাধ্যমে করা যেকোনো রেন্ডারিং টাইপ সেটিংসকে বাতিল করে দেয়।

renderingType বিকল্পটি নির্দিষ্ট করুন

আপনার ম্যাপের জন্য রাস্টার অথবা ভেক্টর রেন্ডারিং টাইপ নির্দিষ্ট করতে renderingType অপশনটি ব্যবহার করুন (কোনো ম্যাপ আইডির প্রয়োজন নেই)। div এলিমেন্ট এবং জাভাস্ক্রিপ্ট ব্যবহার করে লোড করা ম্যাপের জন্য ডিফল্ট রেন্ডারিং টাইপ হলো google.maps.RenderingType.RASTER । renderingType অপশনটি সেট করতে এই ধাপগুলো অনুসরণ করুন:

1. RenderingType লাইব্রেরিটি লোড করুন; এটি Maps লাইব্রেরি লোড করার সময় করা যেতে পারে:

   const { Map, RenderingType } = await google.maps.importLibrary("maps");
   

2. ম্যাপটি ইনিশিয়ালাইজ করার সময়, RenderingType.VECTOR অথবা RenderingType.RASTER নির্দিষ্ট করতে renderingType অপশনটি ব্যবহার করুন:

   map = new Map(
     document.getElementById('map'),
     {
       zoom: 4,
       center: position,
       renderingType: RenderingType.VECTOR,
     }
   );
   

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

• টিল্ট সক্রিয় করতে, tiltInteractionEnabled ম্যাপ অপশনটিকে true তে সেট করুন অথবা map.setTiltInteractionEnabled(true) কল করুন।
• প্যানিং চালু করতে, headingInteractionEnabled ম্যাপ অপশনটি true তে সেট করুন অথবা map.setHeadingInteractionEnabled(true) কল করুন।

<gmp-map> এলিমেন্ট ব্যবহার করে লোড করা ম্যাপের ক্ষেত্রে, ডিফল্ট রেন্ডারিং টাইপ হলো google.maps.RenderingType.VECTOR , যেখানে টিল্ট এবং হেডিং কন্ট্রোল সক্রিয় থাকে। <gmp-map> এলিমেন্ট ব্যবহার করে রেন্ডারিং টাইপ সেট করতে, rendering-type অ্যাট্রিবিউটটি ব্যবহার করুন।

রেন্ডারিং টাইপ সেট করতে একটি ম্যাপ আইডি ব্যবহার করুন

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

এরপর, আপনার তৈরি করা ম্যাপ আইডি দিয়ে ম্যাপ ইনিশিয়ালাইজেশন কোডটি আপডেট করুন। আপনি ম্যাপস ম্যানেজমেন্ট পেজে আপনার ম্যাপ আইডিগুলো খুঁজে পাবেন। এখানে দেখানো পদ্ধতি অনুযায়ী, mapId প্রপার্টি ব্যবহার করে ম্যাপ ইনস্ট্যানশিয়েট করার সময় একটি ম্যাপ আইডি প্রদান করুন:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

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

কোন রেন্ডারিং টাইপ ব্যবহার করা হচ্ছে তা শনাক্ত করুন

কোন রেন্ডারিং টাইপ ব্যবহার করা হচ্ছে তা শনাক্ত করতে, ম্যাপ অবজেক্টে getRenderingType() কল করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```