Skip to content

Add, edit or remove layers

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

This is a step-by-step guide on how to add, edit or remove data layers from the tool. Prior to reading this guide, it is recommended to learn about the definition of the layers. Knowledge about Javascript and GitHub is required.

Table of content

Adding layers

Uploading the data

In order to add new layers to the tool, you need to upload them to Mapbox first. For this, you will need the credentials of Mongabay's Mapbox account.

There are two types of layers you can upload: raster or vector. Depending on the type of layer, the instructions on how to upload them varies. In any case, we recommend you read this Mapbox' article on how to upload data. In this guide, we will describe how to create tilesets.

Raster layers

To upload some raster data, we'd recommend you upload them in the GeoTIFF format, following Mapbox' instructions.

Vector layers

To upload vector data, you need first to convert it to the MBTiles format. To do so, we'd recommend using tippecanoe which is a tool developped by Mapbox.

Once you have your data in the correct format, log in into Mapbox and head over the “Tilesets” tab. There, click “New tileset”, select you data and click “Confirm”.

Once the upload is finished, your data will appear under the “Custom tilesets” section.

At this point, click the 3 dots located on the right side of your tileset and copy its tileset ID by clicking the copy icon.

Updating the tool

Once your data is uploaded as a tileset on Mapbox, we can proceed to add the layer to the tool.

To do so, you'll create a new layer object in the variable DATA_LAYERS, in the file components/map/constants.js. At the bottom of DATA_LAYERS, add a new key (which will be the unique ID of the layer), and to that key, assign an object with the following properties:

  • label: name of your layer
  • attributions: list of attributions or empty array ([])
  • config: configuration of the layer
  • legend: configuration of the legend

Please refer to the Layer definition page to learn how to configure the layer. Also note that depending on the type of data (raster or vector), other properties may be required. Have a read at the full document.

In the config top-level property, you must specify either the URL of the tiles (if you uploaded raster data) or the URL of the tileset (if you uploaded vector data). Below you can find information on how to build the source object.

Raster layers

The source property must be defined as follows:

  • minzoom and maxzoom must be the minimum and maximum zoom levels for which you have data. If you don't know about them, put 0 and 22.
  • tiles must be an array containing one string: `https://api.mapbox.com/v4/XXX/{z}/{x}/{y}.png?access_token=${process.env.MAPBOX_API_KEY}` where XXX is your tileset ID.

Please note that the tiles string must be put between back ticks (`), instead of single quotes (').

As an example, if your tileset ID were mongabay.0rgyb3bx, here is how the source object would be:

{
  minzoom: 0,
  maxzoom: 22, 
  tiles: [`https://api.mapbox.com/v4/mongabay.0rgyb3bx/{z}/{x}/{y}.png?access_token=${process.env.MAPBOX_API_KEY}`],
}
Vector layers

The source property must be defined as follows:

  • minzoom and maxzoom must be the minimum and maximum zoom levels for which you have data. If you don't know about them, put 0 and 22.
  • url must be 'mapbox://XXX' where XXX is your tileset ID.

As an example, if your tileset ID were mongabay.0rgyb3bx, here is how the source object would be:

{
  minzoom: 0,
  maxzoom: 22, 
  url: 'mapbox://mongabay.0rgyb3bx',
}

Once you've defined your layer as explained in the Layer definition page, please run the server locally and test if the app behaves correctly and you can see your layer. To do so, follow the instructions of the README file.

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.

If you wish to add attributions to your layer, please consult the Add, edit or remove attributions page.

If you wish to associate a preset with your layer, please consult Add, edit or remove presets.

Editing layers

If you wish to edit the data of the layer, you will need to edit your data locally and upload a new tileset (don't forget to delete the previous one). Then, you will need to replace the config object of the layer by going through the steps described in Updating the tool.

If you wish to modify other aspects of the layer like its name, minimum and maximum zoom levels, legend, interactivity, etc., please refer to the Layer definition document which contains the documentation of all the properties.

If you wish to edit the attributions of the layer, please consult Add, edit or remove attributions.

If you wish to edit the presets the layer belongs to, please consult Add, edit or remove presets.

Removing layers

If you wish to remove a layer from the tool, here are the steps you need to follow:

  1. Search for the ID of the layer in DATA_LAYERS and copy it (it's the key of the object)
  2. Search within PRESETS if the layer is part of a preset (thanks to its ID), and delete its references if that's the case (more information here)
  3. Delete the key-value that describes the layer in DATA_LAYERS
  4. Delete its associated tileset in Mapbox

Once you've done all the steps, please run the server locally and test if the app behaves correctly. To do so, follow the instructions of the README file.

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