Google Maps Widget

Last modified on 2022/05/28 10:53

Apps - Widget - Google Maps icon.png  This type of widget belongs to the Dashboard category in the widget library. It enables you to geolocate, for a given measure, places (e.g. countries, cities or addresses) that are related to statistical data on a map using the online mapping service, Google Maps.

In execute mode, the display is made up of two panes:

  • The map (1) in which map markers are placed (1):
    • Infotips appear when you move the mouse over each location marked on the map.
    • The position of the logged-in user is indicated by a blue marker (2).
  • The Transit pane (optional) (2) indicating the travel time for the selected means of transportation between the current user position and one of the locations marked on the map.

          EVApps - widget Google Map - Description.png

Notes

   Open url.png  See General remarks on widgets

  • The data source must contain one or more Dimension columns that identify the locations and one Measure: Observed value column.
  • The properties you must specify depend on the way locations are defined in the data source:
    • Using the highest-level location. You should specify the Content > Address property.
    • Using different address fields in Product name - ev itsm.png when the data source points to a view linked to the AM_LOCATION table. You should specify the Content > Address property and select the Full Address (<Nom_table>) virtual field.
    • Using latitude and longitude coordinates. You should specify the Content > Latitude and Content > Longitude properties.
    • Using the postal address. You should specify the Content > Address property.
  • When transit information is displayed, the web browser may request authorization to retrieve the current user position.
    • We recommend that you keep it enabled on a permanent basis for the Product name - ev sas.png website.
    • Subsequently, you can modify this access permission. Open url.png See the procedure depending on your web browser.
  • In execute mode, you may need to zoom in to display traffic information and public transportation routes. If n/a is displayed, this means that the information cannot be calculated.

Best Practice big icon.pngBest practices

  • You should use the Google Maps widget to display values on a map.
  • Use a simple map style that highlights values (Visualization > Style Editor).
  • Create a custom widget if you want to keep the map style and reuse it in other widgets.

Example

You want to display the number of incidents (measure) for each subsidiary in North America (dimension elements) on a map. The data source below includes different ways in which you can define locations (highest-level locations, specified addresses, latitude/longitude).

      Open url.png  See the procedure to find out how to specify properties depending on the structure of your data source.

Data source Google Maps widget

EVApps - widget Google Map - Example DataSource.png

Download Zip icon.png Download Example (CSV file)

EVApps - widget Google Map - Example Chart.png

List of properties

Content

DataSource

Data Source: External data source associated with the widget. 

  • The drop-down list displays all of the data sources available in the app. 
  • To modify the data source or to view its contents, you should click Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define a new data source, click Apps - Add datasource icon.png Add Data Source in the Objects pane.
DataTransformer

Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed.

  • Click Setup / Preview Data below the Data Transformer property to open the dedicated window. Open url.png See the description.

Latitude: Data source column where the latitude coordinates are stored.

Longitude: Data source column where the longitude coordinates are stored.

Address: Data source column where the highest-level locations or specified addresses (e.g. countries, cities) are stored. Note:  When the data source points to a view linked to the AM_LOCATION table, you can use the Full Address (<Table_name>) virtual field. Open url.png See General remarks on widgets

Value: Data source column where the measure values are stored.

Tooltip Label: Data source column where the location names are stored. Note: These names are displayed in infotips on the map.

Data

MaximumNumberOfDisplayedData

Maximum Number Of Displayed Data: Used to indicate the maximum number of dimension elements to be displayed for each measure selected in the data source. This improves chart readability.

example   You want to display the chart for incidents and requests per employee. Open url.png See the Maximum Number Of Data field.

  • The count is always performed from the first dimension element.
  • When the number of dimension elements to be displayed is less than the number of dimension elements to be loaded, the Others dimension element will automatically be added to the chart. It will aggregate all of the values from non-displayed dimension elements.

Visualization

Style Editor: XML code describing the map style. Enter the code directly in the field or click Apps - Edit Html icon.png to display the list of styles available. Note: To avoid errors when inserting a map style, you should copy and paste the XML code available on the website.

    Open url.png  Consult the following website: snazzymaps

    EVApps - widget Google Map - Style editor.png

User Position: When the app allows access to traffic information, this determines if the current position of the logged-in user should be displayed as Localization icon.png on the map (box is checked) or not (box is not checked).

Show Travel Time (Note: Only if the User Position box is checked): Used to indicate if the Transit pane should be displayed (box is checked) or not (box is not checked).
         EVApps - widget Google Map - Transportation toolbar.png

Public Transportation: Used to indicate if public transportation routes should be displayed (box is checked) or not (box is not checked). In execute mode:

  • Users can choose to display or hide this information using the EVApps - widget Google Map - Public transportation icon.png icon.
  • Click Black Up arrow icon.png to display and select the means of transportation required.
             EVApps - widget Google Map - Public transportation.png     EVApps - widget Google Map - Public transportation toolbar.png

Traffic: Used to indicate if traffic information should be displayed (box is checked) or not (box is not checked). In execute mode:

  • Users can choose to display or hide this information using the EVApps - widget Google Map - Private transportation icon.png icon.
  • Click Black Up arrow icon.png to display and select the means of transportation required.
              EVApps - widget Google Map - Traffic.png

Auto Fit Marker: Used to indicate if the default zoom level applied to the map in execute mode should automatically be adjusted to display all markers on the map (box is checked) or not (box is not checked). If you do not want the map to be adjusted automatically, then you should specify the default zoom level using the Zoom Level tool.

Zoom Level (Note: Only if the Auto Fit Marker box is not checked): Tool used to manually define the zoom level to be applied to the map in execute mode.

Visualization Type: Type of markers placed on the map.

  • Image: Depends on the selected map marker template (Image > Select Map Marker property).
  • Circle: Circle whose size is proportionate to the value represented.
    • Use the Circle > Maps Thresholds property to define different colors corresponding to different thresholds.
    • When too much data is displayed in close proximity, it will be grouped together in a marker Cluster icon.png (1). You must then zoom in to view individual values (2). Note: Google Maps manages geographical proximity and decides if there is sufficient space for displaying several circles or if a single big circle should be displayed instead.
               EVApps - widget Google Map - Marker Circle Cluster.png
  • PinCircle: Marker in which a value is displayed. Note: Use the Circle > Maps Thresholds property to define different colors corresponding to different thresholds.
Image Circle PinCircle
EVApps - widget Google Map - Marker Image.png EVApps - widget Google Map - Marker Circle.png EVApps - widget Google Map - Marker PinCircle.png

Image

Note: These properties are available only if the marker is an Image.

Select Map Marker: You can select the template for the map marker in the icon gallery provided by Logo - EasyVista.png.

Circle

Note: These properties are available only if the marker is a Circle or PinCircle.

Maps Thresholds: Used to define different colors for markers corresponding to different thresholds.
         Apps - widget Google Maps - Thresholds.png

  • Enter each value marking a change of color.
  • Click on each map marker then select the desired color via the Color Picker.

Color Opacity (0.1 - 1.5): Tool used to define the transparency of the map marker.

Text Police Size (10 - 15): Tool used to define the font size for values displayed within markers.

Theme

Open url.png  See List of properties

Procedures

 

How to specify properties for locations

          EVApps - widget Google Map - Example DataSource.png

  • The properties below must be specified when locations are defined using the highest-level locations:
    • Address: Location
    • Value = Nbr of Incidents
  • The properties below must be specified when locations are defined using latitude/longitude coordinates:
    • Latitude: Latitude
    • Longitude: Longitude
    • Value = Nbr of Incidents
  • The properties below must be specified when locations are defined using postal addresses:
    • Address: Address
    • Value = Nbr of Incidents

 

How to modify the geolocation permission granted to the Product name - ev sas - big.pngev Service Apps website

In Firefox

1. Go to the Product name - ev sas.png website.

2. Select Tools > Page Info in the menu and open the Permissions tab.

3. Change the Access your location setting.

In Chrome

1. In the web browser toolbar, select the Chrome menu Google Chrome Menu icon.png.

2. Select the Settings tab and click Show advanced settings.

3. In the Privacy section, select Content settings. In the Location section, select the default authorization desired for future geolocation requests and click [ OK ].

Note: Select Manage exceptions to delete previous authorizations granted to certain sites.

In Internet Explorer

1. In the web browser toolbar, click Internet Explorer Parameters icon.png and select Internet options.

2. Select the Security tab.

3. In the Security settings section, select Trusted sites and click the [ SITES ] button.

4. Define the required authorizations:

  • To add an authorization, enter the URL of the website and click [ ADD ].
  • To delete an authorization, select the URL of the website and click [ DELETE ].
Tags:
Powered by XWiki © EasyVista 2022