সমর্থন

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

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

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

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

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

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

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

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

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

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

ভেক্টর মানচিত্র সমর্থন করার জন্য, বেশিরভাগ ব্রাউজারে হার্ডওয়্যার ত্বরণ সক্ষম করা আবশ্যক। Chrome এবং Microsoft Edge-এ হার্ডওয়্যার ত্বরণ সক্ষম করতে, সেটিংস খুলুন, সিস্টেম নির্বাচন করুন এবং নিশ্চিত করুন যে উপলব্ধ থাকা অবস্থায় হার্ডওয়্যার ত্বরণ ব্যবহার করুন ।

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

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

আপনি 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

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

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

/**
 * 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 টেস্টিং সেট আপ করে থাকেন, তাহলে অনুগ্রহ করে আপনার অর্জিত যেকোন পারফরম্যান্স ফিডব্যাক শেয়ার করুন, কারণ এটি আমাদের বৈশিষ্ট্যকে পরিমার্জিত করতে সাহায্য করতে খুবই কার্যকর হবে।