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@dorsalapp.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. We set up the actions for the select boxes. Changing value of "State" select box will trigger an api call to get list of zones available in that state and populate the values into "Zone" select box. Likewise, we will get list of locations within a zone when changing value of "Zone" select box. The API endpoints that we use here are surfspot/getzone and surfspot/getlocation. They responds to GET requests and you need to attach two parameters to the URL: state/zone name and the public key.
  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: