Skip to content

Add, edit or remove presets

Jump to bottom
Clément Prod'homme edited this page Jul 13, 2020 · 1 revision

Presets are a collection of default settings for the map. They include a default basemap, and a list of contextual and data layers. In this guide, you will learn how to add new presets, edit existing ones, and even how to remove them.

Table of content

Definition

The presets are stored in the PRESETS variable, in the file components/map/constants.js.

PRESETS is an object where the keys are unique slugs and the values are objects describing the presets. Those objects have mandatory properties:

  • label: the name of the preset
  • basemap: the ID of the basemap used by this preset
  • contextualLayers: the list of contextual layers used by this preset
  • dataLayers: the list of data layers used by this preset

While contextualLayers and dataLayers are mandatory, the preset can define them as empty arrays [], if the preset doesn't have contextual layers and/or data layers. If they are not empty arrays, they are arrays of objects, one for each layer, where the only required key is id. The value associated with it must be the ID of a contextual layer or data layer.

Here's an example of valid preset:

{
  label: 'New preset',
  basemap: 'mongabay-carbon',
  contextualLayers: [
    {
      id: 'labels-light',
    },
    {
      id: 'admin-boundaries',
    },
  ],
  dataLayers: [],
}

Adding presets

To add a new preset, you need first to decide on a unique slug name, and add it as a key to the PRESETS object. As a value, add an object with a label property that contains the name of the preset.

Then, you need to choose which basemap to assign to the preset. If you now its name, look at the BASEMAPS variable and copy its ID (it's the key of the object). Paste the slug as the value of a basemap key.

Here's how the PRESETS object should look like at this point:

{
  'new-preset': {
    label: 'New preset',
    basemap: 'landsat', // This is an example
  },
}

Finally, you need to add the two mandatory keys contextualLayers and dataLayers:

{
  'new-preset': {
    label: 'New preset',
    basemap: 'landsat',
    contextualLayers: [],
    dataLayers: [],
  },
}

If you would like the preset to have default contextual and/or data layers, you need to copy the IDs of these layers (from CONTEXTUAL_LAYERS or DATA_LAYERS) and add one object per layer to the arrays.

For example, if you'd like to have the “Hillshade” contextual layer and the “Tree cover loss” data layer as defaults, here's how it looks like:

{
  'new-preset': {
    label: 'New preset',
    basemap: 'landsat',
    contextualLayers: [
      {
        id: 'hillshade',
      },
    ],
    dataLayers: [
      {
        id: 'tree-cover-loss',
      },
    ],
  },
}

Once you have done these changes, please run the server locally and test if the app behaves correctly. To do so, follow the instructions of the README file.

⚠️ If a preset (or basemap) references the ID of a layer that doesn't exist, the app may crash. Please test your changes before deploying them.

If everything looks ok, create a new commit in the master branch and push it. The application will be automatically deployed. You can follow the deployment progress in the “Actions” tab on Github.

Editing presets

Editing presets is quite easy. Locate the one you want to edit in the PRESETS object and:

  • If you want to change its name, update its label property
  • If you want to change its basemap, replace its basemap value by the ID of another
  • If you want to change its contextual or data layers, add or remove layers from the contextualLayers or dataLayers arrays

Once you have done these changes, please run the server locally and test if the app behaves correctly. To do so, follow the instructions of the README file.

⚠️ If a preset (or basemap) references the ID of a layer that doesn't exist, the app may crash. Please test your changes before deploying them.

If everything looks ok, create a new commit in the master branch and push it. The application will be automatically deployed. You can follow the deployment progress in the “Actions” tab on Github.

Removing presets

Removing presets is straightforward: simply delete the key-value that represents the preset from the PRESETS object.

Once you have done these changes, please run the server locally and test if the app behaves correctly. To do so, follow the instructions of the README file.

⚠️ If a preset (or basemap) references the ID of a layer that doesn't exist, the app may crash. Please test your changes before deploying them.

If everything looks ok, create a new commit in the master branch and push it. The application will be automatically deployed. You can follow the deployment progress in the “Actions” tab on Github.

Clone this wiki locally