Maps

Introduction to Maps

With Thinkwise Maps you can visualize locations or track assets from within your Thinkwise application.

Third-party integrations for Maps

The Maps screen component is built on the Leaflet library, a popular open-source JavaScript library for creating interactive maps. It uses base layers to display the map (such as a street map or satellite map) and overlay layers to display additional information (such as locations, weather, or traffic data).

Base layer providers

For base layers, you can use virtually any map provider that supports Web Mercator map tile services (z,x,y URLs). Some popular examples are:

• Google Maps
• Here Maps
• OpenStreetMap
• MapQuest
• ArcGIS
• WikiMedia
• Thunderforest - offers OpenStreetMap maps enriched with additional data, such as points of interest (POIs) and landcover information.

For an extensive list of base layer providers, see the Leaflet Provider Demo.

tip

You can also use non-map base layers for your maps, such as floor plans or images. See the Leaflet non-map base layers.

An example of a non-map base layer (Hubble image)

Overlay layer providers

In addition to base layers, you can add overlay layers to your map to display additional information. This can be data from your application, visualized with markers and circles for coordinates, polylines for routes or paths, and polygons for areas or regions. Additionally, you can use overlay data from a large number of third-party services, like weather and traffic information, locations of flights or vessels, wind turbines, and more.

For an extensive list of overlay layer providers, see the Leaflet Provider Demo.

Geocoding providers

To transform addresses into coordinates or to calculate the route between two or more locations, you can use the generic web connectors in the Thinkwise Platform to call geocoding services from a range of providers, for example:

• Google Maps
• ArcGIS Geocoding Service
• OpenStreetMap Nominatim

The Leaflet website also provides a list of Routing and Geocoding services.

Add a map

tip

An example model with a map is available in the Thinkstore. It is called Maps and routes and its purpose is to teach how to work with the Maps component in the Universal GUI. The example model uses two Web connection endpoints for retrieving the GPS coordinates and routes. Note that you need to get your own API key from Google and enter it in the Web connection.

Maps and routes includes a menu for addresses and routes:

• Adding an address initiates a process flow that uses the Web connection to retrieve and display the GPS coordinates on the Maps component.
• Once you have at least two addresses, you can add a route. The Web connection retrieves and displays the fastest route on the Maps component.

A map creates a visual representation of a single data set, such as a table or a view. You can use the settings for overlays and data mapping to configure maps to suit your needs with, for example, routes, defined areas, weather information or traffic information.

To add a map to your application:

menu User Interface > Maps > tab Maps

1. Select a table or variant.

2. Select the Table or view to which you want to add a map.

   note

   The table or view needs a screen type with a Maps component to show the map in your end-product.

3. Define Linked columns to populate the map with entities:

   • Data mapping column: contains an image combo control with elements.
     The element images are the markers on the map. You must define at least one element. More elements are useful if you have different types of data within the entity, such as a route with a starting point and a destination.

warning

Make sure the database value of each element matches the element id. If not, navigating to different coordinates will mallfunction and markers will not become visible.

For every element, you can further specify the settings on the Data mappings tab.

• Lat/long column: contains the Location coordinates for the entity.
• Popup column: contains HTML data or plain text that will be displayed when hovering over the entity on the map.

1. By default, a marker in a map uses the tables' look-up display as a label. To use a custom label, select the Use custom label column checkbox and select the Label column you want to user as a label. If you do not select a custom column, no label will be shown.

2. Specify the Initial settings:

   • Enter the Latitude and Longitude to initially center the map on a location.
   • Set the Zoom level (number, check with your provider about the scale used).

   Maps settings

3. Set more specifications in the tabs:

   • Base layers.
   • Overlays.
   • Data mappings.

Location coordinates

The location coordinates with longitude and latitude must be specified in JSON format as follows:

 { "CoordSets": [ [ { "Lon": "5.9795099", "Lat": "52.2084904" } ] ] }

To display a line (used for routes) or polygon (used for areas), the JSON must contain multiple coordinates:

 { "CoordSets": [ [ { "Lon": "-76.499107", "Lat": "39.243073" }, { "Lon": "-76.499146", "Lat": "39.243053" } ] ] }

The coordinates are not automatically retrieved, so make sure you have a process to call a Geolocation web service. For example, Google, Here, OpenStreetMap, or Mapquest.

Crossing the edge of a map

If you create a route that crosses one of the edges of a map, the resulting route might not be displayed properly. A route jumps from one edge of the map to the other

To support displaying such routes, the edges of the map are extended by 180 degrees. Adapt your coordinates accordingly to correct the way the route is displayed. The longitude degrees in the route data must be entirely positive or negative to keep the route together. For this purpose, they may go over the usual limit of -180 or 180 degrees.

A route extends across the edge of the map

Set the radius of a circle marker

Universal GUI When displaying a marker of type Circle, you can set the radius of the circle as follows. The default value for radius is 200 pixels.

{
    "CoordSets": [
        [
            {
               "Lon": "10.865400",
               "Lat": "55.565922"
            }
        ]
    ],
    "Radius": 120
}

Base layer settings

The base layer is the layer shown in the maps component.

menu User Interface > Maps > tab Base layers

1. Enter a Base layer URI to retrieve the layer information.

   • You can use an external provider. See Base layer providers.
   • You can only configure tile layers using x,y,z URLs. A tile layer is a set of tiles that reside on a server and are accessed by a direct URL request from the browser.

   This is an example of the Google Maps URI:

   https://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}
   • lyrs=m - the standard Google roadmap
   • lyrs=s - the Google satellite view
   • lyrs=h - the hybrid view.

2. Enter settings like minimum and maximum zoom levels.

3. If necessary, use the Attribution field to store the attribution HTML snippet.

Base layer settings for maps

Overlay settings

An overlay can be shown on top of the base layer to add extra information, such as weather or traffic information.

menu User Interface > Maps > tab Tables > tab Default/Variants > tab Overlays

1. Enter an Overlay URI. You can use an external provider. See Overlay layer providers.
2. Enter settings like minimum and maximum zoom levels and the overlay's opacity.
3. Select the Show overlay box to make the overlay available. Use this, for example, for variants.
4. Select the Show in menu box to make the overlay available to your users for selection in the map's legend.
5. If necessary, use the Attribution field to store the attribution HTML snippet.

Overlay settings for maps

An example of an overlay in a map

Data mappings

The overview displays all the domain elements of the data mapping column.

menu User Interface > Maps > tab Data mappings

1. Specify the Geometric type of the data mapping.
2. If the Geometric type is a Marker, you can use an image as a custom marker. This column requires a domain with an image combo control.
3. If the Geometric type is not a Marker, you can specify additional settings, like border and fill color.
4. To display record data on the map, select the Show data mapping checkbox.

Data mapping settings for maps

An example of data mapping: route planner