Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL USER MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


General

Component Palette Icon:



Description

The Map component provides a powerful, mobile-friendly, and interactive map. Settings can be customized to control the initial view, zoom, mouse interaction, keyboard interaction and more.

The Map component is based on the Leaflet open-source JavaScript library for interactive maps. For more information on Leaflet, see https://leafletjs.com/reference-1.3.2.html.


Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
init

Map initial state when loaded. Options as follows:

NameDescriptionProperty Type
center Sets the latitude and longitude for the initial state of the map.
NameDescriptionProperty Type
latLatitude value for the map.value: numeric
lngLongitude value for the map.value: numeric
object
zoom Initial map zoom level. Percentage value from 1 to 100. Default is 13.value: numeric
object
location

Map location.

NameDescriptionProperty Type
enabled Enables geolocation. Default is false (disabled).value: boolean
showHeadingIndicator Enables the heading indicator. Default is true.value: boolean
object
zoom

Zoom properties for the map.

 Click here to see Zoom properties
NameDescriptionProperty Type
controlsWhether zoom controls are added to the map. Default is true.value: boolean
deltaControls how much the map's zoom level will change after a zoomIn() or zoomOut() or the user presses + or - on the keyboard or uses the zoom controls. Values smaller than 1 allow for greater granularity.value: numeric
onBoxZoomEnables the map to be zoomed to a rectangular area defined by pressing the shift key while dragging the mouse. Default is true.value: boolean
onDoubleClickEnables the map to be zoomed in by double-clicking on it and zoomed out by pressing the shift key while double clicking. Default is true.value: boolean
onScrollWheelEnables the map to be zoomed in and out using the mouse scroll wheel. Default is true.value: boolean
snapForces the map's zoom level to be a multiple of this value. Applicable after fitBounds() or a pinch-zoom.value: numeric
maxMaximum zoom level of the map. Default is null.value: numeric
minMinimum zoom level of the map. Default is null.value: numeric
animation

Animation settings for the map.

NameDescriptionProperty Type
enabled Whether the map zoom animation is enabled.value: boolean
threshold Won't animate zoom if the zoom difference exceeds this value. Default is 4.value: numeric
object
object
attributionEnables an attribution control on the map. Default is true.value: boolean
closePopupsOnClickWhen set to true, popups will close when a user clicks anywhere else on the map. Default is true.value: boolean
trackResizeEnables the map to automatically handle browser window resizing. Default is false.value: boolean
keyboardNavEnables navigation of the map with keyboard arrow key and with the + (plus) and - (minus) keys. The + key zooms in; the - key zooms out. Default is true.
value: boolean
keyboardPanDeltaThe number of pixels to pan when keyboard a arrow key is pressed. Default is 80.value: numeric
draggingEnables the map to be dragged with a mouse/touch. Default is true.value: boolean
fadeAnimationEnables the fade animation. Default is true.value: boolean
layers

Settings for the map UI, vector, and raster layers that can be displayed on top of the map.

 Click here to see the layers properties
NameDescriptionProperty Type
raster

Map raster layers.

NameDescriptionProperty Type
tile

Settings enable you to load and display tile layers on the map. The tile provider can be customized to change the appearance of the map. See https://leaflet-extras.github.io/leaflet-providers/preview/ for some possibilities.


 Click here to see tile properties
NameDescriptionProperty Type
urlURL can be either a URL template if using a standard tile service or a Web Map Services URL. Default is https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.pngvalue: string
urlTemplateParamsAn object of params to use with a url template string, if the url prop is a template string (i.e, contains {z}/{x}/{y}.object
WMS

Web Map Service tile layer provider configurations. Used only if the url property is not a template string. See: https://en.wikipedia.org/wiki/Web_Map_Service

 Click here to see Web Map Service properties
NameDescriptionProperty Type
layersComma-separated list of WMS layers to display. (Required)value: string
stylesComma-separated list of WMS styles.value: string
formatWMS image format (use 'image/png' for layers with transparency).value: string
transparentIf enabled, the WMS service will return images with transparency. Default is false.value: boolean
versionVersion of the WMS service to use.value: string
uppercaseIf enabled, WMS request parameters keys will be uppercase. Default is false.value: boolean
object

options

Options for standard tile layer creation.

 Click here to see options properties
NameDescriptionProperty Type
attributionThis tile layers attribution.value: string
opacityOpacity of tiles.value: numeric
zIndexThe z-index of tiles in the grid.value: numeric
tileSize

Width and height of tiles in the grid.

 Click here to see tileSize properties
NameDescriptionProperty Type
widthWidth of tiles in the grid.value: numeric
heightHeight of tiles in the grid.value: numeric
object
update

Tile update options.

 Click here to see update properties
NameDescriptionProperty Type
whenZoomingBy default, a smooth animation will update grid layers at every integer zoom level. Setting this to false will update the grid layer only when the smooth animation ends. Default is true.value: boolean
whenIdleLoad new tiles only when panning ends. True by default on mobile browsers, in order to avoid too many requests and keep smooth navigation. Default is false otherwise, in order to display new tiles during panning.value: boolean
intervalTiles will not update more than once every update interval in miliseconds when panning.value: numeric
object
zoom

Zoom options.

 Click here to see zoom properties
NameDescriptionProperty Type
maxMaximum zoom level up to which this layer will be displayed (inclusive). Default is 18.value: numeric
minMinimum zoom level down to which this layer will be displed (inclusive). Default is 0.value: numeric
offsetZoom number used in the tile URLs will be offset with this value.value numeric
reverseIf set to true, the zoom number used in the tile URLs will be reversed (maxZoom - zoom instead of zoom to maxZoom). Default is false.value: boolean
native

Native zoom levels.

 Click here to see native properties
NameDescriptionProperty Type
maxMaximum zoom number the tile source has available. If specified, the tiles on all zoom levels higher than maxNativeZoom will be loaded from maxNativeZoom level and auto-scaled. Default is null.Value: string
minMinimum zoom number the tile source has available. If specified, the tiles on all zoom levels lower than minNativeZoom will be loaded from minNativeZoom level and auto-scaled. Default is null.Value: string
object
object
subdomains

Subdomains of the tile service. Passed in the form of an array of strings (where each string is a subdomain name). For example, ['a'.'b','c'].

 Click here to see subdomains properties
NameDescriptionProperty Type
errorTileUrlURL to the tile image to show in place of the tile that failed to load.value: string
tmsIf true, inverses Y axis numbering for tiles (turn this on for Tile Map Service services). Default is false.value: boolean
detectRetinaIf true and user is on a retina display, it will request four tiles of half the specified size and a bigger zoom level in place of one to utilize the high resolution. Default is false.

value: boolean

crossOriginEnables the crossOrigin attribute to be added to the tiles. If a string is provided, all tiles wil have their crossOrigin attribute set to the String provided. Default is false.value: boolean
array
object


array
image

Settings for images displayed over specific bounds of the map.  

NameDescriptionProperty Type
sourceImage URL.value: string
bounds

Rectangle bounds.

NameDescriptionProperty Type
corner1

Settings for lat and lng bounds for corner1.

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
object
corner2

Settings for lat and lng bounds for corner2.

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
object
object
options

Options for the image overlay.

NameDescriptionProperty Type
opacityThe opacity of the image overlay.value: numeric
altText for the alt attribute of the image (useful for accessibility).value: numeric
crossOriginWhether the crossOrigin attribute will be added to the image. If a string is provided, the image will have its crossOrigin attribute set to the String provided.value: string
errorOverlayUrlURL to the overlay image to show in place of the overlay that failed to load.value: string
zIndexThe explicit zindex of the image layer.value: numeric
object


array
object
vector

Map vector layers. You can set an array of the following layer shapes.

NameDescriptionProperty Type
polygon

An array of polygon layers.

 Click here to see the polygon properties
NameDescriptionProperty Type
polygons

An array of polygons each consisting of an array of points that create a single polygon.

 Click here to polygon properties
NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
array
smoothFactorHow much to simplify each vector on each zoom level. Higher the number means better performance and smoother look, and the lower the number means more accurate representation.value: numeric
noClipDisables polyline clipping.value: boolean
stroke

Stroke settings for the individual polygon layer.

NameDescriptionProperty Type
enabledWhether to draw stroke along the path. Set it to false to disable borders.value: boolean
colorStroke color.value: string
weightStroke weight in pixels.value: numeric
opacityStroke opacity (0-1).value: numeric
dashArrayStroke dash arrayvalue: numeric
dashOffsetDefines the distance in the dash patter to start the dash.value: numeric
lineCapA string that defines shape to be used at the end of the stroke. Options are round, butt, or square.value: string
lineJoinA string that defines shape to be used at the corners of the stroke. Options are round, arc, bevel, miter, or miter-clip.value: string
object
fill

Fill settings for the individual polygon layer.

NameDescriptionProperty Type
enabledWhether to fill the pattern with color.value: boolean
colorFill color.value: string
opacityFill opacity (0-1).value: numeric
rulePresentation attribute defining the algorithm to use to determine the inside part of the shape. Options are nonzero or evenodd.value: string dropdown
object
array

polyline

An array of polyline layers.

 Click here to see the polyline properties
NameDescriptionProperty Type
polylines

An array of polylines each consisting of an array of points that create a single polyline.

 Click here to polygon properties
NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
array
smoothFactorHow much to simplify each polyline on the zoom level.value: numeric
noClipDisables polyline clipping.value: boolean

stroke

Stroke settings for the individual polyline layer.

NameDescriptionProperty Type
enabledWhether to draw stroke along the path. Set it to false to disable borders.value: boolean
colorStroke color.value: string
weightStroke weight.value: numeric
opacityStroke opacity.value: numeric
dashArrayStroke dash arrayvalue: numeric
dashOffsetDefines the distance in the dash patter to start the dash.value: numeric
lineCapShape to be used at the end of the stroke. Options are round, butt, or square.value: string 
lineJoinShape to be used at the corners of the stroke. Options are round, arc, bevel, miter, or miter-clip.value: string 
object
fill

Fill settings for the individual polyline layer.

NameDescriptionProperty Type
enabledWhether to fill the pattern with color.value: boolean
colorFill color.value: string
opacityFill opacity.value: numeric
rulePresentation attribute defining the algorithm to use to determine the inside part of the shape. Options are nonzero or evenodd.value: string
object
array

rectangle

An array of rectangle layers.

 Click here to see the rectangle properties
NameDescriptionProperty Type
rectanglesAn array of rectangle bounds each consisting of two corners that create a single rectangle.array
smoothFactorHow much to simplify each rectangle on the zoom level.value: numeric
noClipDisables rectangle clipping.value: boolean
stroke

Stroke settings.

NameDescriptionProperty Type
enabledWhether to draw stroke along the path. Set it to false to disable borders.value: boolean
colorStroke color.value: string
weightStroke width in pixels.value: numeric
opacityStroke opacity (0-1).value: numeric
dashArrayStroke dash array.value: numeric
dashOffsetDefines the distance in the dash patter to start the dash.value: numeric
lineCapA string that defines the shape to be used at the end of the stroke. Options are round, butt, or square.value: string 
lineJoinA string that defines the shape to be used at the corners of the stroke. Options are round, arc, bevel, miter, or miter-clip.value: string 
object
fill

Fill settings for the individual rectangle layer.

NameDescriptionProperty Type
enabledWhether to fill the pattern with color.value: boolean
colorFill color.value: string
opacityFill opacity (0-1).value: numeric
rulePresentation attribute defining the algorithm to use to determine the inside part of the shape. Options are nonzero or evenodd.value: string 
object
array

circle

An array of circle layers.

 Click here to see the circle properties
NameDescriptionProperty Type
circlesAn array of circles each consisting of center point corners that creates a single circle.array
radiusRadius of the circle marker, in pixels.value: numeric
stroke

Stroke settings for individual circle layer.

NameDescriptionProperty Type
enabledWhether to draw stroke along the path. Set it to false to disable borders.value: boolean
colorStroke color.value: string
weightStroke width in pixels.value: numeric
opacityStroke opacity.value: numeric
dashArrayStroke dash arrayvalue: numeric
dashOffsetDefines the distance in the dash patter to start the dash.value: numeric
lineCapShape to be used at the end of the stroke. Options are round, butt, or square.value: string 
lineJoinShape to be used at the corners of the stroke. Options are round, arcs, bevel, miter, or miter-clip.value: string 
object
fill

Fill settings for individual circle layer.

NameDescriptionProperty Type
enabledWhether to fill the pattern with color.value: boolean
colorFill color.value: string
opacityFill opacity.value: numeric
rulePresentation attribute defining the algorithm to use to determine the inside part of the shape. Options are nonzero or evenodd.value: string 
object
array
array
ui

Map user interface (UI) layers. An array of popup layer configurations for this map. Includes popup location, width, height, and controls for behavior.

 Click here to see ui properties
NameDescriptionProperty Type
marker

Map marker layers.

 Click here to see the marker properties
NameDescriptionProperty Type
nameA unique name that is used to distinguish this marker from another.value: string
latLatitudinal coordinate.value: numeric
lngLongitudinal coordinate.value: numeric
opacityMarker opacity.value: numeric
icon

Marker icon configuration.

NameDescriptionProperty Type
pathIcon path. Otherwise uses default icon.value: string
colorFill color for the icon.value: string
size

Size settings.

NameDescriptionProperty Type
widthWidth in pixels.value: numeric
heightHeight in pixels.value: numeric
value: numeric
styleStyle for the icon. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
object
tooltip

This marker's tooltip configuration, if tooltip is enabled.

NameDescriptionProperty Type
content

The tooltip content to display.

NameDescriptionProperty Type
textText to display.value: string.
view

The view to display as popup content. If configured, this overrides the text property.

NameDescriptionProperty Type
pathPath of view to display.value: string
paramsParameters to be passed to the view. Names in this object must match input parameters defined on the view.object
object
object
directionDirection where to open the tooltip. Possible values are: right, left, top, bottom, center, auto. Auto will dynamically switch between right and left according to the tooltip position on the map.value: string 
permanentWhether to open the tooltip permanently or on a mouseover.value: boolean
stickyIf true, the tooltip will follow the mouse instead of being fixed at the feature center.value: boolean
opacityTooltip opacity.value: numeric
object
popup

Popup configuration for this marker.

NameDescriptionProperty Type
enabledEnable marker popup.value: boolean
content

The popup content to display.

NameDescriptionProperty Type
textText to display.value: string.
view

The view to display as popup content. If configured, this overrides the text property.

NameDescriptionProperty Type
pathPath of view to display.value: string
paramsParameters to be passed to the view. Names in this object must match input parameters defined on the view.object
object
object
width
NameDescriptionProperty Type
maxMaximum popup width in pixels.value: numeric
minMinimum popup width in pixels.value: numeric
object
heightMaximum popup height in pixels.value: numeric
pan

Popup pan configuration.

NameDescriptionProperty Type
autoSet it to false if you don't want the map to do panning animation to fit the opened popup.value: boolean
object
closeButtonControls the presence of a close button in the popup.value: boolean
autoCloseSet to false if you want to override the default behavior of the popup closing when another popup is opened.value: boolean
closeOnEscapeKeySet to false if you want to override the default behavior of the escape key for closing the popup.value: boolean
closeOnClickSet if you want to override the default behavior of the popup closing when user clicks on the map.value: boolean

array
popup

Array of popup layer configurations for this map.

 Click here to see the popup properties.
NameDescriptionProperty Type
enabledShow popup.value: boolean
latLatitudinal coordinate.value: numeric
lngLongitudinal coordinate.value: numeric
content

The popup content to display.

NameDescriptionProperty Type
textText to display.value: string.
view

The view to display as popup content. If configured, this overrides the text property.

NameDescriptionProperty Type
pathPath of view to display.value: string
paramsParameters to be passed to the view. Names in this object must match input parameters defined on the view.object


width

Width settings for the popup.

NameDescriptionProperty Type
maxMaximum popup width in pixels.value: numeric
minMinimum popup width in pixels.value: numeric
object
heightMaximum popup height in pixels.value: numeric
pan

Popup pan configuration.

NameDescriptionProperty Type
autoSet it to false if you don't want the map to do panning animation to fit the opened popup.value: boolean
object
closeButtonControls the presence of a close button in the popup.value: boolean
autoCloseSet to false if you want to override the default behavior of the popup closing when another popup is opened.value: boolean
closeOnEscapeKeySet to false if you want to override the default behavior of the escape key for closing the popup.value: boolean
closeOnClickSet if you want to override the default behavior of the popup closing when user clicks on the map.value: boolean
array
view

Array of view layer configurations for this map.

 Click here to see the view properties
NameDescriptionProperty Type
pathPath of view to display.value: string
paramsParameters to be passed to the view. Names in this object must match input parameters defined on the view.object
latLatitudinal coordinate.value: numeric
lngLongitudinal coordinate.value: numeric
transparentBackgroundIf enabled, disables the default background color.value: boolean
shadowIf enabled, displays a box shadow around the view.value: boolean
array
value: string dropdown
other

Other map layers.

 Click here to other properties
NameDescriptionProperty Type
geoJSONGeoJSON objects to include as a feature layer. Hint: Try an HTTP binding. See: http//geojson.org/.array
object
object
styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.


User Interaction

The Map component properties have impact on the way a user can interact with a table in the runtime.

InteractionDescription
Zoom

Depending on the property settings, users can zoom the Map component in several ways:

  • Shift and drag the mouse to a rectangular shape.
  • Double click to zoom in and Shift double-click to zoom out.
  • Roll the scroll wheel up to zoom in and down to zoom out.
  • Press the + (plus) key to zoom in and the - (minus) key to zoom out.

Pan

Depending on the property settings, users can pan across the Map component in multiple ways:

  • Use the keyboard arrow keys to pan left, right, up, down.
  • Use the mouse to click and drag the map.
Popups

Depending on property settings, users may see the following popup actions.

  • Popups close when they click on the map.
  • Popups close when they use the escape key.
  • Popups open as they scroll past certain areas of the map.

Perspective Component Events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Map Parameters

The following feature is new in Ignition version 8.0.4
Click here to check out the other new features

Because this component uses the Leaflet library, there are several common objects you'll want to be aware of when using the the callable methods on this component. Each of these "objects" is just a Python dictionary with specific keys. However, we'll name and document these objects below.

 LatLng

An object representing a point at a certain latitude and longitude. For the purposes of interacting with the map component, this object is typically a Python dictionary.

# Example
{ lat:50, lng:30 }
OptionTypeDefaultDescription
latNumber
None
Numerical value representing a latitude value.
lngNumberNoneNumerical value representing a longitude value.

 PanOptions

A Python dictionary containing keys that can modify the panning behavior on the Map component. The contents of this dictionary are listed below, but the original explanation can be found in Leaflet's documentation.

OptionTypeDefaultDescription
animateBoolean
false
If true, panning will always be animated if possible. If false, it will not animate panning, either resetting the map view if panning more than a screen away, or just setting a new offset for the map pane (except for panBy which always does the latter).
durationNumber0.25Duration of animated panning, in seconds.
easeLinearityNumber0.25The curvature factor of panning animation easing (third parameter of the Cubic Bezier curve). 1.0 means linear animation, and the smaller this number, the more bowed the curve.
noMoveStartBooleanfalseIf true, panning won't fire movestart event on start (used internally for panning inertia).

 ZoomOptions

A Python dictionary containing keys that can modify the zooming behavior on the Map. The contents of this dictionary are listed below, but the original explanation can be found in Leaflet's documentation.

OptionTypeDefaultDescription
animateBoolean
false
If true, panning will always be animated if possible. If false, it will not animate panning, either resetting the map view if panning more than a screen away, or just setting a new offset for the map pane (except for panBy which always does the latter).

 FitBoundsOptions

A Python dictionary containing keys that can modify the zooming behavior on the Map. The contents of this dictionary are listed below, but the original explanation can be found in Leaflet's documentation.

OptionTypeDefaultDescription
paddingTopLeftPoint[0, 0]

Sets the amount of padding in the top left corner of a map container that shouldn't be accounted for when setting the view to fit bounds. Useful if you have some control overlays on the map like a sidebar and you don't want them to obscure objects you're zooming to.

paddingBottomRightPoint[0, 0]The same for the bottom right corner of the map.
paddingPoint[0, 0]Equivalent of setting both top left and bottom right padding to the same value.
maxZoomNumbernullThe maximum possible zoom to use.


Scripting Functions

The following feature is new in Ignition version 8.0.4
Click here to check out the other new features

 .getCenter()
  • Description

Returns the geographical center of the man in latitude and longitude. 

  • Parameters

none

  •  Return

LatLng  Returns the geographical center of the map view as{ lat: number, lng: number }.

  • Scope

Session

 .getZoom()
  • Description

Returns the current zoom level of the map view as a number.

  • Parameters

none

  •  Return

Numeric  Returns the current zoom level of the map view as a number.

  • Scope

Session

 .getBounds()
  • Description

Returns the geographical bound of the map as a dictionary.

  • Parameters

none

  •  Return

Dictonary A dictionary containing the following keys:


north: number
northEast:
LatLngeast: number
southEast: LatLng
south: number
southWest: LatLng
west: number
northWest: LatLng
  • Scope

Session


 .getBoundsAsBBoxString()
  • Description

Returns a string with bounding box coordinates in a 'South West longitude, South West latitude , North East longitude, North East latitude' format.

  • Parameters

none

  •  Return

String  Returns the bounding box of the map as a string.

  • Scope

Session

 .zoomIn([delta, options])
  • Description

Increases the zoom of the map by delta.

  • Parameters

Numeric delta - The numerical value to increase the zoom by. If omitted, uses the value of props.zoom.delta. [optional]

Dictionary options - A dictionary of parameters to use during the zoom, typically containing a single key, animate. See ZoomOptions. [optional]

  •  Return

None

  • Scope

Session

 .zoomOut([delta, options])
  • Description

Decreases the zoom of the map by delta.

  • Parameters

Numeric delta - The numerical value to increase the zoom by. If omitted, uses the value of props.zoom.delta. [optional]

Dictionary options - A dictionary of parameters to use during the zoom, typically containing a single key, animate. See ZoomOptions. [optional]

  •  Return

None

  • Scope

Session

 .setZoomAround(point, zoom, [options])
  • Description

Zooms the map while keeping a specified geographical point on the map stationary (e.g. used internally for scroll zoom and double-click zoom)

  • Parameters

Dictionary point - The geographic point that the map will zoom around. See LatLng. [required]

Numeric zoom- The numerical value to increase the zoom by. If omitted, uses the value of props.zoom.delta. [optional]

Dictionary options - A dictionary of parameters to use during the zoom, typically containing a single key, animate. See ZoomOptions. [optional]

  •  Return

None

  • Scope

Session

 .fitBounds(latLngBounds, [options])
  • Description

Sets a map view that contains the given geographical bounds with the maximum zoom level possible

  • Parameters

Dictionary latLngBounds - A dictionary consisting of two LatLng objects. The LatLng objects combined represent the geographical bounds the map view should be set to. [required]

Dictionary options - A dictionary of parameters used to manipulate the FitBound settings. See FitBounds. [optional]

  •  Return

None

  • Scope

Session

 .fitWorld([options])
  • Description

Sets a map view that mostly contains the whole world with the maximum zoom level possible.

  • Parameters

Dictionary options - A dictionary of parameters used to manipulate the FitBound settings. See FitBounds. [optional]

  •  Return

None

  • Scope

Session

 .panTo(latLng, [options])
  • Description

Pans the map to a given center.

  • Parameters

Dictionary latLng - The geographic point to pan to. [required]

Dictionary options - A dictionary of parameters used to modify the panning behavior. See PanOptions. [optional]

  •  Return

None

  • Scope

Session

 .panBy(point, [options])
  • Description

Pans the map by a given number of pixels (animated).

  • Parameters

Dictionary point - The geographic point to pan to. The dictionary should contain an 'x' and 'y' key, both with numeric values. [required]

Dictionary options - A dictionary of parameters used to modify the panning behavior. See PanOptions. [optional]

  •  Return

None

  • Scope

Session

 .flyTo(latLng, [zoom, options] )
  • Description

Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation. 

  • Parameters

Dictionary latLng - A Python Dictionary representing the coordinates to fly to. [required]

Numeric zoom - Sets the zoom level to transition to during the flight. If omitted, uses the value on props.zoom.delta. [optional]

Dictionary options - A dictionary of panning options to use. See PanOptions. [optional]

  •  Return

None

  • Scope

Session

 .flyToBounds(latLngBounds, [options] )
  • Description

Sets the view of the map with a smooth animation like flyTo, but takes a bounds parameter like fitBounds.

  • Parameters

Dictionary latLngBounds - A dictionary consisting of two LatLng objects. The LatLng objects combined represent the geographical bounds the map view should be set to. [required]

Dictionary options - A dictionary of panning options to use. See PanOptions. [optional]

  •  Return

None

  • Scope

Session

 .panInsideBounds(latLngBounds, [options] )
  • Description

Pans the map to the closest view that would lie inside the given bounds (if it's not already), controlling the animation using the options specific, if any.

  • Parameters

Dictionary latLngBounds - A dictionary consisting of two LatLng objects. The LatLng objects combined represent the geographical bounds the map view should be set to. [required]

Dictionary options - A dictionary of panning options to use. See PanOptions. [optional]

  •  Return

None

  • Scope

Session

 .panInside(latLng, [options] )
  • Description

Pans the map the minimum amount to make the latLng visible.

  • Parameters

Dictionary latLng - A Python dictionary representing the coordinates to pan to. [required]

Dictionary options - A dictionary of panning options to use. See PanOptions. [optional]

  •  Return

None

  • Scope

Session

The following feature is new in Ignition version 8.0.11
Click here to check out the other new features

 .getSize()
  • Description

Returns height and width of the Map component.

  • Parameters

none

  •  Return

JSON Object  Returns a Python dictionary. Contains two items: height  and width .

  • Scope

Session

Scripting Example
def doMapStuff(self):
	map = self.getSibling("Map")
	coordinateBounds = {'corner1': {'lat': 39.086798, 'lng': -120.069014}, 'corner2': { 'lat': 38.815319, 'lng': -119.787519 }}
	latLngTahoe = {'lat': 39.086798, 'lng': -120.069014 }
	latLngInductive = {'lat': 38.652511, 'lng': -121.189438 }
	zoomPanOptions = { 'animate': True, 'duration': 3, 'easeLinearity': 0.25, 'noMoveStart': False }
	fitBoundsOptions = { 'padding': { 'x': 100, 'y': 100 }, 'animate': True, 'duration': 3 }
	panPixels = { 'x': 200, 'y': 200 }


	print map.getCenter()
	# Returns the geographical bounds visible in the current map view as latLngBounds
	
	map.flyTo(latLng = latLngTahoe, options = zoomPanOptions)
	# Sets the view of the map with a smooth animation like flyTo, but takes a bounds parameter like fitBounds

Component Methods

The following feature is new in Ignition version 8.0.4
Click here to check out the other new features

 onMarkerClick

Interaction event. Fired when the a marker is clicked. Returns the unique name of the marker.

 event.name
  • Object Path

event.name

  • Type

String

  • Description

The name of the marker.

 onMapClick

Interaction event. Fired when the map is clicked. Returns the lat and lng of the mouse click as it translates on the map.

 event.lat
  • Object Path

event.lat

  • Type

Numeric

  • Description

The latitude of where on the map the user clicked.

 event.lng
  • Object Path

event.lng

  • Type

Numeric

  • Description

The longitude of where on the map the user clicked.

 onMapMouseMove

Interaction event. Fires as the mouse moves over the map. Returns lat and lng of mouse as it translates on the map.

 event.lat
  • Object Path

event.lat

  • Type

Numeric

  • Description

The latitude of where the mouse moved.

 event.lng
  • Object Path

event.lng

  • Type

Numeric

  • Description

The longitude of where the mouse moved.

 onZoomStart

Map state event. Fired when the map zoom is about to change (e.g. before zoom animation). Returns the zoom level.

 event.zoom
  • Object Path

event.zoom

  • Type

Numeric

  • Description

What the zoom level on the map was before zooming.

 onZoom

Map state event. Fired repeatedly during any change in zoom level, included zoom and fly animations. Returns the zoom level.

 event.zoom
  • Object Path

event.zoom

  • Type

Numeric

  • Description

What the zoom level was changed to.

 onZoomEnd

Map state event. Fired when the map has changed, after any animations. Returns the zoom level.

 event.zoom
  • Object Path

event.zoom

  • Type

Numeric

  • Description

What the zoom level on the map was after zooming.

 onMoveStart

Map state event. Fired when the view of the map starts changing (e.g., user starts dragging the map). Returns the map center as lat and lng.

 event.lat
  • Object Path

event.lat

  • Type

Numeric

  • Description

The latitude of the center of the map before moving.

 event.lng
  • Object Path

event.lng

  • Type

Numeric

  • Description

The longitude value for the center of the map before moving.

 onMove

Map state event. Fires repeatedly during any movement on the map, include pan and fly animations. Returns the map center as lat and lng.

 event.lat
  • Object Path

event.lat

  • Type

Numeric

  • Description

The latitude value for the center of the map during moving.

 event.lng
  • Object Path

event.lng

  • Type

Numeric

  • Description

The longitude value for the center of the map during moving.

 onMoveEnd

Map state event. Fired when the center of the map stops changing (e.g. user stopped dragging the map). Returns the new map center as lat and lng.

 event.lat
  • Object Path

event.lat

  • Type

Numeric

  • Description

The latitude value for the center of the map after moving.

 event.lng
  • Object Path

event.lng

  • Type

Numeric

  • Description

The longitude value for the center of the map after moving.

The following feature is new in Ignition version 8.0.11
Click here to check out the other new features

 onResize

Map state event. Fires when the map size has changed. Returns the map size as oldSize and newSize.

 event.oldSize
  • Object Path

event.oldSize

  • Type

PyJsonObjectAdapter Returns an object that's functionally similar to a Python dictionary. Contains two two values: height and width.

  • Description

The starting size of the map before the resize.

 event.newSize
  • Object Path

event.newSize

  • Type

PyJsonObjectAdapter Returns an object that's functionally similar to a Python dictionary. Contains two two values: height and width.

  • Description

The new size of the map.

Example

PropertyValue
props.init.center.lat38.65256
props.init.center.lng-121.189028
props.init.center18
props.zoom.controlsfalse
props.layers.ui.marker.0.lat38.65256
props.layers.ui.marker.0.lng-121.189028
props.layers.ui.marker.0.tooltip.enablestrue
props.layers.ui.marker.0.tooltip.contentWelcome to Inductive Automation HQ


  • No labels