विजेट

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

यूज़र इंटरफ़ेस (यूआई) बनाने के लिए, कई तरह के विजेट इस्तेमाल किए जा सकते हैं. इन विजेट में ये चीज़ें शामिल होती हैं: बटन, चेकबॉक्स, स्लाइडर, टेक्स्टबॉक्स, और चुनने के लिए मेन्यू. विजेट को सिर्फ़ एक बार प्रिंट किया जा सकता है या पैनल में जोड़ा जा सकता है. यहां दिए गए सेक्शन में, विजेट के बुनियादी फ़ंक्शन, लुक, और स्टाइल के बारे में बताया गया है. विजेट को स्टाइल देने के बारे में ज़्यादा जानकारी के लिए, स्टाइल सेक्शन देखें. नीचे दिए गए उदाहरणों में, कंसोल में विजेट 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

बटन, इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) विजेट होता है, जिस पर क्लिक किया जा सकता है. उपयोगकर्ता के बटन पर क्लिक करने पर, किसी फ़ंक्शन को कॉल करने के लिए, "कॉलबैक" फ़ंक्शन तय किया जा सकता है. कॉलबैक फ़ंक्शन की मदद से इवेंट मैनेज करने के बारे में ज़्यादा जानकारी के लिए, इवेंट पेज देखें. नीचे दिए गए उदाहरण में, बटन पर क्लिक करने पर मैप के मौजूदा सेंटर को प्रिंट किया गया है:

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.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 विजेट की तरह ही होता है. हालांकि, यह विजेट तारीखों को साफ़ तौर पर दिखाता है. जून 2018 का कोई दिन चुनने के लिए कॉन्फ़िगर किया गया 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);

टेक्स्टबॉक्स कुछ ऐसा दिखेगा:

ध्यान दें कि कॉलबैक सिर्फ़ तब ट्रिगर होता है, जब उपयोगकर्ता टेक्स्ट डालना बंद कर देता है (और return दबा देता है) या उपयोगकर्ता टेक्स्टबॉक्स से दूर क्लिक करता है.

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 विज़ुअलाइज़ेशन एपीआई के 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 एक मैप विजेट है. (असल में, डिफ़ॉल्ट कोड एडिटर मैप इस क्लास का एक इंस्टेंस है). अन्य विजेट की तरह, कंसोल पर मैप को भी प्रिंट किया जा सकता है. अलग-अलग लेयर को मिटाकर, सेट करके या फिर पाकर, मैप के कॉन्टेंट में बदलाव करें. नीचे दिए गए उदाहरण में, कोड एडिटर मैप के दायरे को दिखाने वाला मैप, कंसोल पर प्रिंट किया गया है:

// 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/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.drawingTools() को कॉल करके, डिफ़ॉल्ट Map में इन टूल के काम करने का तरीका बदला जा सकता है. उदाहरण के लिए, ड्रॉइंग टूल को छिपाने के लिए:

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('USGS/SRTMGL1_003');
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 का इस्तेमाल किया गया है. खास तौर पर, यह फ़ंक्शन तब तक ट्रिगर नहीं होगा, जब तक कि पिछले इवेंट के 100 मिलीसेकंड बाद न हो जाए. इससे यह पक्का करने में मदद मिलती है कि फ़ंक्शन सिर्फ़ तब चलता है, जब उपयोगकर्ता ने बदलाव करने की कार्रवाई पूरी कर ली हो.

इंपोर्ट की गई ज्यामिति लेयर, 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 पैरामीटर को ui.SplitPanel कन्स्ट्रक्टर में true पर सेट किया गया है, ताकि उपयोगकर्ता दोनों विज़ुअलाइज़ेशन के बीच हैंडल को आगे-पीछे स्वाइप कर सके.

विजेट की स्टाइल तय करना

विजेट की स्टाइल को, स्टाइल प्रॉपर्टी की विजेट की डिक्शनरी से कंट्रोल किया जाता है. विजेट पर 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() दस्तावेज़ों में दी गई स्टाइल के लिए, यह कैस्केडिंग स्टाइल शीट (सीएसएस) रेफ़रंस देखें. ध्यान दें कि Earth Engine विजेट के लिए इस्तेमाल की जा सकने वाली स्टाइल, कई जगहों पर सीएसएस स्टाइल से अलग होती हैं. जैसे, font-style के लिए fontSize और font-weight के लिए fontWeight.

स्टाइल डिक्शनरी में वे बटन भी शामिल होते हैं जो विजेट की पोज़िशन को कंट्रोल करते हैं. पोज़िशनल प्रॉपर्टी इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, पैनल और लेआउट पेज देखें.