OPENSTREETMAP and Sub Controls

#### Search Results

Search

# 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

- Properties for OPENSTREETMAP

- Properties for MAPMARKER

- Properties for MAPLAYER

- Properties for MAPPOINT

- Properties for MAPLINE

- Properties for MAPPOLYGON

## Example

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

## Properties for OPENSTREETMAP

Basic
withgeocoder | Set this property to true if you want the 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
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 percentage 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 percentage 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 | 1.123456 2 2.123456
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 | 1 5 10 20
minzoom | The minimum zoom level (integer). | Optional | 1 5 10 20
rotation | The initial rotation for the view in radians (positive rotation clockwise). | Optional | -2.5 -1 1 2.5
zoom | The initial zoom level (integer). | Optional | 1 5 10 20
opacity | Opacity (0, 1). Default is 1 | Optional | 0.2 0.5 1
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
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
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 percentage 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 percentage 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 |
Appearance
straighttext | If the text of the control contains HTML tags then these are by default interpreted by the browser. specifying 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: 11 | 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 6000
autopanmargin | The margin (in pixels) between the marker and the borders of the map when autopanning | Optional | 1 2 3 int-value
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 |
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
Animation
withanimation | Set this property to true, if the layer contains animated markers. For optimization purpose, per default animation is switched off. | Optional | true false

## 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 |
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 semicolon. Example: 102 | Optional | 10;10
strokewidth | The width of the line . | Optional | 1 2 3.5
radius | The radius of the point shape. If set to 0, nothing is rendered. | Optional | 5 7 10.5
Animation
animateduration | The duration of the animation in milliseconds. | Optional | 500 1000 2000 6000
animaterepeat | How often the animation is repeated until it is automatically stopped. | Optional | 1 2 3 int-value
animatestartradius | The radius with which the animation starts. | Optional | 5 7 10.5
animateendradius | The radius with which the animation ends. | Optional | 5 7 10.5
animatewidth | The stroke width for the animation. | Optional | 1 2 3.5
animatergbcolor | The color for the stroke during animation. If specified as rgb color, for the animation the corresponding rgba color will be used and the opacity is automatically set according to the elapsed animation time. | Optional | rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
animatefillrgbcolor | The fill color during animation. If specified as rgb color, for the animation the corresponding rgba color will be used and the opacity is automatically set according to the elapsed animation time. | Optional | rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
animateonadd | If set to true, the animation is automatically started when the mappoint is added to a map. This happens when the control is loaded in the browser. | Optional | true false

## 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 |
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 semicolon. Example: 102 | 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.5
Animation
animateduration | The duration of the animation in milliseconds. | Optional | 500 1000 2000 6000
animaterepeat | How often the animation is repeated until it is automatically stopped. | Optional | 1 2 3 int-value
animatedash | In case the stroke line used for the animation should be dashed: Specify the length and spaces of the dashes as comma separated list. Example: 10;2 | Optional | 10;10
animatewidth | The stroke width for the animation. | Optional | 1 2 3.5
animatergbcolor | The color for the stroke during animation. If specified as rgb color, for the animation the corresponding rgba color will be used and the opacity is automatically set according to the elapsed animation time. | Optional | rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
animateonadd | If set to true, the animation is automatically started when the mappoint is added to a map. This happens when the control is loaded in the browser. | Optional | true false

## 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 |
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 semicolon. Example: 102 | Optional | 10;10
strokewidth | The width of the line . | Optional | 1 2 3.5
Animation
animateduration | The duration of the animation in milliseconds. | Optional | 500 1000 2000 6000
animaterepeat | How often the animation is repeated until it is automatically stopped. | Optional | 1 2 3 int-value
animatedash | In case the stroke line used for the animation should be dashed: Specify the length and spaces of the dashes as comma separated list. Example: 10;2 | Optional | 10;10
animatewidth | The stroke width for the animation. | Optional | 1 2 3.5
animatergbcolor | The color for the stroke during animation. If specified as rgb color, for the animation the corresponding rgba color will be used and the opacity is automatically set according to the elapsed animation time. | Optional | rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
animatefillrgbcolor | The fill color during animation. If specified as rgb color, for the animation the corresponding rgba color will be used and the opacity is automatically set according to the elapsed animation time. | Optional | rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0)
animateonadd | If set to true, the animation is automatically started when the mappoint is added to a map. This happens when the control is loaded in the browser. | Optional | true false

### On this page

- Example
- Properties for OPENSTREETMAP
- Properties for MAPMARKER
- Properties for MAPLAYER
- Properties for MAPPOINT
- Properties for MAPLINE
- Properties for MAPPOLYGON