সীমানাগুলির জন্য ডেটা-চালিত স্টাইলিং ব্যবহার করতে আপনাকে অবশ্যই একটি মানচিত্র আইডি তৈরি করতে হবে যা জাভাস্ক্রিপ্ট ভেক্টর মানচিত্র ব্যবহার করে। এর পরে, আপনাকে অবশ্যই একটি নতুন মানচিত্রের শৈলী তৈরি করতে হবে, পছন্দসই সীমানা বৈশিষ্ট্য স্তরগুলি নির্বাচন করতে হবে এবং আপনার মানচিত্র আইডির সাথে শৈলীটি সংযুক্ত করতে হবে৷
একটি মানচিত্র আইডি তৈরি করুন
একটি নতুন মানচিত্র ID তৈরি করতে, ক্লাউড কাস্টমাইজেশনের ধাপগুলি অনুসরণ করুন৷ জাভাস্ক্রিপ্টে মানচিত্রের ধরন সেট করুন এবং ভেক্টর বিকল্পটি নির্বাচন করুন। মানচিত্রে কাত এবং ঘূর্ণন সক্ষম করতে টিল্ট এবং/অথবা ঘূর্ণন পরীক্ষা করুন। যদি টিল্ট বা শিরোনাম ব্যবহার আপনার অ্যাপকে বিরূপভাবে প্রভাবিত করে, তাহলে টিল্ট এবং রোটেশন চেক না করে রাখুন যাতে ব্যবহারকারীরা কাত এবং ঘূর্ণন সামঞ্জস্য করতে সক্ষম হবে না।
একটি নতুন মানচিত্র শৈলী তৈরি করুন
একটি নতুন মানচিত্রের শৈলী তৈরি করতে, শৈলী তৈরি করতে মানচিত্র শৈলী পরিচালনা করুন -এ নির্দেশাবলী অনুসরণ করুন এবং আপনার তৈরি করা মানচিত্র আইডির সাথে শৈলীটিকে সংযুক্ত করুন ৷
বৈশিষ্ট্য স্তর নির্বাচন করুন
Google API কনসোলে আপনি কোন বৈশিষ্ট্য স্তরগুলি প্রদর্শন করতে হবে তা নির্বাচন করতে পারেন। এটি নির্ধারণ করে যে কোন ধরণের সীমানা মানচিত্রে প্রদর্শিত হবে (উদাহরণস্বরূপ স্থানীয় এলাকা, রাজ্য ইত্যাদি)।
বৈশিষ্ট্য স্তর পরিচালনা করতে
- Google API কনসোলে, মানচিত্র শৈলী পৃষ্ঠায় যান ।
- অনুরোধ করা হলে একটি প্রকল্প নির্বাচন করুন.
- একটি মানচিত্র শৈলী নির্বাচন করুন.
- স্তর যোগ করতে বা সরাতে বৈশিষ্ট্য স্তর ড্রপ-ডাউন ক্লিক করুন.
- আপনার পরিবর্তনগুলি সংরক্ষণ করতে এবং সেগুলিকে আপনার মানচিত্রে উপলব্ধ করতে সংরক্ষণ করুন ক্লিক করুন৷
আপনার মানচিত্র প্রারম্ভিক কোড আপডেট করুন
এর জন্য আপনার তৈরি করা মানচিত্র ID প্রয়োজন। এটি আপনার মানচিত্র ব্যবস্থাপনা পৃষ্ঠায় পাওয়া যাবে।
- আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে মানচিত্র জাভাস্ক্রিপ্ট API লোড করুন, যেমনটি নিম্নলিখিত স্নিপেটে দেখানো হয়েছে:
<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>
mapIdপ্রপার্টি ব্যবহার করে ম্যাপ ইনস্ট্যান্টিয়েট করার সময় একটি ম্যাপ আইডি প্রদান করুন। এটি এমন মানচিত্র ID হওয়া উচিত যা আপনি বৈশিষ্ট্য স্তরগুলি সক্ষম সহ একটি মানচিত্র শৈলী ব্যবহার করে কনফিগার করেছেন৷map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled. });
Maps JavaScript API লোড করার বিষয়ে আরও জানুন।
একটি মানচিত্রে বৈশিষ্ট্য স্তর যোগ করুন
আপনার মানচিত্রে একটি বৈশিষ্ট্য স্তরের একটি রেফারেন্স পেতে, মানচিত্র শুরু হলে map.getFeatureLayer() এ কল করুন:
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 20.773, lng: -156.01 },
zoom: 12,
mapId: 'MAP_ID',
});
// Add a feature layer for localities.
localityLayer = map.getFeatureLayer('LOCALITY');
...
}মানচিত্র ক্ষমতা পরীক্ষা করুন
সীমানার জন্য ডেটা-চালিত স্টাইলিংয়ের জন্য এমন ক্ষমতার প্রয়োজন যা Google API কনসোলে সক্ষম এবং একটি মানচিত্র আইডির সাথে যুক্ত। যেহেতু মানচিত্র আইডিগুলি ক্ষণস্থায়ী এবং পরিবর্তন সাপেক্ষে, আপনি এটিকে কল করার আগে একটি নির্দিষ্ট ক্ষমতা (উদাহরণস্বরূপ ডেটা-চালিত স্টাইলিং) উপলব্ধ কিনা তা যাচাই করতে map.getMapCapabilities() এ কল করতে পারেন৷ এই চেক ঐচ্ছিক.
নিম্নলিখিত উদাহরণটি মানচিত্র ক্ষমতা পরিবর্তনের সদস্যতা নিতে একজন শ্রোতাকে যুক্ত করা দেখায়:
// subscribe to 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.
}
});