Skip to content

Offline Maps

The geographic map component offers a wide range of customization, from adjusting styles, colors, fonts, to adding custom icons and several interactive layers (including Points, Circles, Lines, Animated Points, Heatmaps and customizable layers).

The map components allow user to create visually appealing, engaging, and performant geographic maps. Utilizing WebGL technologies the maps leverage hardware acceleration to render quickly and smoothly (with minimal lag). This is particularly noticeable with large datasets.

This map component is built using the MapboxGL Libraries.

Use cases for maps include:

  • Visualizing and animating geographic data
  • No external access to the internet or external apis
  • Adding points, circles, lines and popups to maps programmatically
  • Display and interacting with large quantities of data on a map
  • Querying and filtering features on a map
  • Dynamically displaying and styling custom client-side data on a map
  • Annotating polygons and lines on geographic data
  • Visualizing streaming and moving data geographically
  • Layering multiple layers of data on top of each other

Screenshot
A Map with defined circles

Basics

Screenshot

Name
A name for the component provided by the user.

Map

Determine the loaded zoom, coordinates and the style of the map style being used to determine which tilesets the map includes and how they are styled.

Screenshot

Key
This key (access token) associate API requests with a Mapbox account. This is required for online mode only.
Center Latitude/Longitude
Sets map center on dashboard load; define longitude and latitude values.
Offline
Toogles between offline mode and online mode. Offline mode require no access to the internet
Zoom
The initial zoom level
Style Override

If set, then the default style is overrided with the JSON/GeoJSON (for Offline mode) or url string (for Online mode) set in the style.

Offline mode

The map component is set with a default map style.

This style uses:

  1. For its source used a baked in vector and a country tile server (.pbf file)
  2. For the glyphs, there is a baked in font
  3. For the layout, there is a set of countries defined with a color scheme

All of the above can be overriden by this property

All of the default properties are part of the component and no external api requests are needed

Online mode

For Online mode we use the following default styles

  • For Dark Theme : "mapbox://styles/mapbox/dark-v11"
  • For Light Theme : "mapbox://styles/mapbox/light-v11"

Point

Screenshot
A Map of with points using clustering

Can display a custom point image at a developer-specified geographic coordinate with an option to add clustering

Screenshot
Points properties

Cluster
When checked, replaces grouped individual points with a numeric cluster icon. Circles outside cluster remain displayed as individual points.
Data Source
A data source that includes geographic coordinates
ID
A distinct identifier for a point
Latitude / Longitude Data
Data Source columns for latitude and longitude
Color
Color of the map point graphic
Icon
The shape of the map point graphic. Uses a pointer by default.
Icon Size
The proportial size of the shape. Uses 1 by default
Icon Rotation
directional uses point icons
Use Labels
When checked, displays a label for each of the points
Label
The label displayed next to each point
Label Size
The label font size
Tooltip
When checked, displays a tooltip on points mouseover
Zoom on Select
When checked, for a selected point click event, the map is centered and zoomed in on this point
Track Selected
When checked, this allows the user to link/track a selected point on the map

Selected

Screenshot
Selected properties

Color
The color of the selected point
Column
The Data Source column used in the selected row(s).
Selected Item
The current selected value

Selected

A point will be highlighted with the "Color" property specified where for each row in the datasource , if the "Selected Item" value equals the value for the specified "Column"

Action

Actions

Circle

Screenshot
A Map of with circles using clustering

Determine custom circle with clustering

Screenshot
Circles properties

Cluster
When checked, replaces grouped individual circles with a numeric cluster icon. Circles outside cluster remain displayed as individual circles.
Data Source
A data source that includes geographic coordinates
ID
A distinct identifier for a circle
Latitude / Longitude Data
Data Source columns for latitude and longitude
Color
Color of the map circle graphic
Radius
Radius of the map circle graphic
Stroke Color
The border color of the map circle graphic
Stroke Width
The border width of the map circle graphic
Use Labels
When checked, displays a label for each of the circles
Label
The label displayed next to each circle
Label Size
The label font size
Tooltip
When checked, displays a tooltip on circle mouseover
Zoom on Select
When checked, for a selected circle click event, the map is centered and zoomed in on this circle
Track Selected
When checked, this allows the user to link/track a selected circle on the map

Selected

Screenshot
Selected properties

Color
The color of the selected circle
Column
The Data Source column used in the selected row(s).
Selected Item

The current selected value

Selected

A circle will be highlighted with the "Color" property specified where for each row in the datasource , if the "Selected Item" value equals the value for the specified "Column"

Action

Actions

Line

Screenshot
A Map of with a line layer

Determine lines with customizable styling

Screenshot
Lines properties

Load lines in view
Positions the map , so that all points are zoomed in on and in view when the map is loaded
Data Source
A data source that includes geographic coordinates
ID

Lines are grouped by common ids

Multiple Lines

To draw multiple lines from a single datasource, simply group each set of lines by the same ID

Latitude / Longitude Data
Data Source columns for latitude and longitude
Color
Color of the map line graphic
Width
The width of the map line graphic
Use Labels
When checked, displays a label for each of the lines
Label
The label displayed next to each line
Label Size
The label font size
Current Point Index
Can set a value or viewstate with the current point index and this highlights the point on the line
Tooltip
When checked, displays a tooltip on circle mouseover
Gradient
Sets a line to a gradient color

Colors

Screenshot
Lines properties to specify gradient colors

Color
The gradient color stop value
Percentage
The color-stop's position can be explicitly defined by using a percentage

Point

Screenshot
Lines properties to specify selected point

Color
The Color of the Tracked point on the line
Size
The Size of the Tracked point on the line

Action

Actions

Heatmap

Screenshot
A Map of with a heatmap

Map heatmaps show the density of points over an area by displaying a continuous gradient between points.

Heatmaps aren't only useful for visualizing point density. They can also help visualize relative differences between those points.

Screenshot
Heatmap properties

Data Source
A data source that includes geographic coordinates
ID
A distinct identifier for a point
Latitude / Longitude Data
Data Source columns for latitude and longitude
Weight
Determines the weight for each individual node
Tooltip
When checked, displays a tooltip on points mouseover
Show Gradient
When checked, shows the color gradient indicator

Colors

Screenshot
Heatmap properties to specify gradient colors

Color
The gradient color (from minimum density to maximum density)

Annotation

Add annotations to the map using line, polygon shapes.

Screenshot
Annotation properties

Enable
When checked, Users can annotate on the map, using either line or polygons
Filter on Draw
When checked, if using a polygon, the user can draw on an area of the map and when finished drawing the all the points/circles inside the area remain and the rest of the points/circles are filtered out
Zoom on Draw

When checked, if using a polygon, the user can draw on an area of the map and when finished drawing the map zooms to the area

Annotation Control

There are 3 options in the Annotation Control.

Screenshot

  1. Line Draw
  2. Polygon Draw
  3. Delete Annotation

Drawing a line

Screenshot

Use case

  1. A user can draw a line annotation on a map to calculate the distance between 2 or more points.
  2. Once the user is done drawing the distance will appear in a popup (in kilometres)

How to draw

  1. In the annotation control (displayed on the right hand side), click on the line icon
  2. Then simply selected the starting point on the map (by using a left or right mouse click)
  3. You can click at any other point on the map to connect this line.
  4. The line will be displayed as a yellow dashed line while editing
  5. Once done editting, you can click on the line (this will set the line to blue)

How to delete

  1. To delete simply select the line and click on the trash icon in the annotations menu
  2. The line will be then removed from the map

Drawing a polygon

Screenshot

Use case

  1. The polygon annotation, allows the user to draw on the map and select a set of points/circles
  2. If Zoom on Draw is checked then it will zoom in on the polygon after the polygon is applied
  3. If Filter on Draw is checked then it will display only the points/circles inside the polygon shape after the polygon is applied

How to draw

  1. In the annotation control (displayed on the right hand side), click on the polygon icon
  2. The click on the map where you want to start the polygon, after this you can click on multiple sections of the map to connect the polygon points
  3. The polygon will be displayed as a yellow dashed line while editing
  4. Once done editting, you can click on the line (this will set the polygon to blue)

How to delete

  1. To delete simply select the polygon and click on the trash icon in the annotations menu
  2. The polygon will be then removed from the map

Layers

Screenshot
Layers properties

Video

Screenshot
Overlay a video on the map

Add a georeferenced video on top of a map layer

Screenshot
Layers properties

File

Example

Files must be hosted locally in the Offline Map modules directory e.g. modules\OfflineMap\css\assets\layers
Coordinates

Set the georeferenced coordinates

Example

[ [-122.51596391201019, 37.56238816766053], [-122.51467645168304, 37.56410183312965], [-122.51309394836426, 37.563391708549425], [-122.51423120498657, 37.56161849366671] ]

Hosted

Screenshot
Overlay a video on the map

Add a hosted geoJSON layer to the maps. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen.

Screenshot
Layers properties

File

Example

Files must be hosted locally in the Offline Map modules directory e.g. modules\OfflineMap\css\assets\layers
Data
The data used by the layer (specified in eithe JSON or GeoJSON format)

Simple

Screenshot
Demo of Layers - showing all the ubran areas on the map

Add a text based geoJSON layer to the maps. Each layer provides rules about how the renderer should draw certain data in the browser, and the renderer uses these layers to draw the map on the screen.

Screenshot
Layers properties

Type
Determine the layer type (either GeoJSON or vector)
Data

The data used by the layer (specified in eithe JSON or GeoJSON format)

Example

{ "type":"FeatureCollection", "features": [{ "type":"Feature", "properties": { "scalerank":3, "area_sqkm":1002.565, "featureclass":"Urban area" }, "geometry": { "type":"Polygon", "coordinates": [[[-121.37881303595779,38.39168793390614],[-121.37881303595779,38.39168793390614],[-121.37881303595779,38.39168793390614],[-121.42144609259859,38.3858743352733],[-121.48040890184362,38.39168793390614],[-121.51616899298959,38.444811306302185],[-121.58203060594559,38.4678848333205],[-121.5930118478076,38.626428127591964],[-121.46772233771595,38.671102403308296],[-121.39491024461671,38.75068410903778],[-121.31532853888723,38.82349620213702],[-121.23913163947286,38.82349620213702],[-121.19226111538413,38.73701569269657],[-121.13750993537089,38.65836416274834],[-121.19386308478518,38.61312144627681],[-121.26453060594432,38.58219310155013],[-121.32057369676485,38.53666616470099],[-121.37881303595779,38.4933096380081],[-121.37062232143953,38.43667226821621],[-121.37881303595779,38.39168793390614]]] } } }] }

Properties

The style properties used by the layer

Example

{ "id": "urban-areas-fill", "type": "fill", "source": "urban-areas", "layout": {}, "paint": { "fill-color": "#f08", "fill-opacity": 0.4 } }

Night/Day Layer

Screenshot
A Map of with animated circles

Add a layer to determine the region of day and night time based on a current date/time value.

Screenshot
Circles properties

Show
Toggle whether show Night and Day layer
Current
The current date/time value

Animated Circle

Screenshot
A Map of with animated circles

Determine custom animated circles

Screenshot
Circles properties

Data Source
A data source that includes geographic coordinates
ID
A distinct identifier for a animated circle
Latitude / Longitude Data
Data Source columns for latitude and longitude
Color
Color of the map animated circle graphic
Radius
Radius of the map animated circle graphic
Use Labels
When checked, displays a label for each of the animated circles
Label
The label displayed next to each animated circle
Label Size
The label font size
Tooltip
When checked, displays a tooltip on animated circle mouseover

Action

Actions

Bounds

Screenshot
Bounds properties

Current Bounds
Map selected bounds coordinates of the overlay to a View State Parameter
Track Point click Bounds
When checked, tracks the bounds coordinates of a point when clicked
Current Bounds
Sets a radius for the Track Point click Bounds
Current Point Bounds
Displays the point bounds coordinates + the Current Bounds radius

Icons

A list of icons that have been added to the "css\assets\images" on the server. These icons can be used by the Icon properties in Point

Screenshot
Icon properties

Style

Override the dafault colors used in the map component

Screenshot
Style properties

Info

To avoid having to use any external APIs - we store all our assets including glyphs, images and tiles in the "css\assets\" folder in side the component code