Using the Map Widget

The Map widget allows to display geographic:

  • Markers, which require setting the location latitude and longitude.

  • Routes, which require setting a series of locations, each one with a latitude and a longitude.

  • GeoJson areas, which must respect the GeoJson format. For more details on accepted values, please refer to the official GeoJson documentation and the GeoJson.io tool.

In addition to the zoom and rescale options, the Map widget configurator provides users with marker customization, cluster display, color grouping and tooltip configuration options.

To display the map and markers, the Map widget relies on a Maptiler API Key, available from maptiler.com, which must be indicated through the parameter MAP_MAPTILER_API_KEY in the Setting Application Preferences.

To display routes and GeoJson areas, the widget relies on a Mapbox API Token and a Mapbox API URL, both available from mapbox.com, which must be used to set the parameters MAP_MAPBOX_API_KEY and MAP_MAPBOX_DIRECTION_API_URL, respectively, in the Setting Application Preferences.

Map Widget

The widget settings can be edited using a dedicated configurator.

Map Widget Configurator

The upper tabs allow configuring the:

  • Header, i.e. the widget top bar, by setting if it must be shown by ticking Show Header and if so, by inserting its Title and Icon.

  • Colors, by ticking Use Custom Colors, and setting the Header Color and Text Color.

  • Toolbar, beneath the widget header, by adding configurable action buttons. For more details, please refer to Section Using the Action API.

  • Custom Controller in charge of customizing the widget behavior, set to None by default.

  • Filters that should only apply to the widget, in addition to any filters set at a more global level, such as the Filter widget. For more details, please refer to Section Using the Filter Widget.

The main tabs allow configuring the:

  • Markers, using the and buttons to add or remove Map items. For each item, it is necessary to indicate the:

    • Entity, i.e. the entity corresponding to the location to display;

    • Name of the marker;

    • Marker shape, set to Circle by default. It can be set to Pin icon, which displays the field Marker icon to select a specific one;

    • Cluster display to group markers in a cluster if some are too close;

    • Latitude field, i.e. the entity attribute for the marker latitude;

    • Longitude field, i.e. the entity attribute for the marker longitude;

    • Color group field (use datatype if empty), i.e. the entity attribute to use to determine the color of the marker;

    • Tooltip field, i.e. the entity attribute containing information to display in the marker tooltip.

  • Routes, using the and buttons to add or remove Map items. For each item, it is necessary to indicate the Route name as well as a series of locations — at least two — in the list Series Item using the dedicated and buttons. For each location item of the series, the user must indicate the:

    • Entity, i.e. the entity that contain the information on the route to display;

    • Name of the series item;

    • Route Id field, i.e. the entity attribute corresponding to the route to use;

    • Latitude field, i.e. the entity attribute for the series item latitude;

    • Longitude field, i.e. the entity attribute for the series item longitude;

    • Order by field to indicate an entity as sorting parameter;

    • Tooltip field, i.e. the entity attribute containing information to display in the series item tooltip;

    • Query, i.e. a custom GraphQL filter query created beforehand. For more details, please refer to Section Understanding GraphQL Custom Queries; and

  • GeoJson areas, by indicating the:

    • Entity, i.e. the entity corresponding to the area to display;

    • Name of the area;

    • GeoJson field, i.e. the entity attribute for the GeoJson area. For more details on accepted values, please refer to the official GeoJson documentation and the GeoJson.io tool.

    • Id field, i.e. the entity attribute for the GeoJson ID;

    • Query, i.e. a custom GraphQL filter query created beforehand. For more details, please refer to Section Understanding GraphQL Custom Queries.