Here's a step by step guide on how we built the sample to get list of shark reports from selected location. Feel free to use the code and ideas as inspiration.

  1. The first step is to accquire an Public Token Key by contacting us at info@dorsalwatch.com.

  2. We're going to start with some basic code. First we set up the HTML structure of the page with some CSS and config variables in javascript. This example uses two javascript libraries JQuery and Moment.js

  3. Next step is setting up the actions for the select boxes.
    We start first with "Country" select box by getting the list of all countries that Dorsal's currently available in and populate the values into it. Then we attach an event handler for the select box so that when user changes its value, an api will be called to get the state list for the country that user selected.
    Similar process will be applied when levelling down from Country > State > Zone > Location
    Here's a list of API endpoints that we need (all respond to GET requests):
    - List All Countries
    - List All States By Country
    - List All Zones By State
    - List All Locations By Zones

  4. Finally, when a location is selected from "Location" select box, we will call report/list to get all the reports from the location we selected. Two optional parameters are pageSize and pageIndex which will let you limit the numbers of returned results. After getting response from the server, we append the reports to the document.

    Screenshot of working example: