Skip to content

Frontend Layers Usage

Jump to bottom
Yuan Fu edited this page Sep 5, 2019 · 11 revisions

1. Clickbox Layer

  • Data Source: PRISM data of temperature, relative soiled moisture and precipitation.

  • Time Frequency: Update every 24 hours.

  • Your Processing: Use aggregation method query to calculate the average of the maximum data during 24 hours of each type of data in a circle.

  • Activate: Click any point on the map and hold for 1 second

  • Performance: Shows up the first popup with latlng info of this point, then shows up the second popup with 3 charts
    [first chart is moisture data; second chart is temperature data; third chart is precipitation data] of 7-day range. The time range can be selected by time bar.

2. Heatmap Layer

  • Data Source: Chart of "historical_temperature" updated till July 8th, 2019.
  • Time Frequency: Update every 6 hours. [00:00 06:00 12:00 18:00]
  • Your Processing: Use common query to get the second lastest temperature data to display
  • Activate: Check the checkbox in the right-upper corner
  • Performance: Shows the overall heatmap of temperature in the US. The time is always the lastest in database (July 8th)

3. Dotmap Layer

  • Data Source: Chart of "historical_temperature" updated till July 8th 2019.
  • Time Frequency: Update every 6 hours. [00:00 06:00 12:00 18:00]
  • Your Processing: Use SQL to get the second last data temperature to display.
  • Activate: Drag the 2 blue bars to set lower and upper bounds of temperature correspondingly in the left sidebar
  • Performance: Display region with different color layers which satisfy the bounds set. The time is always the lastest in the database (July 8th)

4. Fire Tweet Layer

  • Data Source: Tweet API provided officially.
  • Time Frequency: Real time.
  • Your Processing: Initially use query to get all tweets since 2016.01.01 with [Geolocation, time, id]. Send id to the backend each time when user hold on tweet and data of user name, profile, photo, text and image.
  • Activate: (1) Check the checkbox in the right-upper corner (2) Drag the time bar to select a time range (3) move mouse over any red spots on the map (3) Hold for 250ms
  • Performance: (1) Shows up a red circle marker (2) If clicked, a popup with tweet contents shows up. The time range can be selected by time bar.
Clone this wiki locally