ম্যাপে ডেটাসেট যোগ করা

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

FeatureStyleFunction-এ, আপনি ডেটাসেটে বেছে নেওয়া স্টাইল ফিচারের লজিক নির্ধারণ করেন। এই লজিকের ভিত্তিতে এটি FeatureStyleOptions রিটার্ন করে। স্টাইলিং লজিক প্রয়োজন না হলে, আপনি সরাসরি স্টাইল সেট করতে FeatureStyleOptions ব্যবহার করতে পারবেন। এই পৃষ্ঠায় দেখানো হয়েছে যে কীভাবে ম্যাপে ডেটাসেট যোগ করতে হয় এবং স্টাইলিং প্রয়োগ করতে হয়।

পূর্বশর্ত

এগিয়ে যাওয়ার আগে, আপনার কাছে ম্যাপ আইডি, ম্যাপ স্টাইল ও ডেটাসেট আইডি থাকতে হবে।

• ম্যাপ আইডি ও ম্যাপ স্টাইল তৈরি করা
• ডেটাসেট তৈরি ও আপলোড করা

ম্যাপ স্টাইলের সাথে ডেটাসেট আইডি অ্যাসোসিয়েট করা

পরীক্ষামূলক: এই ফিচার শুধুমাত্র লাইট ম্যাপ স্টাইলের জন্য সেট করা যেতে পারে। আপনি এই ফিচার চালু করা একটি লাইট ম্যাপ স্টাইলকে ম্যাপ আইডির সাথে লিঙ্ক করলে, চালু করা লেয়ারগুলিও ডার্ক ম্যাপ স্টাইলের জন্য উপলভ্য হয়।

আপনি যে ম্যাপ স্টাইল ব্যবহার করছেন তার সাথে আপনার ডেটাসেট অ্যাসোসিয়েট করতে নিচের ধাপগুলি অনুসরণ করুন:

1. Google Cloud কনসোলে, ডেটাসেট পৃষ্ঠায় যান।
2. ডেটাসেটের নামে ক্লিক করুন। ডেটাসেটের বিবরণ পৃষ্ঠাটি দেখা যাবে।
3. প্রিভিউ ট্যাবে ক্লিক করুন।
4. স্ক্রল করে ম্যাপ স্টাইল যোগ করুন বিকল্পে গিয়ে ক্লিক করুন।
   
5. অ্যাসোসিয়েট করার জন্য ম্যাপ স্টাইলের চেকবক্সে ক্লিক করুন এবং তারপর সেভ করুন বিকল্পে ক্লিক করুন।

সতর্কতা: ম্যাপে একাধিক ডেটাসেট রেন্ডার করলে, ডেটাসেটের সাইজ ও সংখ্যার উপর নির্ভর করে পারফর্ম্যান্স প্রভাবিত হতে পারে।

সহজ স্টাইল সংক্রান্ত নিয়ম ব্যবহার করুন

ফিচার স্টাইল করার সবচেয়ে সহজ উপায় হল FeatureStyleOptions পাস করা যাতে রঙ, অস্বচ্ছতা ও লাইনের প্রস্থের মতো স্টাইল অ্যাট্রিবিউট সংজ্ঞায়িত করা যায়। সরাসরি ডেটাসেট ফিচার লেয়ারে ফিচার স্টাইল বিকল্প প্রয়োগ করুন অথবা FeatureStyleFunction-এর সাথে একযোগে ব্যবহার করুন।

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করা সংক্রান্ত নির্দেশিকা পড়ুন।

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

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

ডিক্ল্যারেটিভ স্টাইল নিয়ম ব্যবহার করা

স্টাইল সংক্রান্ত নিয়ম ডিক্লেয়ার করার জন্য FeatureStyleFunction ব্যবহার করুন এবং আপনার সম্পূর্ণ ডেটাসেট জুড়ে সেগুলি প্রয়োগ করুন। ডেটা সেট অ্যাট্রিবিউট ভ্যালুর উপর ভিত্তি করে কোনও ফিচারে FeatureStyleOptions প্রয়োগ করুন। এছাড়াও, আপনি ফিচার স্টাইল ফাংশন থেকে null রিটার্ন করতে পারেন, যেমন, আপনি যদি চান যে ফিচারের সাবসেট অদৃশ্য থাকুক। এই উদাহরণে একটি স্টাইল ফাংশন দেখানো হয়েছে যা ডেটা অ্যাট্রিবিউটের উপর ভিত্তি করে পয়েন্টের সেটকে রঙ করে:

TypeScript

function setStyle(params: { feature: google.maps.Feature }) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature as google.maps.DatasetFeature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

function setStyle(params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors =
        datasetFeature.datasetAttributes.CombinationofPrimaryandHighlightColor;

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return {
                fillColor: 'black',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+':
            return {
                fillColor: '#8b0000',
                pointRadius: 8,
            };
            break;
        case 'Cinnamon+Gray':
            return {
                fillColor: '#8b0000',
                strokeColor: 'gray',
                pointRadius: 6,
            };
            break;
        case 'Cinnamon+White':
            return {
                fillColor: '#8b0000',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        case 'Gray+':
            return {
                fillColor: 'gray',
                pointRadius: 8,
            };
            break;
        case 'Gray+Cinnamon':
            return {
                fillColor: 'gray',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+Cinnamon, White':
            return {
                fillColor: 'silver',
                strokeColor: '#8b0000',
                pointRadius: 6,
            };
            break;
        case 'Gray+White':
            return {
                fillColor: 'gray',
                strokeColor: 'white',
                pointRadius: 6,
            };
            break;
        default: // Color not defined.
            return {
                fillColor: 'yellow',
                pointRadius: 8,
            };
            break;
    }
}
index.js

ডেটাসেট ফিচার লেয়ারে স্টাইল প্রয়োগ করুন

ফিচার স্টাইল ফাংশনে স্টাইল প্রয়োগ করতে:

1. map.getDatasetFeatureLayer() কল করে ডেটাসেট ফিচার লেয়ার পান, ডেটাসেট আইডি পাস করুন।
2. ফিচার স্টাইল বিকল্প (যেমন, styleOptions) বা ফাংশন (যেমন, setStyle) ডেটাসেট লেয়ারে সেট করে স্টাইল প্রয়োগ করুন।

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

কোনও লেয়ার থেকে স্টাইলিং সরানো

কোনও লেয়ার থেকে স্টাইলিং সরাতে, style-কে null-এ সেট করুন:

featureLayer.style = null;

এছাড়াও, আপনি ফিচার স্টাইল ফাংশন থেকে null রিটার্ন করতে পারেন, যেমন আপনি যদি ফিচারের সাবসেট অদৃশ্য রাখতে চান।

অ্যাট্রিবিউশন টেক্সট যোগ করুন

Google Maps-এ আপলোড করা ডেটাসেট দেখানোর সময় আপনার ম্যাপে প্রয়োজনীয় অ্যাট্রিবিউশন দেখাতে হবে। অ্যাট্রিবিউশন টেক্সট যেন Google লোগোকে অস্পষ্ট বা তাতে বাধা না দেয়।

অ্যাট্রিবিউশন টেক্সট যোগ করার একটি উপায় হল, ম্যাপের স্ট্যান্ডার্ড পজিশনে ইচ্ছামতো HTML প্লেস করতে কাস্টম কন্ট্রোল ব্যবহার করা। নিম্নলিখিত কোড স্নিপেট থেকে এই নমুনায় অ্যাট্রিবিউশনের জন্য ব্যবহৃত HTML ও CSS সম্পর্কে জানতে পারবেন:

<gmp-map
    center="40.757815, -73.933123"
    zoom="11"
    map-id="5cd2c9ca1cf05670"
    map-type-control="false">
    <div id="attribution" slot="control-block-end-inline-start">
        Data source: NYC Open Data
    </div>
</gmp-map>
index.html

#attribution {
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Roboto', 'Arial', sans-serif;
    font-size: 10px;
    padding: 2px;
    margin: 2px;
}
style.css