সমর্থন

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

ব্রাউজার/ডিভাইস সাপোর্ট

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

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

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

Chrome-এ ব্রাউজারের ক্ষমতা পরীক্ষা করুন

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

• "ওপেনজিএল: সক্ষম"
• "ওয়েবজিএল: হার্ডওয়্যার ত্বরান্বিত"
• "WebGL2: হার্ডওয়্যার ত্বরিত"

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

হার্ডওয়্যার ত্বরণ সক্ষম করুন

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

• Safari-তে ওয়েবসাইটের পছন্দ কীভাবে পরিবর্তন করবেন তা শিখুন।
• ফায়ারফক্সের কর্মক্ষমতা সেটিংস সম্পর্কে জানুন।

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

আপনি 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 রেন্ডারিং প্রসঙ্গ প্রোগ্রাম্যাটিকভাবে সনাক্ত করার অন্যান্য উপায়গুলি জানুন।

মোবাইল ওয়েব সাপোর্ট

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

বাগ

পরিচিত বাগ

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

বাগ রিপোর্ট করা

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

তুমি কি ভাবছো বলো!

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

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

যদি আপনি ভেক্টর ম্যাপ বনাম রাস্টার ম্যাপের তুলনা করার জন্য A/B টেস্টিং সেট আপ করে থাকেন, তাহলে আপনার প্রাপ্ত যেকোনো পারফরম্যান্স প্রতিক্রিয়া শেয়ার করুন, কারণ এটি আমাদের বৈশিষ্ট্যটি পরিমার্জন করতে সাহায্য করার জন্য খুবই কার্যকর হবে।