উইজেট

আপনার UI তৈরি করার জন্য আপনি বিভিন্ন ধরনের উইজেট ব্যবহার করতে পারেন। এইসব উইজেটের মধ্যে বোতাম, চেকবক্স, স্লাইডার, টেক্সটবক্স এবং বাছাই করার মেনু অন্তর্ভুক্ত। উইজেট শুধুমাত্র একবারই প্রিন্ট করা বা প্যানেলে যোগ করা যাবে। নিম্নলিখিত বিভাগগুলি উইজেটের প্রাথমিক কার্যকারিতা, লুক ও ফিল সম্পর্কে ব্যাখ্যা করে। আপনার উইজেট স্টাইল করার ব্যাপারে আরও তথ্যের জন্য স্টাইল বিভাগ দেখুন। নিম্নলিখিত উদাহরণগুলি কনসোলে উইজেটগুলি print() করে। প্যানেলে উইজেট যোগ করার ব্যাপারে আরও জানতে, প্যানেল ও লেআউট পৃষ্ঠা দেখুন।

ui.Label

লেবেল হল এমন জায়গা যেখানে টেক্সট দেখানো হয়। যেমন, নিম্নলিখিত কোডটি একটি লেবেল প্রিন্ট করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var label = ui.Label('Cool label!');
print(label);

যা দেখতে অনেকটা এইরকম:

নতুন লাইন ক্যারেক্টার (\n) যোগ করে এবং whiteSpace স্টাইল প্রপার্টি আর্গুমেন্টকে 'pre'-এ সেট করে দীর্ঘ লেবেলগুলি ভেঙে দিন:

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

বোতাম হল একটি ইন্টার‍্যাক্টিভ UI উইজেট যাতে ক্লিক করা যায়। ব্যবহারকারী বোতামে ক্লিক করলে, কল করার জন্য আপনি একটি ফাংশন নির্দিষ্ট করতে পারেন ("কলব্যাক" ফাংশন)। (কলব্যাক ফাংশনের মাধ্যমে ইভেন্ট ম্যানেজ করা সম্পর্কে আরও জানতে, ইভেন্ট পৃষ্ঠা দেখুন)। বোতামে ক্লিক করা হলে নিম্নলিখিত উদাহরণটি ম্যাপের বর্তমান কেন্দ্র প্রিন্ট করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

যা দেখতে অনেকটা এইরকম:

ui.Checkbox

চেকবক্স হল এমন একটি উইজেট যা ব্যবহারকারীকে কোনও বক্সে টিকচিহ্ন দিতে (বা টিকচিহ্ন সরাতে) দেয়। চেকবক্সের স্ট্যাটাস পরিবর্তন হলে, উইজেটে রেজিস্টার করা কলব্যাক একটি বুলিয়ান ভ্যালু পাস করে যা চেকবক্সটি এখন টিকচিহ্নিত কিনা তা নির্দেশ করে। যেমন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

প্রিন্ট করা চেকবক্সটি দেখতে এরকম হওয়া উচিত:

মনে রাখবেন, বক্সে টিকচিহ্ন দিলে ম্যাপে দেখানো একটি লেয়ার চালু হয়ে যায়। অন্যান্য UI কম্পোনেন্টের মতো, Code Editor-এর ম্যাপ প্রোগ্রাম্যাটিক্যালি ম্যানিপুলেট করা যেতে পারে। প্যানেল ও লেআউট পৃষ্ঠা থেকে ম্যাপ অবজেক্ট সম্পর্কে আরও জানুন।

ui.Slider

স্লাইডার হল এমন একটি উইজেট যা ব্যবহারকারীকে স্লাইডার রেঞ্জের মধ্যে একটি সংখ্যা পেতে স্লাইডার অ্যাডজাস্ট করতে দেয়। কনস্ট্রাক্টর ব্যবহার করে অথবা স্লাইডারের প্রপার্টি সেট করে রেঞ্জ কনফিগার করুন। নিম্নলিখিত উদাহরণে ম্যাপ-এর প্রথম লেয়ারের ওপেসিটি সেট করতে স্লাইডার ব্যবহার করা হয়েছে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

স্লাইডারটি দেখতে এরকম হওয়া উচিত:

মনে রাখবেন, স্লাইডারের ডানদিকে স্লাইডার ভ্যালু দেখানো হয়।

ui.DateSlider

DateSlider উইজেটটি Slider উইজেটের মতো, তবে এটি তারিখ স্পষ্টভাবে ম্যানেজ করে। DateSlider জুন ২০১৮ থেকে একটি দিন বেছে নেওয়ার জন্য কনফিগার করা হয়েছে, এটি দেখতে এইরকম:

DateSlider ফিল্টার করার জন্য উপযোগী, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে, যা DateSlider-এ সেট করা DateRange-এর উপর ভিত্তি করে একটি বার্ষিক কম্পোজিট তৈরি করে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

টেক্সটবক্স হল এমন একটি জায়গা যেখানে ব্যবহারকারীর লেখা টেক্সট সংগ্রহ করা হয়। যেমন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

টেক্সটবক্সটি দেখতে এরকম হওয়া উচিত:

মনে রাখবেন, ব্যবহারকারী টেক্সট লেখা শেষ করলে (এবং রিটার্ন প্রেস করলে) অথবা টেক্সট বক্সের বাইরে ক্লিক করলে তবেই কলব্যাক ফায়ার হয়।

ui.Select

বেছে নেওয়ার উইজেটটি পছন্দের একটি ড্রপ-ডাউন মেনু দেখায় যেখান থেকে ব্যবহারকারী একটি বেছে নিতে পারেন। নিম্নলিখিত উদাহরণে একটি ড্রপ-ডাউন মেনু দেখানো হয়েছে যার মাধ্যমে ব্যবহারকারী লোকেশন বেছে নিতে পারবেন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

বেছে নেওয়া উইজেটটি দেখতে এইরকম হওয়া উচিত:

ui.Chart

ui.Chart প্যাকেজের চার্টগুলি Chart প্যাকেজের চার্টের মতোই কাজ করে। নির্দিষ্টভাবে, ui.Chart হল Google Visualization API-এর ChartWrapper-এর ইনস্ট্যান্সের চারপাশে একটি পাতলা শেল। ChartWrapper অবজেক্ট ম্যানিপুলেট করার বিষয়ে আরও তথ্যের জন্য, এই রেফারেন্স দেখুন। Earth Engine-এ চার্ট হেল্পার ফাংশন সম্পর্কে আরও তথ্যের জন্য, চার্ট সংক্রান্ত ডকুমেন্ট দেখুন।

ui.Thumbnail

থাম্বনেল উইজেট ব্যবহার করে ee.Image এবং ee.ImageCollection অবজেক্টের প্রিভিউ দেখা যাবে। ee.Image দেওয়া হলে, উইজেটটি একটি স্থির ছবি দেখাবে; ee.ImageCollection দেওয়া হলে, এটি ইনপুটে প্রতিটি ছবির জন্য একটি ফ্রেম সহ একটি অ্যানিমেশন দেখাবে। ee.Image.getThumbURL() এবং ee.ImageCollection.getVideoThumbURL()-এর মতো, আপনি প্যারামিটার নির্দিষ্ট করে ফলাফল হিসেবে পাওয়া থাম্বনেলের ফর্ম্যাট ও ডাইমেনশন নিয়ন্ত্রণ করতে পারবেন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

থাম্বনেলটি দেখতে এরকম হওয়া উচিত:

ui.Map

ui.Map হল একটি ম্যাপ উইজেট। (আসলে, ডিফল্ট কোড এডিটর Map হল এই ক্লাসের একটি ইনস্ট্যান্স)। অন্যান্য উইজেটের মতো, আপনি কনসোলে ম্যাপ প্রিন্ট করতে পারবেন। আলাদা আলাদা লেয়ার মুছে, পেয়ে বা সেট করে ম্যাপের কন্টেন্ট ম্যানিপুলেট করুন। নিম্নলিখিত উদাহরণটি কনসোলে একটি ম্যাপ প্রিন্ট করে যা কোড এডিটর ম্যাপ-এর সীমা দেখায়:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

ইনসেট ম্যাপটি দেখতে এরকম হওয়া উচিত:

এই উদাহরণে, ব্যবহারকারীকে বড় ম্যাপে ক্লিক করতে হবে যাতে ছোট ম্যাপে ইনসেট আঁকা যায়।

এছাড়াও, ম্যাপ ইনস্ট্যান্সে layers() কল করে আপনি ম্যাপে লেয়ার ম্যানিপুলেট করতে পারবেন। layers(), ui.data.ActiveList রিটার্ন করে, যা অ্যারের মতো অবজেক্ট। এটি পরিবর্তন করা হলে, ম্যাপের লেয়ারও পরিবর্তন হয়ে যায়। ui.Map.Layer বিভাগ থেকে আরও জানুন।

ui.Map.Layer

ui.Button-এর মতো লেয়ার কোনও স্টাইল করা যায় এমন উইজেট নয়। এটি ম্যাপে লেয়ারের ডেটা উপস্থাপনা মাত্র। নিচের উদাহরণে দেখানো হয়েছে যে কীভাবে লেয়ার তৈরি করে এবং ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে লেয়ারের প্রপার্টি আপডেট করে ম্যাপ আপডেট করা যায়:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2_HARMONIZED/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

আপনি যদি তুলনামূলকভাবে ব্যয়বহুল-টু-কম্পিউট লেয়ার দেখাতে চান (যেমন কোনও অ্যাপে), তাহলে পারফর্ম্যান্সের কারণে আপনার ডেটা Cloud Storage বাকেটে এক্সপোর্ট করা আপনার পক্ষে উপযুক্ত হতে পারে। এই স্ট্যাটিক, শুধুমাত্র ভিজ্যুয়ালাইজেশন লেয়ার আপনার অ্যাপ এবং স্ক্রিপ্টকে আরও রেসপন্সিভ করে তুলতে পারে। এই উদ্দেশ্যে আপনি Export.map.toCloudStorage() ব্যবহার করে স্ট্যাটিক ডিসপ্লে লেয়ার তৈরি করতে পারবেন। Export.map.toCloudStorage()-এর মাধ্যমে আগে এক্সপোর্ট করা টাইল সেট ব্যবহার করতে, নির্দিষ্ট Cloud Storage বাকেট ও পাথ থেকে নতুন ui.Map.Layer তৈরি করুন:

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

Cloud Storage লেয়ার লোড করে এমন স্ক্রিপ্ট রান করার সময় আপনি এই সতর্কতামূলক মেসেজ দেখতে পেতে পারেন:

ui.Map.DrawingTools

কোড এডিটরে Map-এ ডিফল্ট হিসেবে যোগ করা জ্যামিতি ড্রয়িং টুলের একটি সেট আছে। আপনি ডিফল্ট Map-এ এইসব টুলের আচরণ পরিবর্তন করতে পারবেন Map.drawingTools() কল করে। যেমন, ড্রয়িং টুল লুকাতে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

Map.drawingTools().setShown(false);

নতুন তৈরি করা ম্যাপে ডিফল্ট হিসেবে ড্রয়িং টুল থাকে না, তবে ম্যাপে drawingTools() মেথড কল করে এটি চালু করা যেতে পারে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

ড্রয়িং টুলের মাধ্যমে আঁকা জ্যামিতিক লেয়ারগুলি একটি ui.data.ActiveList-এ রাখা হয় যা আপনি Map.drawingTools().layers() কল করে অ্যাক্সেস করতে পারবেন। অন্যান্য অ্যাক্টিভ তালিকার মতো জিওমেট্রি লেয়ারের তালিকাও ইভেন্টে সাড়া দেয়, যেমন Map.layers()-এর মাধ্যমে ফেরত পাঠানো Map-এর লেয়ারের তালিকা। টুল দ্বারা আঁকা জ্যামিতি লেয়ারের (যা ডিফল্ট হিসেবে দেখানো হয়) দৃশ্যমানতা কীভাবে সেট করবেন তা নিম্নলিখিত উদাহরণ থেকে দেখুন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

ড্রয়িং টুলে প্রোগ্রাম্যাটিক্যালি কোনও লেয়ার যোগ করতে, আপনি ড্রয়িং টুলে addLayer মেথড কল করতে পারেন অথবা সরাসরি লেয়ার তালিকায় কোনও লেয়ার যোগ করতে পারেন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

আপনি কোনও অ্যাপ প্রকাশ করলে, ড্রয়িং টুলের স্ট্যাটাসও ক্যারি ওভার করা হয়। আপনি ড্রয়িং টুল দেখানো বা লুকানোর বিকল্প বেছে নিলে, সেগুলি আপনার অ্যাপেও দেখানো বা লুকানো হবে। আপনার ইম্পোর্টে থাকা জিওমেট্রিও আপনার অ্যাপে ক্যারি ওভার করা হবে।

ui.Map.GeometryLayer

GeometryLayer হল জ্যামিতির একটি সংগ্রহ যা একটি একক Geometry, GeometryCollection, বা FeatureCollection হিসেবে কাজ করে যা আপনার স্ক্রিপ্টের একেবারে উপরে ইমপোর্ট বিভাগে যোগ করা হয় এবং কোডে রেফারেন্স করা যেতে পারে।

ড্রয়িং টুলের মাধ্যমে আঁকা GeometryLayer-এর ডিফল্ট অ্যাকশন থাকে যা আপনি নতুন কলব্যাক ফাংশন প্রদান করে ওভাররাইড করতে পারবেন। যেমন, ধরুন আপনি চান যে কোনও ইভেন্ট ট্রিগার করার জন্য জিওমেট্রিতে ইন্টার‍্যাক্টিভ পরিবর্তন হোক। কোনও নির্দিষ্ট আচরণ প্রয়োগ করতে, ব্যবহারকারীর অ্যাকশনের উত্তর দেওয়ার জন্য আপনি টুলে onEdit(), onErase() বা onDraw() পদ্ধতি সেট করতে পারেন। ব্যবহারকারী কোনও জিওমেট্রি যোগ/এডিট/মুছে দিলে কীভাবে গণনা ট্রিগার করতে হয় এবং গণনার ফলাফল সহ লেবেল আপডেট করতে হয় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Load elevation data.
var srtm = ee.Image('NASA/NASADEM_HGT/001').select('elevation');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

মনে রাখবেন যে setLinked() ব্যবহার করা হয় জিওমেট্রি ড্রয়িং টুল এবং কোড এডিটরের ইমপোর্ট বিভাগের মধ্যে কানেকশন টগল করার জন্য। এই উদাহরণে, ইম্পোর্ট তৈরি হওয়া আটকাতে জিওমেট্রি টুল আনলিঙ্ক করা হয়েছে। toGeometry ব্যবহার করে লেয়ারকে ee.Geometry-এ কনভার্ট করা হয়। ইম্পোর্ট করা লেয়ার Feature বা FeatureCollection-এর প্রতিনিধিত্ব করলে, আপনি getEeObject() ব্যবহার করে অন্তর্নিহিত EE অবজেক্ট ফিরিয়ে আনতে পারবেন। এছাড়াও, জিওমেট্রির প্রতিটি মুভমেন্ট যাতে কলব্যাক ফাংশন ট্রিগার না করে, তার জন্য ui.util.debounce-এর ব্যবহার লক্ষ্য করুন। নির্দিষ্টভাবে, শেষ ইভেন্ট থেকে ১০০ মিলিসেকেন্ড অতিবাহিত না হওয়া পর্যন্ত ফাংশনটি কাজ করবে না। এটি নিশ্চিত করতে সাহায্য করে যে ব্যবহারকারী এডিট অ্যাকশন সম্পূর্ণ করলে তবেই ফাংশনটি রান করে।

ইমপোর্ট করা ডেটায় একটি জিওমেট্রি লেয়ার Geometry বা GeometryCollection-এর সাথে যুক্ত, তাই এতে শুধুমাত্র একই জিওডেসিক স্টেট সহ জিওমেট্রি থাকতে পারে কারণ GeoJSON ফর্ম্যাট জিওমেট্রির সংগ্রহের জন্য শুধুমাত্র একটি জিওডেসিক স্টেটকে অনুমতি দেয় (আরও তথ্যের জন্য জিওডেসিক বনাম প্ল্যানার জিওমেট্রি পৃষ্ঠা দেখুন)। লেয়ারের নামের পাশে থাকা গিয়ার আইকনে প্রেস করে জিওমেট্রি লেয়ারকে FeatureCollection-এ পরিবর্তন করলে আপনি একই লেয়ারে জিওডেসিক ও প্ল্যানার জিওমেট্রি যোগ করতে পারবেন। তবে, এটিকে আবার Geometry-এ কনভার্ট করলে সমস্যা হবে। এটি এড়াতে, হয় FeatureCollection-এ কনভার্ট করুন অথবা লেয়ারে শুধুমাত্র একটি জিওডেসিক স্টেট না হওয়া পর্যন্ত জিওমেট্রি মুছে দিন।

ui.Map.Linker

লেয়ারের মতো লিঙ্কারও স্টাইল করা যায় এমন উইজেট নয়। এটি হল একটি ব্যাকগ্রাউন্ড ইউটিলিটি যা একাধিক ui.Map ইনস্ট্যান্সের মুভমেন্ট সিঙ্ক করতে ব্যবহার করা যেতে পারে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

পাশাপাশি রেখে তুলনা করার জন্য ui.SplitPanel উপযোগী। দুটি সাধারণ প্যানেলের তুলনায় ui.SplitPanel-এর সুবিধা হল, ui.SplitPanel-এর প্যানেলগুলির মধ্যে ওয়াইপ ট্রানজিশন করার জন্য হ্যান্ডেল ব্যবহার করা যেতে পারে। নিচের উদাহরণে ui.SplitPanel ব্যবহার করে পোড়া দাগের স্পেকট্রাল পার্থক্য দেখানো হয়েছে:

কোড এডিটর (জাভাস্ক্রিপ্ট)

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

মনে রাখবেন যে wipe প্যারামিটারটি true-এ সেট করা আছে, ui.SplitPanel কনস্ট্রাক্টরে যাতে ব্যবহারকারী হ্যান্ডেলটি সোয়াইপ করতে পারেন দুটি ভিজ্যুয়ালাইজেশনের মধ্যে সামনে এবং পিছনে।

উইজেট স্টাইল করা

উইজেটের স্টাইল প্রপার্টির ডিকশনারি দ্বারা উইজেটের স্টাইল কন্ট্রোল করা হয়। আপনি উইজেটে style() কল করে ডিকশনারি অ্যাক্সেস করতে পারবেন। style()-এর মাধ্যমে ফেরত পাঠানো অবজেক্টটি হল ui.data.ActiveDictionary-এর একটি ইনস্ট্যান্স। এর অর্থ হল, স্টাইল ডিকশনারির প্রপার্টি সেট করলে, উইজেট যেভাবে দেখানো হয় তা অটোমেটিক আপডেট হয়ে যায়। প্রতিটি উইজেটের স্টাইল ডিকশনারির জন্য অনুমোদিত কীগুলি style() কলের জন্য উইজেটের রেফারেন্স ডকুমেন্টে বিস্তারিতভাবে দেওয়া হয়েছে।

উইজেটের স্টাইল কনস্ট্রাক্টরের মাধ্যমে সেট করা যেতে পারে, style().set() কল করে অথবা ডিকশনারি আর্গুমেন্ট সহ style() কল করে। যেমন:

কোড এডিটর (জাভাস্ক্রিপ্ট)

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

মনে রাখবেন যে এই উদাহরণে, লেবেলটি প্রথমে কী এবং ভ্যালু আর্গুমেন্ট সহ style().set() কল করে, তারপর একটি ডিকশনারি আর্গুমেন্ট সহ style().set() কল করে স্টাইল করা হয়। দ্বিতীয় কল প্রথমটিকে ওভাররাইড করে না; এটি সম্পূর্ণ স্টাইল ডিকশনারি পরিবর্তন করার পরিবর্তে স্বতন্ত্র স্টাইল প্রপার্টি যোগ করে ও পরিবর্তন করে।

উইজেটের স্টাইলিং বিকল্প সম্পর্কে আরও তথ্যের জন্য, প্রতিটি উইজেটের জন্য style() ডকুমেন্টে তালিকাভুক্ত স্টাইলের জন্য এই ক্যাসকেডিং স্টাইল শিট (CSS) রেফারেন্স দেখুন। মনে রাখবেন, Earth Engine উইজেটের জন্য অনুমোদিত স্টাইলগুলি CSS স্টাইল থেকে বিভিন্ন জায়গায় আলাদা, বিশেষ করে font-style এবং font-weight-এর জন্য যথাক্রমে fontSize এবং fontWeight।

স্টাইল ডিকশনারিতে এমন কীও থাকে যা উইজেটের পজিশন কন্ট্রোল করে। পজিশনাল প্রপার্টি কীভাবে ব্যবহার করতে হয় সেই সম্পর্কে আরও তথ্যের জন্য প্যানেল ও লেআউট পৃষ্ঠা দেখুন।