Add a Map to a View

This page guides you through the steps to add a Map to your View to visualize weather data.

Prerequisite

You need a Google Maps API Map Key to use the Maps component. Learn more about Google Map Keys.

1. Add a Map component

To add a Map to a View:

  1. Create the view insights-demo-view, as described in the Views walkthrough.

  2. Search for the Map component in the left-hand list of components and drag into the workspace.

     

    Find the map component in the list of dashboard components.

  3. With the map component selected, (it has a light blue border when active), update the properties of the Map section:

    • Click set Google Maps JavaScript API Key in 'Map Key' property . This allows you to save the map key as a View State inside your Map component.

       

      The Map Key is saved as a view state inside your view.

    • Provide a Google Maps API Map Key. This is saved as a View State parameter in your view.

       

      The Map Key is saved as a view state inside your view.

    • Centralize the map on New York with the following Map properties:

       

      Setting

      Value

      CenterX

      40.75

      CenterY

      -73.98

      Define Map properties.

2. Configure the Data Source

Expand the Points properties and click Data Source.

  1. Create a New data source.

  2. Click API in the data editor, and set:

    Setting

    Value

    table

    weather

    startTS

    midnight of deployment date

    endTS

    23:59 of deployment date

    groupBy

    name, sensor, borough. Must be of type List

    agg

    See next step to create a View State

    1. Within agg, create a View State by rolling over the text input and clicking on the small, blue eye icon to the right.

       

      Create a view state for the agg property.

    2. In the view state dialog, create a New view state and set type to List.

    3. Set Default to lastlat;last;latitude and lastlon;last;longitude; tab across to add the second filter.

    4. Click the refresh icon next to Value to copy the default values to the Value property.

      Create a view state and assign the latitude and longitude variables to default. Click the refresh icon to copy the list from default to value.

    5. Click Select Item to apply the View State.

  3. Click Apply and Select Item to apply the data source change to the map.

3. Configure the Map component

  1. In the Points properties set:

    Setting

    Value

    Latitude Data

    lastlat

    Longitude Data

    lastlong

    The following Map showing sensor locations in New York is displayed.

     

    Map of sensor locations in New York.