ডেটাসেটের জন্য ডেটা-ড্রিভেন স্টাইলিং সেট-আপ করতে এই ধাপগুলি অনুসরণ করুন।
API key পান এবং API চালু করুন
ডেটাসেটের জন্য ডেটা-ড্রিভেন স্টাইলিং ব্যবহার করার আগে, আপনার এগুলি প্রয়োজন: বিলিং অ্যাকাউন্ট সহ Google Cloud প্রোজেক্ট এবং Maps JavaScript API ও Maps Datasets API, দুটিই চালু করা। আরও জানতে, আপনার Google Cloud প্রোজেক্ট সেট-আপ করুন দেখুন।
ম্যাপ আইডি তৈরি করা
নতুন ম্যাপ আইডি তৈরি করতে, ক্লাউড কাস্টমাইজেশন লিঙ্কে দেওয়া ধাপগুলি অনুসরণ করুন। ম্যাপের ধরন JavaScript হিসেবে সেট করুন এবং ভেক্টর বিকল্প বেছে নিন।
ম্যাপ ইনস্ট্যান্টিয়েট করার সময় mapId প্রপার্টি ব্যবহার করে ম্যাপ আইডি প্রদান করুন।
ম্যাপ আইডি অবশ্যই ম্যাপ স্টাইলের সাথে মিলতে হবে যা দেখানোর জন্য ডেটাসেটের সাথে
যুক্ত।
const position = new google.maps.LatLng(40.75, -74.05); const map = new google.maps.Map(document.getElementById('map'), { zoom: 11, center: position, mapId: 'YOUR_MAP_ID', });
নতুন ম্যাপ স্টাইল তৈরি করুন
নতুন ম্যাপ স্টাইল তৈরি করতে, ম্যাপ স্টাইল তৈরি ও ব্যবহার করুন লিঙ্কে দেওয়া নির্দেশাবলী অনুসরণ করে স্টাইল তৈরি করুন এবং আপনার তৈরি করা ম্যাপ আইডির সাথে স্টাইলটি যুক্ত করুন।
আপনার ম্যাপ ইনিশিয়ালাইজেশন কোড আপডেট করুন
ডেটাসেটের জন্য ডেটা-ড্রিভেন স্টাইলিং ব্যবহার করতে, প্রথমে
Maps JavaScript API লোড করুন, আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে, যেমন এখানে দেখানো হয়েছে
(আপনার API script ট্যাগে v=beta ব্যবহার করুন):
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
ম্যাপের সুবিধা চেক করা (ঐচ্ছিক)
ডেটা-সেটের জন্য ডেটা-ড্রিভেন স্টাইলিংয়ের ক্ষেত্রে ম্যাপ আইডি প্রয়োজন। ম্যাপ আইডি না থাকলে,
অথবা ভুল ম্যাপ আইডি পাস করা হলে, ডেটা ফিচার লোড করা যাবে না। সমস্যার সমাধানকরণ
ধাপ হিসেবে, ম্যাপের ক্ষমতা সংক্রান্ত পরিবর্তন সাবস্ক্রাইব করতে
আপনি mapcapabilities_changed লিসেনার যোগ করতে পারেন। এটি নিম্নলিখিত শর্তগুলি পূরণ করা হয়েছে কিনা
তা দেখাবে:
- একটি সঠিক ম্যাপ আইডি ব্যবহার করা হচ্ছে।
- ম্যাপ আইডি ভেক্টর ম্যাপের সাথে যুক্ত।
Map Capabilities ব্যবহার করা ঐচ্ছিক এবং শুধুমাত্র পরীক্ষা ও সমস্যার সমাধানকরণ অথবা রানটাইম ফলব্যাক সংক্রান্ত উদ্দেশ্যে ব্যবহার করার জন্য সাজেস্ট করা হয়।
// Optional: subscribe to map capability changes. map.addListener('mapcapabilities_changed', () => { const mapCapabilities = map.getMapCapabilities(); if (!mapCapabilities.isDataDrivenStylingAvailable) { // Data-driven styling is *not* available, add a fallback. // Existing feature layers are also unavailable. } });