আপনি ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করে 3D বেজম্যাপের লুক অ্যান্ড ফিল কাস্টমাইজ করতে পারবেন।
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিংয়ের মাধ্যমে, ব্যবহারকারীদের কাছে আপনি যে ম্যাপ উপস্থাপন করেন, তার লুক ও ফিল আপনি নিয়ন্ত্রণ করতে পারবেন। আগ্রহের স্থান (POI)-এর ঘনত্ব, নির্দিষ্ট POI বিভাগ সরিয়ে দেওয়া এবং ফিচারের ফিল বা স্ট্রোক পরিবর্তন করার মতো ফিচার নিয়ন্ত্রণ করে, আপনি নিজের ব্যবহারকারীদের জন্য উপযুক্ত ম্যাপ অভিজ্ঞতা তৈরি করতে পারবেন।
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং Google Cloud console-এ কোড না লিখে এডিট করার অভিজ্ঞতা প্রদান করে। আপনার তৈরি করা প্রতিটি কাস্টম স্টাইল একটি ম্যাপ আইডির সাথে যুক্ত থাকে; Maps কনসোলে আপনার স্টাইলে করা এডিট আপনার অ্যাপ্লিকেশনে অটোমেটিক দেখা যাবে।
নিম্নলিখিত উদাহরণে এমন একটি ম্যাপ দেখানো হয়েছে যা বিনোদনমূলক ফিচার আইকন ও টেক্সটের রঙ কমলা রঙে পরিবর্তন করতে কাস্টম স্টাইল ব্যবহার করে:
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200, }, tilt: 67.5, heading: 108.94057782079429, range: 6605.57279990986, mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs. mode: 'HYBRID', }); document.body.append(map); } void init();
এক নজরে
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করে 3D ম্যাপ কাস্টমাইজ করার প্রসেসটি 2D ম্যাপের মতোই:
| ১ | ম্যাপ আইডি তৈরি করা | ম্যাপ আইডি তৈরি করুন। স্টাইলিং ম্যানেজ করার জন্য আপনার অ্যাপ্লিকেশনে ম্যাপ আইডি পাস করা হয়। আপনি পরবর্তী ধাপে এই ম্যাপ আইডির সাথে কাস্টম স্টাইল যুক্ত করবেন। |
| ২ | ক্লাউড-ভিত্তিক ম্যাপ স্টাইল তৈরি করা | এই ধাপে আপনাকে অবশ্যই "3D হাইব্রিড" বেছে নিতে হবে এবং "লাইট মোড" ব্যবহার করতে হবে। |
| ৩ | ম্যাপের সাথে আপনার ম্যাপ স্টাইল অ্যাসোসিয়েট করা | প্রথম ধাপে আপনার তৈরি করা ম্যাপ আইডিতে আপনার স্টাইল লিঙ্ক করুন |
| ৪ | আপনার অ্যাপ্লিকেশনে ম্যাপ আইডি যোগ করুন | map-id প্যারামিটার ব্যবহার করে আপনার কোডে ম্যাপ আইডি উল্লেখ করুন।
|
| ৫ | ম্যাপ আইডি প্রকাশ করা | মনে রাখবেন, আপনার কাস্টম স্টাইলে করা পরিবর্তনগুলি প্রকাশ করার পরে আপনার অ্যাপ্লিকেশনে অটোমেটিক অন্তর্ভুক্ত করা হয়। |
ম্যাপ স্টাইল তৈরি করার বিষয়ে বিস্তারিত জানতে, ম্যাপ স্টাইল তৈরি ও ব্যবহার করা নিবন্ধটি পড়ে দেখুন।
ডায়নামিকভাবে ম্যাপ আইডি আপডেট করুন
ম্যাপ ইনস্ট্যানশিয়েট করার পরে আপনি mapId প্রপার্টি ডাইনামিক আপডেট করতে পারবেন।
এর ফলে, সম্পূর্ণ Map3DElement ইনস্ট্যান্স রিক্রিয়েট না করেই আপনি অন্য ক্লাউড-ভিত্তিক ম্যাপ স্টাইল প্রয়োগ করতে পারবেন।
ম্যাপ আইডি আপডেট করতে, Map3DElement ইনস্ট্যান্সে mapId প্রপার্টি সেট করুন:
const map3DElement = document.querySelector('gmp-map-3d');
// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';
mapId প্রপার্টি HTML অ্যাট্রিবিউটে প্রতিফলিত হয় বলে, আপনি অ্যাট্রিবিউট পরিবর্তন করে ডায়নামিকভাবে এটি আপডেট করতে পারবেন:
const map3DElement = document.querySelector('gmp-map-3d');
// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');
সীমাবদ্ধতা
Maps JavaScript-এ 3D Maps-এর সাথে ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করার সময় কিছু সীমাবদ্ধতা সম্পর্কে সচেতন থাকতে হবে:
- ডার্ক মোড কাজ করে না।
- ডেটা-ড্রিভেন স্টাইলিংয়ের মতো ম্যাপ আইডি-এনাবল করা ফিচার কাজ করে না।