ابزارک ها

ویجت های مختلفی وجود دارد که می توانید برای ایجاد رابط کاربری خود از آنها استفاده کنید. این ویجت ها شامل دکمه ها، چک باکس ها، لغزنده ها، جعبه های متنی و منوهای انتخاب هستند. ویجت ها را فقط یک بار می توان چاپ یا به یک پانل اضافه کرد. بخش‌های زیر عملکرد اصلی، ظاهر و احساس ویجت‌ها را نشان می‌دهد. برای اطلاعات بیشتر در مورد استایل دادن به ویجت‌هایتان، بخش سبک را ببینید. نمونه های زیر به سادگی ویجت ها را در کنسول 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);

چک باکس چاپ شده باید چیزی شبیه به این باشد:

توجه داشته باشید که با علامت زدن کادر، یک لایه نمایش داده شده روی نقشه روشن می شود. همانند سایر اجزای رابط کاربری، نقشه ویرایشگر کد را می توان به صورت برنامه نویسی دستکاری کرد. درباره شی Map در صفحه پانل ها و طرح بندی ها بیشتر بیاموزید.

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 پیکربندی شده برای انتخاب یک روز از ژوئن 2018 به نظر می رسد:

DateSlider برای فیلتر کردن مجموعه ها مفید است، همانطور که در مثال زیر نشان داده شده است، که یک ترکیب سالانه را بر اساس مجموعه DateRange در DateSlider می سازد:

ویرایشگر کد (جاوا اسکریپت)

// 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.انتخاب کنید

ویجت انتخاب یک منوی کشویی از انتخاب ها را نشان می دهد که کاربر می تواند یکی از آنها را انتخاب کند. مثال زیر یک منوی کشویی را نشان می دهد که به کاربر اجازه می دهد یک مکان را انتخاب کند:

ویرایشگر کد (جاوا اسکریپت)

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 یک پوسته نازک در اطراف نمونه‌ای از ChartWrapper Google Visualization API است. برای اطلاعات بیشتر در مورد دستکاری اشیاء ChartWrapper ، به این مرجع مراجعه کنید. برای اطلاعات بیشتر در مورد عملکردهای کمکی نمودار در Earth Engine، به اسناد نمودارها مراجعه کنید.

ui.تصویر کوچک

ویجت تصویر کوچک را می توان برای پیش نمایش اشیاء 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

اگر می خواهید ( مثلاً در یک برنامه) یک لایه نسبتاً گران برای محاسبه را نمایش دهید، ممکن است به دلایل عملکرد لازم باشد که داده های خود را به یک سطل ذخیره سازی ابری صادر کنید. این لایه های ایستا و فقط تجسم می توانند برنامه ها و اسکریپت های شما را پاسخگوتر کنند. برای این منظور می توانید یک لایه نمایش ثابت با استفاده از Export.map.toCloudStorage() ایجاد کنید. برای استفاده از یک مجموعه کاشی که قبلاً توسط Export.map.toCloudStorage() صادر شده است، یک ui.Map.Layer جدید از یک سطل و مسیر Cloud Storage مشخص بسازید:

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 که توسط Map.layers() برگردانده شده است. مثال زیر نشان می دهد که چگونه می توانید دید لایه های هندسی ترسیم شده توسط ابزارها (که به طور پیش فرض نشان داده شده اند) را تنظیم کنید:

ویرایشگر کد (جاوا اسکریپت)

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 عمل می‌کند که به بخش imports در بالای اسکریپت شما اضافه می‌شود و می‌تواند در کد به آن ارجاع داده شود.

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() برای تغییر دادن ارتباط بین ابزار ترسیم هندسه و بخش Imports در ویرایشگر کد استفاده می شود. در این مثال، ابزارهای هندسه برای جلوگیری از ایجاد واردات، پیوند ندارند. toGeometry برای تبدیل لایه به ee.Geometry استفاده می شود. اگر لایه وارد شده یک Feature یا FeatureCollection را نشان می دهد، می توانید شی EE زیرین را با استفاده از getEeObject() بازیابی کنید. همچنین به استفاده از ui.util.debounce برای جلوگیری از هر حرکت هندسه از راه اندازی تابع callback توجه کنید. به طور خاص، این تابع تا زمانی که 100 میلی ثانیه از آخرین رویداد سپری نشده باشد، فعال نمی شود. این کمک می کند تا اطمینان حاصل شود که عملکرد تنها زمانی اجرا می شود که کاربر عملیات ویرایش را کامل کرده باشد.

یک لایه هندسه در واردات با یک Geometry یا GeometryCollection مرتبط است، بنابراین فقط می‌تواند شامل هندسه‌هایی با همان حالت ژئودزیکی باشد، زیرا قالب GeoJSON تنها به یک حالت ژئودزیک برای مجموعه هندسه‌ها اجازه می‌دهد (برای اطلاعات بیشتر به صفحه Geodesic در مقابل صفحه هندسه‌های مسطح مراجعه کنید). تبدیل لایه هندسه به 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 Sheet (CSS) برای سبک‌های فهرست‌شده در اسناد style() برای هر ویجت مراجعه کنید. توجه داشته باشید که سبک‌های مجاز برای ویجت‌های Earth Engine در چندین مکان با سبک‌های CSS متفاوت است، به‌ویژه fontSize و fontWeight به ترتیب برای font-style و font-weight .

فرهنگ لغت سبک ها همچنین حاوی کلیدهایی است که موقعیت ویجت را کنترل می کنند. برای اطلاعات بیشتر در مورد نحوه استفاده از ویژگی های موقعیتی ، صفحه پانل ها و چیدمان ها را ببینید.