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.