Create a Widget - resource-watch/ocean-watch-data GitHub Wiki

Creating a widget on the API

How you create a widget will depend on the type of widget you are creating. It can be easier to create simple chart and map widgets in the back office. For embed maps with multiple layers, slide maps, and advanced chart widgets, it is more reliable to use the API.

Creating an advanced widget on Resource Watch

Once you have your widgetConfig for your map or chart widget, you are ready to ingest it into Resource Watch.

Although it is possible to create advanced widgets in the Resource Watch backoffice, it is more reliable and efficient to use the API. Creating a widget is done using a POST request and passing the relevant data as body files. The Ocean/Resource Watch data team use the advanced-widget-writer to create and edit widgets and their metadata. Refer to the creating a widget section of the RW API documentation for information on the POST request. Reference information about each of the supported body fields is also available in the API documentation. To create a new widget, use the advanced_chart_widget_create script Fill in the fields, including the widgetConfig, the title, and the description.

Titles appear at the top of the widget and the description appears on the back (when a user clicks the i button). Titles and description are written by the Ocean Watch Data team and reviewed by the WRI Communications team. Titles of widgets on Ocean Watch can be parameterized by adding the placeholder {{geostore_country_name}}. For example,

name = 'Contribution of blue food to protein supply in {{geostore_country_name}}'

After you run the script, it will return the id of the newly created widget.

Creating widget metadata on Resource Watch

After you have created the widget, you can use the advanced_chart_widget_metadata_create script to create metadata for the widget. Metadata fields inlcude links and a caption.

The content of the links property depends on the type of underlying datasets. Always include a link to the source(s) website(s). Include a link to the Resource Watch explore page for any published datasets. Include a link to the dataset folder in Github is the dataset is unpublished. If the widget is a chart widget, include a link to the widget folder in Github. Use the below as an example.

"widgetLinks": [
        {"link":"https://land.copernicus.eu/global/products/lc","name":"Copernicus Land Cover"},
        {"link":"https://resourcewatch.org/data/explore/Global-Land-Cover-UN-FAO-LCCS-Classification","name":"Explore the underlying Land Cover data on Resource Watch",
        {"link":"https://github.com/resource-watch/ocean-watch-data/tree/main/datasets/ocn_calcs_016_land_cover_change","name":"Learn more about the dataset"},
        {"link":"https://github.com/resource-watch/ocean-watch-data/tree/main/widgets/soc_104_w3_urbanization","name":"How the data team created this widget"}
        ]

The caption appears at the bottom of the widget are usually omitted on Ocean Watch widgets.