Skip to content

Map

Screenshot
A Map with a Statistical Overlay

Displays geographical data. Unlike other components, different data sources can be assigned and overlaid by map type.

Set up

  1. Select the map type to use.

  2. Define the bounds for the viewable area of the map using a view state parameter; centered by CenterX and CenterY, at a defined zoom scale on load.

  3. Select between points, circles, lines, heatmap, or overlay.

  4. Irrespective of the map selection, ensure the data source has a longitude and latitude reference for mapped elements.

Basics

Screenshot

Focus
A View State Parameter used for linking components
Theme
Light or Dark

Map

Screenshot

Map Type

Select from terrain, satellite, roadmap or hybrid

Screenshot

Scale

Zoom level

Screenshot

Center X/Y
Sets map center on dashboard load; define longitude and latitude values.
Track Changes

When checked, will update co-ordinates after user interaction.

Saved state

Map will open on updated Center X/Y co-ordinates on next dashboard load.

Bounds

A View State Parameter which stores the co-ordinates for the viewable area of the map

Screenshot

Custom point

Screenshot

When a View State Parameter is set, right-clicking on the map allows the user to create a custom point: its co-ordinates will be held in the View State Parameter.

Warning

Without a View State Parameter set, right-clicking on the map will not add a custom point.

Map Key
Allows the user to load the map with their Google map ID.
StyleJSON

Apply JSON style from Mapstyle.withgoogle.com.

Screenshot

Cut-and-paste the JSON into the Style property. A view state parameter of type String can also be used to store the JSON.

Points

Screenshot
Map displaying data points

Plots distinct data points on map

Screenshot

Data Source
A data source that includes geographic coordinates
Selected Value
Selected values
Tracker
A View State Parameter for TrackedItem
TrackedItem

A Data Source column for the Tracker View State Parameter, set when the user selects a point on the map

More mapped items

Additional mapped items can be tracked using Selected Point Viewstate Routing

Selected values

Latitude / Longitude Data

Data Source columns for latitude and longitude

Screenshot
Latitude and longitude columns in the Data Source

Shape
Rotate Shape
Shape Rotation Degrees

The shape of the map point graphic: dot, pointer, etc.

Screenshot

directional uses pointer icons, the direction of the point is determined by Shape Rotation Degrees (a Data Source column) when enabled by Rotate Shape.

Screenshot

Shape (From DB)
A Data Source column: the shape of the map point graphic (alternative to Shape)
Shape color
Color of the map point graphic
Shape color (From DB)
A Data Source column: color of the map point graphic (alternative to Shape Color)
Shape Opacity
Opacity of the map point graphic
Cluster Size

Size of clusters into which points are aggregated; select from values in increments of ten to 70

Screenshot Map clusters

Cluster
When checked, replaces grouped individual points with a numeric cluster icon. Points outside cluster remain displayed as individual points.
Show Tooltip
When checked, displays a tooltip on Point rollover
Custom Tooltip

Screenshot
Custom tooltip on a Map

Custom tooltips

Zoom on Select
When checked, map will zoom when user selects a point
Single Zoom on Cluster

When checked, map will zoom on selected cluster

Screenshot

Open Dashboard on Select
A dashboard: when user selects a map point, the dashboard will load
Points in View

Screenshot

When checked, map will auto-zoom to show all available data points

Action

Actions

Circles

Screenshot

Data Source
A data source that includes geographic coordinates.
Radius
Data source column with radius of circle
Latitude / Longitude
Data Source columns with geographic co-ordinates
Circumference Color, Opacity and Width
Data Source columns with details on color (hex reference), opacity and width (pixels)
Color
Circle color
Opacity
Opacity of circle
Show Tooltip
Enable Tooltip
Custom Tooltip

Lines

Screenshot
A line on a Map

Screenshot
Map Lines configuration

Data Source
A data source that includes geographic coordinates
Latitude / Longitude Data
Data Source columns with geographic co-ordinates
color
Color of the line
Label Color
Background color of rollover label
Label Size
Size of the label
Label Text
Can also be a View State Parameter
Show Label
When checked, displays the label
Show Tooltip
When checked, displays the tooltip
Geodesic
When enabled, draws a (curved) line connecting the shortest possible distance between two points on a sphere.

Lines query example

Stop         long      lat      Line
------------------------------------
Tallaght     -6.374589 53.28749 Red
Hospital     -6.37885  53.28937 Red
Cookstown    -6.384397 53.29351 Red
Belgard      -6.374886 53.29929 Red
Kingswood    -6.36525  53.30369 Red
Red_Cow      -6.369872 53.31683 Red
Kylemore     -6.343444 53.32666 Red
Bluebell     -6.333792 53.3293  Red
Blackhorse   -6.327394 53.33426 Red
Drimnagh     -6.318161 53.33536 Red
Goldenbridge -6.313569 53.33589 Red
Suir_Road    -6.307211 53.33662 Red
Rialto       -6.297242 53.33791 Red
Fatima       -6.292547 53.33844 Red
Jamess       -6.293361 53.34194 Red
Heuston      -6.291808 53.34665 Red
Museum       -6.286714 53.34787 Red
Smithfield   -6.277728 53.34713 Red
Four_Courts  -6.273436 53.34686 Red
Jervis       -6.265333 53.34769 Red
..
Example data table

linesexample.csv: the above table as a CSV

linesexample.q: a datasource query on the above table as a function of the Line, e.g. Red or Green

Heat Map

Screenshot
A traffic heat map

Dynamic overlays

Can be used for dynamic overlays; e.g. when linked with a Playback component.

Screenshot

Data Source
A data source that includes geographic coordinates
Latitude / Longitude Data
Data Source columns with geographic co-ordinates
Weight
A Data Source column with the heat-map weights
Opacity

Opacity of the overlay

Screenshot

Gradient
Color gradient: red-bllue, blue-red, etc
Radius
Radius for heat-map spread
Show Heatmap
When checked, the overlay is visible

Overlay

Screenshot

Screenshot

Custom Tooltip
Custom tooltips
Selected Point Viewstate Routing
Selected values
Choose Layer
Select from dropdown; single option `Statistical``
Data Source
A data source that includes geographic coordinates and a column containing the color reference for overlay shading
Data Key
Column containing an index reference for the overlay data
Data Value
Overlay day mapped to Data Key
GeoJSON
Custom GEOJson url overlay and GeoJSON Key reference key
Show Legend
Display color code legend of overlay
Selected Value
Map selected overlay key to a View State Parameter
Selected Bounds Value
Map selected bounds coordinates of the overlay to a View State Parameter
Layer Opacity
Select overlay transparency; 0 for fully transparent, 100 for opaque.

Rectangle Bounds

Screenshot

A user-defined zone (defined within bounds) by longitude and latitude co-ordinates. More than one user-set boundary can be set.

North
South
East
West
longitudinal and latitudinal co-ordinates for user-defined boundary.

Style, Margins, Format

Style for common style settings