একটি মানচিত্রে একটি ডেটাসেট যোগ করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

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

পূর্বশর্ত

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

একটি ডেটাসেট আইডিকে ম্যাপ স্টাইলের সাথে সংযুক্ত করুন

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

  1. গুগল ক্লাউড কনসোলে, ডেটাসেট পৃষ্ঠায় যান ।
  2. ডেটা সেটের নামে ক্লিক করুন। ডেটা সেটের বিস্তারিত পৃষ্ঠাটি প্রদর্শিত হবে।
  3. প্রিভিউ ট্যাবে ক্লিক করুন।
  4. ADD MAP STYLE- এ স্ক্রোল করুন এবং ক্লিক করুন।
    সংশ্লিষ্ট মানচিত্র শৈলী বিভাগ, যার ডানদিকে 'মানচিত্র শৈলী যোগ করুন' লেখা একটি প্লাস (+) বোতাম রয়েছে।
  5. সংযুক্ত করতে ম্যাপ স্টাইল(গুলি)-এর চেকবক্স(গুলিতে) ক্লিক করুন এবং তারপর সেভ-এ ক্লিক করুন।

সহজ শৈলীর নিয়ম ব্যবহার করুন

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

টাইপস্ক্রিপ্ট 

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

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

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

ঘোষণামূলক শৈলীর নিয়ম ব্যবহার করুন

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

টাইপস্ক্রিপ্ট 

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

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

function setStyle(/* FeatureStyleFunctionOptions */ 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 /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
index.js

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

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

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

টাইপস্ক্রিপ্ট 

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

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

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

// 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 রিটার্ন করতে পারেন, উদাহরণস্বরূপ যদি আপনি ফিচারগুলোর একটি উপসেটকে অদৃশ্য রাখতে চান।

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

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

অ্যাট্রিবিউশন টেক্সট যোগ করার একটি উপায় হলো কাস্টম কন্ট্রোল ব্যবহার করে ম্যাপের নির্দিষ্ট স্থানে ইচ্ছামতো 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