সমর্থন

এই পৃষ্ঠায় ভেক্টর ম্যাপ এবং WebGL ফিচারগুলোর জ্ঞাত সমস্যা ও সমাধান তালিকাভুক্ত করা হয়েছে।

ব্রাউজার/ডিভাইস সমর্থন

WebGL ফিচার প্রিভিউটি Maps JavaScript API-এর মতোই একই ব্রাউজার এবং ডিভাইস সমর্থন করে। কোনো নির্দিষ্ট ডিভাইসের ব্রাউজার WebGL সমর্থন করবে কিনা তা পরীক্ষা করতে, get.webgl.org বা caniuse.com দেখুন। অনুগ্রহ করে এও নিশ্চিত করুন যে ব্রাউজার সেটিংসে হার্ডওয়্যার অ্যাক্সিলারেশন চালু আছে, অন্যথায় ভেক্টর ম্যাপগুলো রাস্টারে রূপান্তরিত হবে।

রাস্টার নাকি ভেক্টর?

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

ক্রোমে ব্রাউজারের সক্ষমতা পরীক্ষা করুন

ক্রোমের কোনো নির্দিষ্ট ইনস্টলেশনে কোন কোন হার্ডওয়্যার অ্যাক্সিলারেশন সক্ষমতা চালু আছে তা জানতে, chrome://gpu/ -তে যান এবং নিশ্চিত করুন যে নিম্নলিখিত আইটেমগুলি (সবুজ রঙে) চালু আছে:

  • OpenGL: সক্রিয় করা হয়েছে
  • WebGL: হার্ডওয়্যার ত্বরান্বিত
  • WebGL2: হার্ডওয়্যার ত্বরান্বিত

(এগুলো কেবল প্রাথমিক আবশ্যকতা, আরও অন্যান্য কারণ থাকতে পারে যা সহায়তাকে প্রভাবিত করে, নিচে "পরিচিত বাগসমূহ" দেখুন।)

হার্ডওয়্যার অ্যাক্সিলারেশন সক্ষম করুন

ভেক্টর ম্যাপ সমর্থন করার জন্য, বেশিরভাগ ব্রাউজারে হার্ডওয়্যার অ্যাক্সিলারেশন সক্রিয় করা আবশ্যক। Chrome এবং Microsoft Edge-এ হার্ডওয়্যার অ্যাক্সিলারেশন সক্রিয় করতে, Settings খুলুন, System নির্বাচন করুন এবং নিশ্চিত করুন যে ‘Use hardware acceleration when available’ বিকল্পটি সক্রিয় আছে।

প্রোগ্রামের মাধ্যমে রাস্টার বা ভেক্টর কিনা তা পরীক্ষা করুন

আপনি map.getRenderingType() কল করে প্রোগ্রাম্যাটিকভাবে পরীক্ষা করতে পারেন যে একটি ম্যাপ রাস্টার নাকি ভেক্টর। নিম্নলিখিত উদাহরণটি renderingtype_changed ইভেন্টটি নিরীক্ষণ করার এবং একটি রাস্টার নাকি ভেক্টর ম্যাপ ব্যবহৃত হচ্ছে তা প্রদর্শনকারী একটি তথ্য উইন্ডো দেখানোর কোড প্রদর্শন করে।

টাইপস্ক্রিপ্ট 

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

জাভাস্ক্রিপ্ট 

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

আপনি WebGL 2-এর সমর্থন যাচাই করতে WebGL রেন্ডারিং কনটেক্সটও ব্যবহার করতে পারেন:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

প্রোগ্রামের মাধ্যমে WebGL রেন্ডারিং কনটেক্সট শনাক্ত করার অন্যান্য উপায়গুলো জানুন।

মোবাইল ওয়েব সমর্থন

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

পোকা

পরিচিত ত্রুটি

  • AMD GPU যুক্ত কিছু macOS ডিভাইসে Chrome-এ একটি পরিচিত সমস্যা রয়েছে। একাধিক GPU যুক্ত ডিভাইসে যখন macOS গতিশীলভাবে GPU পরিবর্তন করে, তখন এটি বিশেষভাবে বিভ্রান্তিকর হতে পারে। ফলে, অন্য কোন অ্যাপ চলছে বা কোনো বাহ্যিক মনিটর সংযুক্ত আছে কিনা, তার উপর নির্ভর করে ভেক্টর ম্যাপ উপলব্ধ নাও হতে পারে। Chrome-এর আসন্ন ANGLE Metal ব্যাকএন্ড চালু করলে কিছু ক্ষেত্রে এই সমস্যাটির সমাধান হয় বলে মনে হচ্ছে। আপনি https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 লিঙ্কে এর সাধারণ রোলআউট পরিকল্পনা অনুসরণ করতে পারেন।

ত্রুটি রিপোর্ট করা

  • ত্রুটিটি জানানোর আগে অনুগ্রহ করে ব্রাউজার এবং জিপিইউ ড্রাইভার সর্বশেষ সংস্করণে আপডেট করুন।
  • নিশ্চিত করুন যে chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge)-এ থাকা হার্ডওয়্যার অ্যাক্সিলারেশন সেটিংটি চালু আছে। Safari-তে, macOS সংস্করণ 10.15 বা তার পরবর্তী সংস্করণগুলিতে এই সেটিংটি স্বয়ংক্রিয়ভাবে চালু হয়ে যায়। পুরোনো MacOS সংস্করণগুলির জন্য, অনুগ্রহ করে Safari-এর অ্যাডভান্সড সেটিংসে যান এবং নিশ্চিত করুন যে "Use hardware acceleration" অপশনটি চালু আছে।
  • বাগ রিপোর্টে jsfiddle নমুনা কোডের লিঙ্ক অন্তর্ভুক্ত করুন।
  • যদি আপনি কোনো রেন্ডারিং সমস্যার সম্মুখীন হন, তাহলে অনুগ্রহ করে chrome://gpu (Chrome), about:support (Firefox) অথবা edge://gpu (Microsoft Edge)-এর একটি স্ক্রিনশট নিন এবং বাগ রিপোর্টে GPU সম্পর্কিত তথ্য সংযুক্ত করুন।

আপনার মতামত জানান!

আপনার এবং আপনার ব্যবহারকারীদের জন্য সর্বোত্তম ভেক্টর ম্যাপ অভিজ্ঞতা তৈরি করার প্রচেষ্টায় আমরা আপনার মতামতকে গুরুত্ব দিই। অনুগ্রহ করে আমাদের জানান যদি:

  • আপনার ওয়েব অ্যাপে যদি কোনো নতুন জাভাস্ক্রিপ্ট ত্রুটি বা বাগ/ক্র্যাশ আপনার নজরে আসে।
  • ভেক্টর ম্যাপের স্টার্টআপ ল্যাটেন্সি রাস্টার ম্যাপের তুলনায় উল্লেখযোগ্যভাবে খারাপ। যদি এমনটা হয়, তবে স্টার্টআপ ল্যাটেন্সি রিগ্রেশনের মেট্রিকগুলো খুব সহায়ক হয়। সাধারণত, আমরা জানতে চাই যে স্টার্টআপ ল্যাটেন্সি গ্রহণযোগ্য সীমার বাইরে নেমে যাচ্ছে কি না।
  • ভেক্টর ম্যাপের অভিজ্ঞতা যতটা মসৃণ হওয়া উচিত, ততটা নয়। আপনি যদি FPS বা জ্যাঙ্ক মেট্রিক্স লগ করেন, তাহলে ভেক্টর এবং রাস্টার ম্যাপের মধ্যে সেগুলোর তুলনা কেমন হয়?
  • ব্রাউজার ভেদে পারফরম্যান্সে ব্যাপক পার্থক্য দেখা যায়।

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