Map Widgets - resource-watch/ocean-watch-data GitHub Wiki

Map widgets are standard Resource Watch Resources. There are two kinds of visualization types for map widgets on Ocean Watch.

Maps
Map-slides

Maps

Maps are more simple of the two kinds of standard map visualizations. They contain one or more map layers layered on top of each other. The simplest form of a standard map widget can be made in the Resource Watch backoffice. This is one map layer with no adjustments to opacity, boundaries etc. More complex maps will need to be made using the API since there is no component in the backoffice to create and edit these kinds of widgets. All map widgets on Ocean Watch are complex enough to necessitate this process. Map widgets on Ocean Watch were largely created by Vizzuality, but can be edited or swapped out by the Ocean Watch data team. For information on the work flow, continue reading below.

Map-slides

Map slides are map widgets with a slider in the middle. The slider allows users to view to maps with different data on the left and right. Map-slides must be created through the API. Map-slides on Ocean Watch were created by Vizzuality, but can be edited or swapped out by the Ocean Watch data team. For information on the work flow, continue reading below.

Creating a map widget

Like all widgets, the display of map widgets is rendered using a widgetConfig property. The best way to create a new widgetConfig is to use an existing one as a template. Find an existing map widget of a similar type on the Ocean Watch page, grab its widget ID, and query the API to retrieve its widgetConfig property. If it is a map, it will look something like this:

{
  "data": {
    "id": "dbd066c0-a1c0-4e0c-9eec-9294b96b49ef",
    "type": "widget",
    "attributes": {
      "name": "How is the state of the ocean surface related to soil erosion in {{geostore_country_name}}?",
      "dataset": "13f4e065-b579-41f0-938d-b97c9dd54ce2",
      "slug": "River-Water-Quality-Sedimet-pressure-Map",
      "userId": "5f05956c17a11500102db8a0",
      "description": "...",
      "source": "",
      "authors": "",
      "application": [
        "rw"
      ],
      "verified": false,
      "default": false,
      "protected": false,
      "defaultEditableWidget": false,
      "published": true,
      "thumbnailUrl": "https://s3.amazonaws.com/wri-api-backups/resourcewatch/prod/thumbnails/dbd066c0-a1c0-4e0c-9eec-9294b96b49ef-1647353498736.png",
      "freeze": false,
      "env": "production",
      "queryUrl": "",
      "widgetConfig": {
        "lng": 4.504394531250001,
        "lat": -28.497660832963472,
        "zoom": 4,
        "type": "map",
        "paramsConfig": {
          "embed": {
            "src": ""
          },
          "band": null,
          "areaIntersection": null,
          "filters": [],
          "chartType": null,
          "aggregateFunction": null,
          "orderBy": null,
          "size": null,
          "color": null,
          "category": null,
          "value": null,
          "limit": 500,
          "visualizationType": "map",
          "layer_id": "8339b4a5-b99f-4d64-8737-30f79325e106",
          "layerParams": {
            "8339b4a5-b99f-4d64-8737-30f79325e106": {
              "opacity": 0
            },
            "065e6200-1670-4832-b0ae-70b7852a9875": {
              "opacity": 1
            },
            "46f41568-dd10-44e8-861a-8a552a40339b": {
              "opacity": 1
            }
          },
          "mask": {...},
          "layers": [
            "46f41568-dd10-44e8-861a-8a552a40339b",
            "065e6200-1670-4832-b0ae-70b7852a9875",
            "8339b4a5-b99f-4d64-8737-30f79325e106"
          ]
        }
      },
      "template": false,
      "createdAt": "2021-09-07T08:12:13.361Z",
      "updatedAt": "2022-03-15T14:11:38.574Z"
    }
  }
}

If it is a map-slide, it will look something like this:

{
  "data": {
    "id": "8aed1752-387c-4669-8ffd-064998ae666d",
    "type": "widget",
    "attributes": {
      "name": "How is soil erosion related to the long-term loss of tree cover in {{geostore_country_name}}?",
      "dataset": "13f4e065-b579-41f0-938d-b97c9dd54ce2",
      "slug": "How-is-soil-erosion-related-to-the-long-term-loss-of-tree-cover",
      "userId": "605373e204f12a001b2879b1",
      "description": "...",
      "application": [
        "rw"
      ],
      "verified": false,
      "default": false,
      "protected": false,
      "defaultEditableWidget": false,
      "published": true,
      "thumbnailUrl": "https://s3.amazonaws.com/wri-api-backups/resourcewatch/prod/thumbnails/8aed1752-387c-4669-8ffd-064998ae666d-1647352997113.png",
      "freeze": false,
      "env": "production",
      "widgetConfig": {
        "lng": 4.504394531250001,
        "lat": -28.497660832963472,
        "zoom": 4,
        "type": "map",
        "paramsConfig": {
          "embed": {
            "src": ""
          },
          "band": null,
          "areaIntersection": null,
          "filters": [],
          "chartType": null,
          "aggregateFunction": null,
          "orderBy": null,
          "size": null,
          "color": null,
          "category": null,
          "value": null,
          "limit": 500,
          "visualizationType": "map-slide",
          "layer_id": "065e6200-1670-4832-b0ae-70b7852a9875",
          "layer": "065e6200-1670-4832-b0ae-70b7852a9875",
          "layerParams": {
            "e67c1446-4e8f-4e0b-b4ae-3b2d56bcee6e": {
              "opacity": 0.75
            },
            "f8a12d4d-55f1-4c22-95d5-2c07e2e2198f": {
              "opacity": 1
            },
            "7d86f064-e99b-4bdc-95ab-dff10b1b7c9d": {
              "opacity": 0.75
            },
            "065e6200-1670-4832-b0ae-70b7852a9875": {
              "opacity": 1
            }
          },
          "layersLeft": [
            "f8a12d4d-55f1-4c22-95d5-2c07e2e2198f",
            "7d86f064-e99b-4bdc-95ab-dff10b1b7c9d",
            "e67c1446-4e8f-4e0b-b4ae-3b2d56bcee6e"
          ],
          "layersRight": [
            "065e6200-1670-4832-b0ae-70b7852a9875",
            "e67c1446-4e8f-4e0b-b4ae-3b2d56bcee6e"
          ],
          "mask": {}
        },
        "basemapLayers": {
          "boundaries": false
        }
      },
      "template": false,
      "createdAt": "2021-11-17T17:33:00.269Z",
      "updatedAt": "2022-03-15T14:03:17.031Z"
    }
  }
}

Now you can add or swap layers, change opacity, etc. until the widgetConfig meets your design needs.

`mask` Property