Skip to main content

Customizing map basemaps

Each setting customizes one basemap slot. The map chooses a slot based on the VS Code colour theme and whether the plan or satellite toggle is active. Add the setting you want to change to your VS Code settings.json.

Google Maps API key required

These custom styles only work when the map uses Google Map Tiles. Set up a Google Maps API key with the Map Tiles API enabled as described in the API key setup guide. Without a valid key, the map uses OpenStreetMap and Esri fallback tiles, which do not support these styles.

Light​

Used for the default map view when VS Code is using a light colour theme and the plan and satellite toggles are off.

"earthengine.map.basemap.light": {
  "mapType": "roadmap",
  "styles": [
    { "elementType": "geometry", "stylers": [{ "color": "#ffffff" }] },
    { "elementType": "labels", "stylers": [{ "visibility": "off" }] },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{ "color": "#ebf0f4" }]
    }
  ]
}

Dark​

Used for the default map view when VS Code is using a dark colour theme and the plan and satellite toggles are off.

"earthengine.map.basemap.dark": {
  "mapType": "roadmap",
  "styles": [
    { "elementType": "geometry", "stylers": [{ "color": "#363d46" }] },
    { "elementType": "labels", "stylers": [{ "visibility": "off" }] },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{ "color": "#22272e" }]
    }
  ]
}

Plan Light​

Used when the plan toggle is active and VS Code is using a light colour theme. The plan toggle switches between this basemap and the default light basemap; it does not change the map's Earth Engine layers.

"earthengine.map.basemap.planLight": {
  "mapType": "roadmap",
  "styles": [
    { "elementType": "geometry", "stylers": [{ "color": "#ffffff" }] },
    { "elementType": "labels.text.fill", "stylers": [{ "color": "#616161" }] },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [{ "color": "#e6f3e2" }]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{ "color": "#ebf0f4" }]
    }
  ]
}

Plan Dark​

Used when the plan toggle is active and VS Code is using a dark colour theme. The plan toggle switches between this basemap and the default dark basemap; it does not change the map's Earth Engine layers.

"earthengine.map.basemap.planDark": {
  "mapType": "roadmap",
  "styles": [
    { "elementType": "geometry", "stylers": [{ "color": "#363d46" }] },
    { "elementType": "labels.text.fill", "stylers": [{ "color": "#9e9e9e" }] },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [{ "color": "#1a321a" }]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [{ "color": "#22272e" }]
    }
  ]
}

Each snippet is an individual entry for settings.json; entries can be combined if you want to customize multiple slots. The satellite toggle is unchanged by these four settings. For supported fields and style syntax, see the settings reference and Google Maps styling reference.

VS Code applies changes to an open map immediately.