Map Indicators

Note

The Map Indicators module requires the following script libraries to function:

• scMap
• scAlert

And the following Object Libraries:

• Map Indicators
• WEATHER

Getting started with Map Indicators

Map Indicators is a module consisting of a set of script libraries and object libraries to build components to be used in the Map View object in WideQuick. By using this module you will have access to components such as zoom in/zoom out buttons, weather widgets and more.

Setting up a Map View object

To use Map Indicators a MapView object is required. The MapView object can be found in the Objects Toolbar in WideQuick Designer®:

Place it in a view you want to display your map in.

Once the Map View is placed we need to link the object to the script library scMap. We do this by adding an onLoad script to the new MapView object:

    scMap.mapViews=this;

All objects inside of a map in WideQuick has a property called geo that contains information on coordinates of the object.

As objects have one geo object with a single coordinate we need to keep track of the scale and hysteresis of the current viewport of the map. We do this by keeping track of the ratio currently displayed in the map object by adding the following dynamics script to the visibility dynamics of the MapView:

mapRatioWidth = this.width*scWM.scalingFactor/this.visibleRect().width
mapRatioHeight = this.height*scWM.scalingFactor/this.visibleRect().height
weatherLat = this.latitude
weatherLon = this.longitude


var web = false;
var sysInfo = app.System.info()
if(sysInfo.productId == sysInfo.WQWeb){
    web = true;
}

if(web && (app.subNavMenu.visible || app._subNavRemoteVisible)){
    this.width = 1300
} else {
    this.width = 1620;
}

return true;

You are now ready to add Map Indicators

Adding Indicators.

Map Indicators are a set of objects in the object library Map Indicators. These objects are designed to be a part of a map view are therefore prepared with functions and dynamics to work properly in that setting.

In general a widget is added just like any other object we want to display in a MapView. You drag it into the list of objects to display and add a longitude and latitude it should be located.

What is different for the map indicators is that they come prepared with properties to give context to their respective functions. Below follows a list of indicators and how to set them up to make them function properly.

Add a Weather Widget

The Weather Widget shows you the weather for a given coordinate by accessing the SMHI API. The coordinates are by default given as the middle of the MapView object by setting weatherLon and weatherLat, two internal variables in the application. As per default we do this in the dynamics script above.

In addition to this we need to point the widget to where it should access its data. This is by default the internal struct weather. We do this in the properties tab of the MapView:

Add Zoom button

Adding a Zoom button to the MapView is rather straight forward. It has no properties to consider. Therefore, add it as you would any other object in a MapView. If you are uncertain of how to do so. Please take a look at the short video sequence above or consult the WideQuick help by pressing F1 in WideQuick Designer.

The Zoom button will automatically reposition itself to the bottom right corner of the MapView and therefore does not need a longitude or latitude input.

Add Pins

Pins are great for marking locations of interest in your application. For example an plant or facility that we are monitoring/controlling. To add a pin add it as any other object in a MapView. Give it a longitude and latitude where your plant or facility is located.

If you want to make the pin clickable and open a view related to the location of interest. You can do so by editing the property linkedView:

The input is preferable a path to a view in the Main_Menu or System folder. In this example it is a process view to the workview Inlopp. That is located on path System/Videdal/Inlopp.kvie

Add Lines

Lines are a great way of visualizing paths or pipes in a application. As pipes require more than one coordinate these are inherently more complex and need more information to work. In This version of WideQuick Modular Framework they are added by pick a size of Line. There are three sizes to pick from. SmallPipeLines, MediumPipeLines and MainPipeLines.

There are a set of properties to set on these objects to make them function:

• pipeColor - What color should the line be? You can pick these from the theme named "mapIndicators". If you desire additional colors, just add a custom color to the theme and reference its name instead.
• lineWidth - (optional) Alters the line width. This value is altered by zooming as well so it is not a constant but rather a start value
• linkSize - (optional) Each line segment is connected by an ellipse that we have chosen to call a Link. You can alter its size the same way you do a line.
• filterType - Used by the application to filter different networks no need to fill this in
• popupWidth - (optional) The width of the popup
• popupHeight - (optional) The height of the popup
• popupTextSize - (optional) Alters the text size of the font
• fileName - Points to the csv file containing coordinates for the network of lines. There is a maximum of 50 segments per network in WideQuick Modular Framework 2024.1.0
• origoLatitude - (optional) Specify a start point for the network
• origoLongitude - (optional) Specify a start point for the network
• Caption - This represents the header in the map indicator

Here is an Example configuration:

Csv file with coordinates

To link lines to a csv file you need to input coordinates for the lines. This is done by creating a csv file in the folder mapPaths in your project directory. If there is no mapPaths directory you can add one.

The structure of the csv is two columns separated by a comma longitude and latitude from where the network should start and end. The following example is a network over Malmö Sweden:

lat,long
55.60993454611365,13.067280081496149
55.60754066940655,13.068012894315629
55.59706293405991,13.064900367032141
55.586229083148936,13.06210645824121
55.575010991019305,13.049196672585212
55.56406209265025,13.023184417468679
55.56771206450431,12.986285551858925
55.57070805669029,12.948037902764336
55.58835253553419,12.947941561647154
55.597117367875725,12.970678198813472
55.603812162853316,12.994474594377622
55.607077501929616,13.02193197387472
55.607186342050994,13.0452466622596
55.61529406922991,13.083397968508196

To link the csv to for example a MainPipeLines group. simple fill the fileName property with the filename:

The result should look something like this:

Add Filter

Filters are useful for when you want to focus on a certain set of lines or networks of lines. By pressing the filter buttons you can easily hide/show the networks in a view.

Filters are tightly linked to the lines indicator and therefore any network of lines will automatically populate the filter. If a filter is desired. You can add it as you would any other object.