OPENSTREETMAP and Sub Controls

The OPENSTREETMAP control supports integrating OpenStreetMap maps into responsive and non-responsive pages.

Optionally, you can use the external geocoder Nominatim with the OPENSTREETMAP control to convert addresses into coordinates and vice versa. When making use of this geocoder, you need to follow the usage policies provided under https://operations.osmfoundation.org/policies/nominatim/. Also there is no guarantee of the availability of the Nominatim server.

An OPENSTREETMAP control can have several MAPMARKER controls as sub controls. Each MAPMARKER control describes rendering and data for a group of markers. The marker text, position of the markers and visibility of the markers can be set dynamically at runtime from the Natural programs. Certain events are triggered in the Natural program based on user interactions such as clicking on the map.

Optionally, you can add one or more MAPLAYER controls to an OPENSTRRETMAP. A MAPLAYER is a layer to do area marking on the map. The controls MAPPOINT, MAPLINE, MAPPOLYGON support the marking of points, lines and polygons.

The following topics are covered below:


Example

Several examples and corresponding description are provided in the Natural for Ajax demos.

Properties for OPENSTREETMAP

Basic
addressprop

Name of adapter parameter that returns the address to be displayed - e.g. "New York" or "1600 Amphitheatre Pky, Mountain View, CA"

Optional  
withgeocoder

Set this property to true if you want tje Ajax framework to use the external geocoder Nominatim to convert addresses to coordinates and vice versa. You need to follow the usage policies of Nominatim https://operations.osmfoundation.org/policies/nominatim/ . Default is false.

Optional

true

false

latitudeprop

Name of the adapter parameter that returns the latitude in decimal format. Example: in order to display Palo Alto (United States) return "34.4419". Return "1000.0" in order to hide the map.

Optional  
longitudeprop

Name of the adapter parameter that returns the longitude in decimal format. Example: in order to display Palo Alto (United States) return "-122.1419". Return "1000.0" in order to hide the map.

Optional  
width

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

Optional

100

120

140

160

180

200

50%

100%

height

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

Optional

100

150

200

250

300

250

400

50%

100%

style

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Optional

background-color: #FF0000

color: #0000FF

font-weight: bold

comment

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Optional  
Appearance
pixelratio

The ratio between physical pixels and device-independent pixels (dips) on the device.

Optional  
logo

URL that points to the image that is shown as icon.

The URL either is an absolute URL or a relative URL. If using a relative URL then be aware of that the generated page is located directly inside your project's directory.

Example: "images/icon.gif" points to an icon in an images-folder that is parallel to the page itself. "../HTMLBasedGUI/images/new.gif" point to a URL that is located inside a different project.

Optional  
maxzoom

The maximum zoom level (integer).

Optional  
minzoom

The minimum zoom level (integer).

Optional  
rotation

The initial rotation for the view in radians (positive rotation clockwise).

Optional  
zoom

The initial zoom level (integer).

Optional  
opacity

Opacity (0, 1). Default is 1

Optional  
withoverviewmap

If set to true an icon to show an overview map is added to the lower left corner of the map.

Optional

true

false

withlocationmarker

If set to true the coordinate specified as location for the map is marked with a default location marker.

Optional

true

false

Binding
onclickmethod

Name of the event that is sent to the adapter when the user clicks a line.

Optional  
selectprop

Name of the adapter parameter representing the selected item

Optional  
addressprop (already explained above)    
latitudeprop (already explained above)    
longitudeprop (already explained above)    
zoomprop

Name of the adapter parameter that provides for the zoom level (integer). Default value is 4.

Optional  
maxzoomprop

Name of the adapter parameter which provides the value for the maximum zoom level at runtime.

Optional  
minzoomprop

Name of the adapter parameter which provides the value for the minimum zoom level at runtime.

Optional  
Miscellaneous
testtoolid

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Optional  

Properties for MAPMARKER

Basic
valueprop

Name of the adapter parameter that provides the content of the control.

Obligatory  
maxcount

Maximum count of markers for marker group.

Optional

1

2

3

int-value

width

Width of the control.

There are three possibilities to define the width:

(A) You do not define a width at all. In this case the width of the control will either be a default width or - in case of container controls - it will follow the width that is occupied by its content.

(B) Pixel sizing: just input a number value (e.g. "100").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a width this control can reference. If you specify this control to have a width of 50% then the parent element (e.g. an ITR-row) may itself define a width of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

Optional

100

120

140

160

180

200

50%

100%

height

Height of the control.

There are three possibilities to define the height:

(A) You do not define a height at all. As consequence the control will be rendered with its default height. If the control is a container control (containing) other controls then the height of the control will follow the height of its content.

(B) Pixel sizing: just input a number value (e.g. "20").

(C) Percentage sizing: input a percantage value (e.g. "50%"). Pay attention: percentage sizing will only bring up correct results if the parent element of the control properly defines a height this control can reference. If you specify this control to have a height of 50% then the parent element (e.g. an ITR-row) may itself define a height of "100%". If the parent element does not specify a width then the rendering result may not represent what you expect.

Optional

100

150

200

250

300

250

400

50%

100%

style

CSS style definition that is directly passed into this control.

With the style you can individually influence the rendering of the control. You can specify any style sheet expressions. Examples are:

border: 1px solid #FF0000

background-color: #808080

You can combine expressions by appending and separating them with a semicolon.

Sometimes it is useful to have a look into the generated HTML code in order to know where direct style definitions are applied. Press right mouse-button in your browser and select the "View source" or "View frame's source" function.

Optional

background-color: #FF0000

color: #0000FF

font-weight: bold

comment

Comment without any effect on rendering and behaviour. The comment is shown in the layout editor's tree view.

Optional  
iconurl

URL that points to the image that is shown as icon.

The URL either is an absolute URL or a relative URL. If using a relative URL then be aware of that the generated page is located directly inside your project's directory.

Example: "images/icon.gif" points to an icon in an images-folder that is parallel to the page itself. "../HTMLBasedGUI/images/new.gif" point to a URL that is located inside a different project.

Optional  
styleclasses

CSS style classes separated by a blank.

Optional  
textprop

Name of the adapter parameter which dynamically provides the text for the marker at runtime.

Optional  
Appearance
straighttext

If the text of the control contains HTML tags then these are by default interpreted by the browser. Specifiying STRAIGHTTEXT as "true" means that the browser will directly render the characters without HTML interpretation.

Example: if you want to output the source of an HTML text then STRAIGHTTEXT should be set to "true".

Optional

true

false

renderaspopover

If set to true the text is rendered as popover when clicking on the icon of the marker. Default is false.

Optional

true

false

popoverposition

The position of the popover relative to the icon: top, bottom, left, right.

Optional

top

bottom

left

right

positioning

Defines the positioning with respect to the coordinates of the marker. Possible values are bottom-left, bottom-center, bottom-right, center-left, center-center, center-right, top-left, top-center, and top-right.

Optional

bottom-left

bottom-center

bottom-right

center-center

center-right

top-left

top-center

top-right

offset

Offsets in pixels used when positioning the marker. The first value is the horizontal offset. A positive value shifts the overlay right. The second value the vertical offset. A positive value shifts the overlay down. Example: 1

Optional  
insertfirst

If set to true, the markers are inserted first in the in the container.

Optional

true

false

autopan

If set to true the map is panned when calling setPosition, so that the marker is entirely visible in the current viewport.

Optional

true

false

autopananimation

Animation duration to pan the marker into view.

Optional

500

1000

2000

autopanmargin

The margin (in pixels) between the marker and the borders of the map when autopanning

Optional

1

2

3

int-value

Binding
valueprop (already explained above)    
textprop (already explained above)    
onclickmethod

Name of the event that is sent to the adapter when the user clicks a line.

Optional  
ondblclickmethod

Name of the event that is sent to the adapter when the user double clicks a line.

Optional  
Miscellaneous
testtoolid

Use this attribute to assign a fixed control identifier that can be later on used within your test tool in order to do the object identification

Optional  

Properties for MAPLAYER

Basic
name

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Optional  
visibleprop

visibleprop

Optional  
zindex

Z-index of the control. If two controls overlap then the one with the higher z-index is drawn in front of the other one.

Optional

1

2

3

int-value

Properties for MAPPOINT

Basic
name

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Optional  
latitudeprop

Name of the adapter parameter that returns the latitude in decimal format. Example: in order to display Palo Alto (United States) return "34.4419". Return "1000.0" in order to hide the map.

Optional  
longitudeprop

Name of the adapter parameter that returns the longitude in decimal format. Example: in order to display Palo Alto (United States) return "-122.1419". Return "1000.0" in order to hide the map.

Optional  
fillcolor

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

Optional

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

strokecolor

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

Optional

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

strokelinedash

Length and spacing of dashes separated by comma. Example: 10

Optional

10;10

strokelinecap

Determines what the end of line should look like. Valid values are butt, round, square. Default is round.

Optional

butt

round

square

strokewidth

The width of the line .

Optional

1

2

3

int-value

radius

The radius of the point shape. If set to 0, nothing is rendered.

Optional

1

2

3

int-value

Properties for MAPLINE

Basic
name

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Optional  
startlongitudeprop

Name of the adapter parameter that returns the longitude in decimal format. Example: in order to display Palo Alto (United States) return "-122.1419". Return "1000.0" in order to hide the map.

Optional  
startlatitudeprop

Name of the adapter parameter that returns the latitude in decimal format. Example: in order to display Palo Alto (United States) return "34.4419". Return "1000.0" in order to hide the map.

Optional  
endlongitudeprop

Name of the adapter parameter that returns the longitude in decimal format. Example: in order to display Palo Alto (United States) return "-122.1419". Return "1000.0" in order to hide the map.

Optional  
endlatitudeprop

Name of the adapter parameter that returns the latitude in decimal format. Example: in order to display Palo Alto (United States) return "34.4419". Return "1000.0" in order to hide the map.

Optional  
strokecolor

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

Optional

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

strokelinedash

Length and spacing of dashes separated by comma. Example: 10

Optional

10;10

strokelinecap

Determines what the end of line should look like. Valid values are butt, round, square. Default is round.

Optional

butt

round

square

strokewidth

The width of the line .

Optional

1

2

3

int-value

Properties for MAPPOLYGON

Basic
name

Text that is displayed inside the control. Please do not specify the name when using the multi language management - but specify a "textid" instead.

Optional  
coordinatesprop

Natural parameter which provides the coordinates of the polygon as a comma separated list: latitude1

Optional  
fillcolor

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

Optional

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

strokecolor

Color of the control. Value must follow format "#rrggbb", e.g. #000000 for black.

Optional

#FF0000

#00FF00

#0000FF

#FFFFFF

#808080

#000000

strokelinedash

Length and spacing of dashes separated by comma. Example: 10

Optional

10;10

strokelinecap

Determines what the end of line should look like. Valid values are butt, round, square. Default is round.

Optional

butt

round

square

strokewidth

The width of the line .

Optional

1

2

3

int-value