Coordinates
Setting coordinates of Dynamic Maps/Polygons.

Polygon Settings
Features for setting functionality and presentation (Labels, PopUps, MouseOvers/Tooltips,...) of Polygons.

Polygon Charts:

ImageChart
Features for setting Charts as images on Polygons.

PopupChart
Features for setting Charts and QlikView visualizations in Polygon PopUps.

The values for nearly all features may be entered as calculated formulas or variables.

For detailed information about notation in this dialogs go to chapter The fx‑editor.

Coordinates

coordinates

Dynamic Map coordinates

Set coordinates for Dynamic Polygons.

This is one out of two procedures for setting Dynamic Map coordinates - see details of both in chapter Dynamic Map Layer.
Before configuring the Dynamic Map, set a Polygon dimension in Basic Settings, in order to link the Dynamic Polygons with further statistic information in the QlikView data model. As long as no dimension is set, the Map can't be displayed.
Dynamic Maps have to be projection format Set coordinates for Dynamic Polygons.
This is one out of two procedures for setting Dynamic Map coordinates - see details of both in chapter Dynamic Map Layer.
Before configuring the Dynamic Map, set a Polygon dimension in Basic Settings, in order to link the Dynamic Polygons with further statistic information in the QlikView data model. As long as no dimension is set, the Map can't be displayed.

Dynamic Maps have to be projection format WGS 84 as Encoded Polylines - for details go to developers.google.com.

Notation:
Theoretically, it would be possible to specify the coordinates directly - manually filled in coordinates are handled as string, that's why they have to be quoted. But this is not the common way.
In practice, the coordinates are loaded in the QlikView script - just fill in the appropriate QlikView field name in this feature.

Example:

'#Coordinates=' & QlikView-FIELDNAME

'#Coordinates=' & COORDINATES

'#Coordinates=' & 'cj_`IitioAr@iqBfWgjAtVcd@Pae@fWgjAeV]Pae@sUa...'

All maps, provided by NPGeoMap, can be loaded in the script, out of the NPGeoMap extension path (sub folder "maps").
Hint: If you cannot see the map files in the Windows File Explorer, choose "All Files" in DropDown menu "Files of Type"

Use QlikView Advanced Aggregation Functions.

If Dynamic Markers are set in addition to Dynamic Maps in the same NPGeoMap object, use the QlikView formula aggr() for the Polygon coordinates in order to avoid multiple loading of the same records and improve the performance of the application.

Example:

'#Coordinates=' & aggr( replace this by your coordinates , replace this by your polygon dimension )

'#Coordinates=' & aggr( COORDINATES , State )

Have a look at the screenshot below - the table shows the NPGeoMap data content with and without the aggr() formula when Marker and Polygons are loaded. With the aggregation the Polygons are loaded only once instead of being repeated for each Marker:

click to expand

Color

color

Polygon fill color (default is a QlikView ColorMix)

Polygon fill color.

When setting colors you can use Hex-Codes, HTML color names or RGB
Example: color red = #FF0000 or red or RGB(255, 0, 0)
(Detailed information in chapter The fx‑editor)

The color is a very potential feature - for example set a ColorMix() formula or create a Choropleth Map to display statistic information via colors on your Polygons. Give Polygons of the same Area the same color - display a traffic light system for turnover, like red/yellow/green for bad/average/good turnover - show population per Polygon from dark blue to light blue - display Dynamic Maps with absolute and with relative statistic values ...

For automatically calculated and generated Polygon colors use the next feature "Color%".

If you don't set any value here, the default colors set in Expert Settings will be used.

Color%

number

number value for color Classes

Set a KPI or other number values (for example Sum(Sales)) instead of colors to determine the colors with Classes - automatically calculated and generated Polygon colors.
The Classes themselves can be configured in the fx‑editor COLOR & SIZE CLASSES.

KPI

number

your Key Performance Indicator (default is 0)

Set your KPI (Key Performance Indicator).
The values are used by Radial Spheres and Isochrones - inside a PopUp the summarized values of the respective Polygons can be displayed (e.g. the total KPI of all districts inside the Sphere).

AnimID

text

alphabetical order of objects to be animated

Set order of animation.
To sort and arrange the order, in which objects should be animated, a special ID can be set here. Basically this ID is all in one for all objects. That means there are four settings like this:

for Dynamic Markers
for Dynamic Endmarkers
for Lines and
for Dynamic Maps (this feature)

The content of all these features is summed up and sorted alphabetically. The result is the order of animations.
If several objects have the same ID, they will be animated at the same time - in this way animation groups can be configured.

Animation properties itself (duration, effects) can be set in the Expert Settings.

BorderColor

color

 Polygon border color (no default value)

Polygon border color.
If you don's set any value here, no border will be rendered.

When setting colors you can use Hex-Codes, HTML color names or RGB
Example: color red = #FF0000 or red or RGB(255, 0, 0)
(Detailed information in chapter The fx‑editor)

Opacity

number

Polygon transparency in percent (default is 50)

Transparency of the fill color of Markers in percent:

0% - colors are covering
100% - completely transparent

BorderSize

number

Polygon border size (default is 0.5)

Polygon border size in pixel.
Please make sure to use a dot as a decimal separator.

Popup

content

Polygon PopUp content

A PopUp is a kind of dialog or a small window, that opens or "pops up" if you click on an item (Marker, Polygons,...), for which a PopUp is defined. NPGeoMap can display text and dynamic content in a PopUp.
The whole PopUp content can be edited with HTML.
Further below in the PopUp Charts you can also add Charts to Polygon PopUps. With the feature qvchart it is possible to even display any QlikView object or chart in this PopUp. The content you add at this point will appear just above the chart.

Example:
& '#Popup=' & 'Hello World'
Example with dynamic content and HTML:
& '#Popup=' & 'State: <b>' & State & ' </b><br>Sales: <b>' & Aggr(NODISTINCT Sum(Sales),State) &' $</b>'

Important: If you want to use local image files, you have to indicate the following QlikView image path:

Extensions/NPGeoMap_v2_3/images/[...]

Example with image:

& '#Popup=' & '<div style="text-align:center; background:#F0F0F0; padding:5px; border: 5px solid gray;border-radius:10px "> PopUp <br>
             <img src="Extensions/NPGeoMap_v2_3/images\flag.png" alt="Company Logo" style="align:center;width:50px;">
              </div>'

You can copy-paste this example to try it yourself!

If the feature "popupautoclose" is disabled in the Expert Settings, you may keep several PopUps open at the same time.

Tip: There's a CSS file "info.css" located in the NPGeoMap Extension directory (subfolder "css"), which can be customized to define the default presentation of PopUps, MouseOvers and SketchBoxes.
(If you configure this file make sure to save a backup, when installing an NPGeoMap update - the actual file will probably be replaced.)

More information about integrating QlikView fields or formulas and further details on notation see chapter fx‑Editor.

MouseOver

content

Polygon MouseOver content

MouseOver (Tooltip) for Dynamic Maps.
It appears next to the cursor, if it hovers on a Dynamic Polygon.
This text may contain HTML, like for example a <br> tag to set a line break. Furthermore a delay and the duration time of MouseOvers can be configured in the Expert Settings.
Use QlikView variables, fields and formulas for dynamic content.

Example:

& '#MouseOver=' & 'Hello World'
Example with dynamic content:
& '#MouseOver=' & CustomerName & ' from ' & Customerlocation & ',<br>Sales: ' & Money(CustomerTurnover)

(See details about notation in chapter fx‑editor).

Important: If you want to use local image files, you have to indicate the following QlikView image path:

Extensions/NPGeoMap_v2_3/images/[...]

Example with image:

& '#Popup=' & '<div style="text-align:center; background:#F0F0F0; padding:5px; border: 5px solid gray;border-radius:10px "> PopUp <br>
             <img src="Extensions/NPGeoMap_v2_3/images\flag.png" alt="Company Logo" style="align:center;width:50px;">
              </div>'

You can copy-paste this example to try it yourself!

Tip: There's a CSS file "info.css" located in the NPGeoMap Extension directory (subfolder "css"), which can be customized to define the default presentation of PopUps, MouseOvers and SketchBoxes.
(If you configure this file make sure to save a backup, when installing an NPGeoMap update - the actual file will probably be replaced.)

More information about integrating QlikView fields or formulas and further details on notation see chapter fx‑Editor.

Label

content

Polygon label

Marker labels are displayed below the Markers, however you can additionally configure the offset and further settings for labels in the menu area Polygon Label Settings outside this expression dialog. Basically labels contain only text, but you can use variables and formulas.
Labels can be edited with line breaks (using Chr(13)), but it's not possible to use HTML.

Note

content

note content

Configure a HTML Note, displayed to the lower right from the center point of each Polygon.

Unlike PopUps the Notes are displayed all at once and at the time - even if you work in the app. The Layerswitcher can hide and unhide the Notes at any time.
They may be used as a kind of caption or labeling, but as they are able to process HTML content, they need more loading time - therefore Notes are only suitable for smaller amounts of Markers.

It's recommended to configure the Notes within a <div> tag.

Example:

& '#Note=' & '<div>Note</div>'

Example with background color:

& '#Note=' & '<div style="text-align:center; background:#F0F0F0; padding:5px;">Note</div>'

Some tips:
You can use HTML SVG to draw shapes and graphics - see more at w3schools.com/graphics/svg.
Use RGBA colors to set a background opacity.
The borders may be rounded at the corners by using "border radius".
The setting NotePosition right below allows you to define the position of the Notes.

Important: If you want to use local image files, you have to indicate the following QlikView image path:

Extensions/NPGeoMap_v2_3/images/[...]

Example with image:

& '#Note=' & '<div style="text-align:center; background:#F0F0F0; padding:5px; border: 5px solid gray;border-radius:10px "> Note <br>
           <img src="Extensions/NPGeoMap_v2_3/images\flag.png" alt="Company Logo" style="align:center;width:50px;">
            </div>'

Example with a QlikView formula:

& '#Note=' & '<div>' & Now() & '</div>'

You can copy-paste the examples to try it yourself!

More information about integrating QlikView fields or formulas and further details on notation see chapter fx‑Editor.

NotePosition

type

relative position of Note to related Marker

The position of Notes can be defined in relation to their respective Polygon (center point).
By default they are rendered bottom right "br".
This technique is not accurate when the Notes have different measures. To prevent unwanted behavior, Notes should always be configured inside a <div> tag. When the div tag has the same size for all Notes, the result will be as expected. If the div tag is configured transparent (no border, no background), the actual Notes inside may then look different, while keeping them on the correct position.

Available position types:

tl = top left

tr = top right

bl = bottom left

br = bottom right

cl = center left

cr = center right

ct = center top

cb = center bottom

cc = center center

PolygonImageURL

file path or SVG

file path of a image or SVG to be displayed on Polygon center

Images can be displayed in the center of Polygons - just set the file path of the image you want to use.
The file has to be stored within the NPGeoMap Extension Directory in the sub folder "images" or below.

Example (file in folder "image"):

& '#PolygonImageURL=' & 'flag.png'

Example (file in sub folder "demo"):

& '#PolygonImageURL=' & 'demo/airplane.png'

Example (screenshot):

& '#PolygonImageURL=' & 'office_11.png'

You can copy-paste the examples to try it yourself!

Outside this dialog in the menu area Polygon Image Settings you can edit size and position of the image.
It's also possible to use animated GIFs.

image file:

click to expand

SVG images:
Instead of setting an image file you can use SVG to draw a image on the fly. In this way you can use QlikView Fields, Formulas and Variables to draw images with dynamic content.
SVG defines vector-based graphics in XML format using the following basic structure:

<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1">
...
</svg>

Just replace width and height by your needed sizes and add svg components like: circles, polygons, text...
Read more about SVG at w3schools.com/graphics/svg_intro.

SVG image:

click to expand

It is important to include the "xmlns" attribute, "width" and "height" and optionally in addition the "version".

Example circle:

& '#PolygonImageURL=' & '<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <circle cx="50%" cy="50%" r="10" fill="white" stroke="red" stroke-width="5"/>
 </svg>'

Example polygon:

& '#PolygonImageURL=' & '<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="20,0 25,20 15,20" style="fill:lime;stroke:purple;stroke-width:1" />
 </svg>'

Example with dynamic content (screenshot):

& '#PolygonImageURL=' & '<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <circle cx="50%" cy="50%" r="48" fill="navy" stroke="white" stroke-width="2"/>
 <circle cx="50%" cy="50%" r="40" fill="white" />
 <text x="50%" y="55%" font-weight="bold" text-anchor="middle" font-family="Verdana" font-size="12">'& Capital &'</text>
 </svg>'

You can copy-paste this example to try it yourself - just replace the QlikView field "Capital" by a existing one.

ImageChart 

ImageCharts can be displayed in the center of Polygons, just like images in the feature above.
Outside this dialog in the menu area Polygon Image Settings you can edit size and position of the ImageChart.
If you edit anything in this section, make sure to enable the line "& '#ImageChart='" as well, in order to let the system know where you are working.

Type

number

ImageChart type, number from 0 to 6 (default is 1)

Set the ImageChart type:

0 = no Chart

1 = Pie

2 = Doughnut

3 = Horizontal Bar

4 = Vertical Bar

5 = Line

6 = Curved Line

example for
ImageChart type pie:

click to expand

Data

data

ImageChart data (default is 400|900)

ImageChart data.
The data has to be separated by a vertical bar/pipe character* | .
*In most cases this character is somewhere in the third level of the keyboard, available by pressing  Alt Gr .

Label

content

ImageChart labels (default is A|B)

ImageChart labels.
This feature refers to the lettering along the axes with bar charts and the ones pointing at the pie chart pieces. If you don't fill anything in here or remark the line, no labels will be displayed.
The labels have to be separated by a vertical bar/pipe character* | .
*In most cases this character is somewhere in the third level of the keyboard, available by pressing  Alt Gr .

Color

color

ImageChart colors (default is red|yellow)

ImageChart colors.
If you don't fill anything in here or remark the line, the ImageChart will be displayed in the default colors. The default colors can be edited in the Expert Settings. When there is more data set than colors in this feature, first it goes on with the default colors and then they all will be repeated.
The data has to be separated by a vertical bar/pipe character* | .

When setting colors you can use Hex-Codes, HTML color names or RGB
Example: color red = #FF0000 or red or RGB(255, 0, 0)
(Detailed information in chapter The fx‑editor)

*In most cases this character is somewhere in the third level of the keyboard, available by pressing  Alt Gr .

PopupChart

Charts can also be displayed in PopUps. The Chart set here will appear below the content set in the regular PopUp of the Dynamic Markers (see few lines above). If no Marker PopUp is set, only the Chart will be displayed in the PopUp.
You can also display any QlikView visualizations instead of the NPGeoMap Chart in this PopUp, by using the feature QVChart below.
The NPGeoMap Charts are dynamic - you can make selections in the Charts, with pie Charts by clicking on the pieces and with bar or line Charts by dragging areas.

Type

number

Chart type, number from 0 to 7 (default is 4)

Set the PopupChart type:

0 = no Chart

1 = Pie

2 = Doughnut

3 = Horizontal Bar

4 = Vertical Bar

5 = Line

6 = Curved Line

7 = QlikView Chart (see following feature QVchart)

example for PopupChart type
Vertical Bar:

click to expand

QVChart

QV object ID

QlikView object ID

Feature for displaying any QlikView visualizations in the PopUp, instead of a NPGeoMap Chart. Just fill in the QlikView object ID (see screenshot on the right) of the visualization you want to use.
Basically all kinds of QlikView objects can be used, however this feature is optimized for displaying QlikView Charts. The only requirement is to keep the QlikView object on the same sheet. It further will be displayed in the size it is on the sheet, so don't minimize it. The best option to hide it is to drag it behind another object, for instance to layer it under the NPGeoMap object.
By using the PopUp Variables in the Expert Settings the QlikView visualization can be restricted to the values of the variables, like for example the current selections.

Data

data

Chart data (default is 400|900)

PopupChart data.
The data has to be separated by a vertical bar/pipe character* | .
*In most cases this character is somewhere in the third level of the keyboard, available by pressing  Alt Gr .

Label

content

Charts labels (default is A|B)

PopupChart labels.
This feature refers to the lettering along the axes with bar charts and the ones pointing at the pie chart pieces. The label above the chart is the title. If you don't fill anything in here or remark the line, no labels will be displayed.
The labels have to be separated by a vertical bar/pipe character* | .
*In most cases this character is somewhere in the third level of the keyboard, available by pressing  Alt Gr .

Color

color

Chart colors (default is red|yellow)

PopupChart colors.
If you don't fill anything in here or remark the line, the PopupChart will be displayed in the default colors. The default colors can be edited in the Expert Settings. When there is more data set than colors in this feature, first it goes on with the default colors and then they all will be repeated.
The data has to be separated by a vertical bar/pipe character* | .

When setting colors you can use Hex-Codes, HTML color names or RGB
Example: color red = #FF0000 or red or RGB(255, 0, 0)
(Detailed information in chapter The fx‑editor)

*In most cases this character is somewhere in the third level of the keyboard, available by pressing  Alt Gr .

Title

content

Chart title

PopupChart title.
This feature allows to add a title to the Chart - see screenshot on the right. Additionally the content of the regular Polygon PopUp would appear above the title, if defined.

Width

number

Chart width in pixel (default is 350)

PopupChart width.
If not defined, an automatic size is calculated by the system.

Height

number

Chart height in pixel (default is 200)

PopupChart height.
If not defined, an automatic size is calculated by the system.