Skip to main content

Interactive Map editor

The Interactive Map is a singleton Leaflet Webview editor. Open it from the Profiles view title action or Open Map View. It follows the VS Code light or dark theme by default and can switch to satellite or plan basemaps.

Manage layer visibility and opacity, open the visualization editor for RGB, HSV, continuous, categorical, or interval rendering, and expose a scale. The inspector samples visible layers at a clicked point, while the status bar reports coordinates and zoom.

The local Python bridge listens on localhost:31415 for scripts that add Earth Engine tile layers or update the viewport.

For a complete example of custom map colors, see Customizing map basemaps.

note

To add the DMSP-OLS night-lights trend clipped to France, open the Command Palette and search for Earth Engine: Demo – Night Lights Trend.

In-map visualization editing​

In the Layers panel, select Edit visualization on a layer to open its editor. Choose a rendering mode and adjust its parameters: image bands or feature properties, value ranges, palettes, classes or intervals, and opacity. Image layers support RGB, HSV, continuous, categorical, and interval modes; FeatureCollections support uniform, continuous, categorical, and interval styling. Select Apply to update the layer on the map.

Select Code in the editor to view the equivalent Python vis_params for the current visualization. Use the copy button to copy the parameters, then pass them to Map.addLayer in your vscee script.

Visualization parameters​

Reusable visualization presets are stored as string properties on an image or FeatureCollection using set. Each property key follows the structure visualization_<number>_<keyword>: the number identifies the preset, and the keyword identifies one of its settings. An asset can contain multiple numbered presets. For image assets, you can also add or edit these properties in the preview editor: select Edit, then open the Properties tab.

info

This convention for storing visualization parameters was created by the SEPAL team at the Food and Agriculture Organization of the United Nations (FAO).

For a child image in an ImageCollection, presets on the image take precedence. If it has none, the editor automatically uses presets from its immediate parent collection.

The sections below describe the parameters for each visualization mode and provide example property dictionaries. Apply a dictionary with image.set(preset_properties) or features.set(preset_properties), then use the returned object when adding the layer. For direct Python vis_params, see Map.addLayer.

Image​

RGB​

RGB displays three image bands as red, green, and blue, in that order. Select the bands and set the minimum and maximum values for each channel in the visualization editor. A value below its minimum renders as 0 and a value above its maximum renders as 255; values between are stretched into the display range. You can optionally adjust gamma to change the brightness of the midtones.

The Range control can calculate per-band bounds from the pixels currently visible on the map: choose a 1, 2, or 3 sigma stretch, or a 90%, 98%, or 100% percentile stretch. Choose Custom to enter bounds manually. The gamma control defaults to 1 and accepts values from 0.1 to 5.

To add an RGB preset to an existing image, set image properties like these. The preset assigns the s2_red, s2_green, and s2_blue bands to the red, green, and blue channels and applies a shared 0–3000 range. Once stored on the image, it can be selected from the Preset… dropdown:

{
  "visualization_0_name": "Sentinel-2 RGB - July 2026",
  "visualization_0_type": "rgb",
  "visualization_0_bands": "s2_red,s2_green,s2_blue",
  "visualization_0_min": "0",
  "visualization_0_max": "3000"
}

For a direct Python call, see Image > RGB in vscee.

HSV​

HSV uses three bands as hue, saturation, and value. In the editor, choose a band for each channel and enter its Min and Max. The map normalizes each band between those bounds to 0–1, then converts HSV to RGB for display. Hue controls the color, saturation its intensity, and value its brightness; unlike RGB, this mode has no gamma control.

The Range control can calculate bounds separately for each selected band from the visible pixels using a 1, 2, or 3 sigma stretch or a 90%, 98%, or 100% percentile stretch. Select Custom to edit the three ranges manually.

An HSV preset on an existing image stores the three bands and their ranges as string properties:

{
  "visualization_4_name": "Terrain HSV",
  "visualization_4_type": "hsv",
  "visualization_4_bands": "hsv_hue,hsv_saturation,hsv_value",
  "visualization_4_min": "0,0,0",
  "visualization_4_max": "1,1,1"
}

For a direct Python call, see Image > HSV in vscee.

Continuous​

Continuous rendering maps the values in one image band through a color palette. Choose the Band, then set Min and Max: values at the minimum receive the first color and values at the maximum receive the last; intermediate values blend between palette colors. The Range control can derive these bounds from the visible pixels using the same sigma and percentile stretches as RGB, or you can enter them with Custom.

Under Palette, select a color scheme or set the number of colors (2–12). You can add or remove colors and edit each one with the picker or hex field; the ramp preview shows the resulting gradient.

{
  "visualization_1_name": "VIIRS NDVI - July 2026",
  "visualization_1_type": "continuous",
  "visualization_1_bands": "viirs_ndvi",
  "visualization_1_min": "0.0199",
  "visualization_1_max": "1.093",
  "visualization_1_palette": "#8c5a3c,#e2c76a,#d9e9aa,#75b878,#126c46"
}

For a direct Python call, see Image > Continuous in vscee.

Categorical​

Categorical rendering assigns one palette color to each exact numeric value in one image band. Choose the Band, then build the Classes legend: each row has a pixel value, a display name, and a color editable with the picker or hex field. Add or remove rows, choose a Scheme to fill the colors, or use Detect to replace the rows with classes found in the visible area. values and palette must have the same length; optional labels provide display names. Pixels whose values are not listed are masked.

{
  "visualization_3_name": "CORINE land cover - 2018",
  "visualization_3_type": "categorical",
  "visualization_3_bands": "corine_class_index",
  "visualization_3_values": "0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43",
  "visualization_3_labels": "111,112,121,122,123,124,131,132,133,141,142,211,212,213,221,222,223,231,241,242,243,244,311,312,313,321,322,323,324,331,332,333,334,335,411,412,421,422,423,511,512,521,522,523",
  "visualization_3_palette": "#e6004d,#ff0000,#cc4df2,#cc0000,#e6cccc,#e6cce6,#a600cc,#a64dcc,#ff4dff,#ffa6ff,#ffe6ff,#ffffa8,#ffff00,#e6e600,#e68000,#f2a64d,#e6a600,#e6e64d,#ffe6a6,#ffe64d,#e6cc4d,#f2cca6,#80ff00,#00a600,#4dff00,#ccf24d,#a6ff80,#a6e64d,#a6f200,#e6e6e6,#cccccc,#ccffcc,#000000,#a6e6cc,#a6a6ff,#4d4dff,#ccccff,#e6e6ff,#a6a6e6,#00ccf2,#80f2e6,#00ffa6,#a6ffe6,#e6f2ff"
}

For a direct Python call, see Image > Categorical in vscee.

Intervals​

Intervals assign a color to each numeric range in one image band. Choose the Band and set the overall Min and Max, or derive them from the visible pixels with a sigma or percentile Range stretch. Under Intervals, the Bins control creates 2–12 intervals; choose a color scheme, then edit each row's upper bound, color, and optional name. You can also add or remove intervals. Existing presets can contain more bins, as the 23-interval example below does.

The resulting breaks must be strictly increasing and contain exactly one more value than palette. Each interval includes its lower bound and excludes its upper bound; optional labels name the intervals in the scale.

{
  "visualization_2_name": "ERA5-Land maximum 2m temperature - July 2026",
  "visualization_2_type": "intervals",
  "visualization_2_bands": "era5_tmax_c",
  "visualization_2_breaks": "-273.15,-40,-35,-30,-25,-20,-17.5,-15,-10,-5,-2.5,0,5,10,15,20,25,30,32.5,35,37.5,40,45,100",
  "visualization_2_palette": "#BA68C8,#8E24AA,#6A1B9A,#7E57C2,#B39DDB,#ccd0ed,#1A237E,#0D47A1,#1565C0,#03A9F4,#00ffff,#1B5E20,#43A047,#8BC34A,#FFF176,#FFCA28,#FFA000,#FF6F00,#cd2000,#96132d,#fab2f5,#F06292,#E91E63"
}

For a direct Python call, see Image > Intervals in vscee.

FeatureCollection​

Feature collections are rendered either with one uniform style or by mapping a feature property to colors. In stored presets, property names the selected feature property for property-based modes. Palette colors must be six-digit hex RGB values, with or without a leading #. In every vector mode, the editor also exposes Width for lines and Point size for points; these affect the rendered features independently of the property-to-color mapping.

Uniform​

Uniform styling applies the same appearance to every feature, without selecting a property. In the editor, turn Stroke and Fill on or off independently and choose their colors with the picker or hex fields. Use Width for outlines and Point size for points; the fill is transparent by default. Stored uniform presets use color, fillColor, and width as shown below, while direct Map.addLayer calls can also specify pointSize.

{
  "visualization_0_name": "Boundaries",
  "visualization_0_type": "uniform",
  "visualization_0_color": "#008000",
  "visualization_0_fillColor": "#FFFFFF",
  "visualization_0_width": "2"
}

For a direct Python call, see FeatureCollection > Uniform in vscee.

Continuous​

Continuous styling maps a numeric feature property between Min and Max through a palette of at least two colors. Choose the Property and enter the bounds, or use Range > Visible min/max to derive them from features in the current view. Under Palette, choose a scheme or set 2–12 colors, then adjust individual colors with the picker or hex fields. Values between the bounds blend between colors; the shared Width and Point size controls still apply.

{
  "visualization_1_name": "July 2026 mean daily precipitation",
  "visualization_1_type": "continuous",
  "visualization_1_property": "july_mean_daily_precip_mm",
  "visualization_1_min": "0",
  "visualization_1_max": "3",
  "visualization_1_palette": "#f7fbff,#c6dbef,#6baed6,#2171b5,#08306b"
}

For a direct Python call, see FeatureCollection > Continuous in vscee.

Categorical​

Categorical styling assigns a color to each exact numeric or string value in a feature property. Choose the Property and edit each Classes row's value, name, and color. Add or remove rows, choose a Scheme, or use Detect to replace the legend with classes present in the visible area. Each distinct value needs one color; names become optional labels in the scale. Features with unlisted values are not drawn.

{
  "visualization_2_name": "CORINE majority land cover - 2018",
  "visualization_2_type": "categorical",
  "visualization_2_property": "corine_majority",
  "visualization_2_values": "111, 112, 121, 122, 123, 124, 131, 132, 133, 141, 142, 211, 212, 213, 221, 222, 223, 231, 241, 242, 243, 244, 311, 312, 313, 321, 322, 323, 324, 331, 332, 333, 334, 335, 411, 412, 421, 422, 423, 511, 512, 521, 522, 523",
  "visualization_2_palette": "#e6004d, #ff0000, #cc4df2, #cc0000, #e6cccc, #e6cce6, #a600cc, #a64dcc, #ff4dff, #ffa6ff, #ffe6ff, #ffffa8, #ffff00, #e6e600, #e68000, #f2a64d, #e6a600, #e6e64d, #ffe6a6, #ffe64d, #e6cc4d, #f2cca6, #80ff00, #00a600, #4dff00, #ccf24d, #a6ff80, #a6e64d, #a6f200, #e6e6e6, #cccccc, #ccffcc, #000000, #a6e6cc, #a6a6ff, #4d4dff, #ccccff, #e6e6ff, #a6a6e6, #00ccf2, #80f2e6, #00ffa6, #a6ffe6, #e6f2ff",
  "visualization_2_labels": "111, 112, 121, 122, 123, 124, 131, 132, 133, 141, 142, 211, 212, 213, 221, 222, 223, 231, 241, 242, 243, 244, 311, 312, 313, 321, 322, 323, 324, 331, 332, 333, 334, 335, 411, 412, 421, 422, 423, 511, 512, 521, 522, 523"
}

Stored values are parsed as numbers. Values typed into new Classes rows are also converted when they look numeric: "01" and "1" both become 1, so they cannot remain distinct. Use Detect to preserve existing string classes, or pass string values directly to Map.addLayer.

For a direct Python call, see FeatureCollection > Categorical in vscee.

Intervals​

Interval styling maps a numeric feature property to one color per range. Choose the Property and the first and last bounds, or select Range > Visible min/max to derive them from features in view. Choose 2–12 Bins and a color scheme, then edit each interval's upper bound, color, and optional name, or add and remove intervals.

The resulting breaks must be strictly increasing and contain one more value than palette; each interval includes its lower bound and excludes its upper bound.

{
  "visualization_3_name": "July 2026 mean temperature - intervals",
  "visualization_3_type": "intervals",
  "visualization_3_property": "july_mean_temp_c",
  "visualization_3_breaks": "-273.15, -40, -35, -30, -25, -20, -17.5, -15, -10, -5, -2.5, 0, 5, 10, 15, 20, 25, 30, 32.5, 35, 37.5, 40, 45, 100",
  "visualization_3_palette": "#BA68C8, #8E24AA, #6A1B9A, #7E57C2, #B39DDB, #ccd0ed, #1A237E, #0D47A1, #1565C0, #03A9F4, #00ffff, #1B5E20, #43A047, #8BC34A, #FFF176, #FFCA28, #FFA000, #FF6F00, #cd2000, #96132d, #fab2f5, #F06292, #E91E63"
}

For a direct Python call, see FeatureCollection > Intervals in vscee.