User Manual

GETTING STARTED


OTHER EDITIONS


LAUNCHERS


MODULES


PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support

ALL USER MANUAL VERSIONS

Ignition 8.1. Offline Version (04/2021)
Ignition 8 Online Version
Ignition 7.9 Online Version
Ignition 7.8 Online Version

Deprecated Pages

SDK Documentation

Employees

Sign In

Skip to end of metadata
Go to start of metadata

Component Palette Icon:


On this page ...

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

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.6.0.html.

User Interaction

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.

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.

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
customControls

The following feature is new in Ignition version 8.1.6
Click here to check out the other new features
Custom map controls displaying views that are shown in the corner of the map.

PropertyDescriptionProperty Type
pathPath to the view that will be used as the display for the control.value: string
paramsParameters to be passed to the view within the control. Names in this object must match input parameters defined on the view.object
positionCorner of the map where the control will be anchored. Options are: bottom-right, top-right, or bottom left.  value: string
enabledWhether or not the custom control is enabled.value: boolean

attribution

Enables an attribution control on the map. Default is true.

array
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
maxBounds

When this option is set, the map restricts the view to the given geographical bounds, bouncing the user back if the user tries to pan outside the view.

corner1 and corner2

Objects that determine opposing corners of the maximum bounds. 

Each corner contain a lat and lng value. 

object
object
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.

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.


NameDescriptionProperty Type
url

URL 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}.pn g.

In cases where you have the tile files yourself, they need to be hosted on a web server of some sort. Alternatively

WebDev Mounted Folders can be used to host the tiles. 

value: 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.

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.

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.

NameDescriptionProperty Type
widthWidth of tiles in the grid.value: numeric
heightHeight of tiles in the grid.value: numeric
object
update

Tile update options.

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.

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.

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'].

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. Allows the map to draw arbitrary shapes at specified coordinates. 

NameDescriptionProperty Type
polygon

An array of polygon layers.

NameDescriptionProperty Type
polygons

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

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric

This feature was changed in Ignition version 8.1.15:
In 8.1.15 the default shape of polygons changed to the following:

NameDescriptionProperty Type
nameA unique name which is used to distinguish this elements from others. This name is provided to any applicable interaction event handlers, such as click handlers. value: any
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers. object
points

An array of points that make up this polygon. 

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
array
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
noClip

Disables polyline clipping.

value: boolean
event

Event settings for the individual polygon layer.

stopPropagationWhen enabled, this prevents other mouse event interactions from happening when this vector layer is clicked.value: boolean
object
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
object
array

polyline

An array of polyline layers.

NameDescriptionProperty Type
polylines

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

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric

This feature was changed in Ignition version 8.1.15:

In 8.1.15 the default shape of polylines changed to the following:


NameDescriptionProperty Type
nameA unique name which is used to distinguish this elements from others. This name is provided to any applicable interaction event handlers, such as click handlers.value: any
propertiesProperties of this element. These are provided to any applicable interaction event handlers, such as click handlers. object
points

An array of points along this polyline. Each point must contain a minimum of two elements, each with the following properties:

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
array
array
smoothFactorHow much to simplify each polyline on the zoom level.value: numeric
noClip

Disables polyline clipping.

value: boolean
event

Event settings for the individual polyline layer.

stopPropagationWhen enabled, this prevents other mouse event interactions from happening when this vector layer is clicked.value: boolean
object

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.

NameDescriptionProperty Type
rectangles

An array of rectangle bounds each consisting of two corners that create a single rectangle.

NameDescriptionProperty Type
name

The following feature is new in Ignition version 8.1.15
Click here to check out the other new features
A unique name which is used to distinguish this elements from others. This name is provided to any applicable interaction event handlers, such as click handlers.

value: any
properties

The following feature is new in Ignition version 8.1.15
Click here to check out the other new features
Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers. 

object
corner1 and corner2

An object with two elements, each element represents an opposing corner of the rectangle. Each corner contains the following properties: 

NameDescriptionProperty Type
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
object
array
smoothFactorHow much to simplify each rectangle on the zoom level.value: numeric
noClip

Disables rectangle clipping.

value: boolean
event

Event settings for the individual rectangle layer.

stopPropagationWhen enabled, this prevents other mouse event interactions from happening when this vector layer is clicked.value: boolean
object
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.

NameDescriptionProperty Type
circles

An array of circles each consisting of center point corners that creates a single circle.

NameDescriptionProperty Type
name

The following feature is new in Ignition version 8.1.15
Click here to check out the other new features
A unique name which is used to distinguish this elements from others. This name is provided to any applicable interaction event handlers, such as click handlers.


value: any
properties

The following feature is new in Ignition version 8.1.15
Click here to check out the other new features
Properties of this element. These are provided to any applicable interaction event handlers, such as click handlers. 

object
latLatitudinal coordinatevalue: numeric
lngLongitudinal coordinatevalue: numeric
array
radius

Radius of the circle marker, in pixels.

value: numeric
event

Event settings for the individual circle layer.

stopPropagationWhen enabled, this prevents other mouse event interactions from happening when this vector layer is clicked.value: boolean
object
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.

NameDescriptionProperty Type
marker

Map marker layers.

NameDescriptionProperty Type
name

A unique name that is used to distinguish this marker from another.


value: string
enabled

The following feature is new in Ignition version 8.1.16
Click here to check out the other new features
Determines if the marker is shown on the map. Default value is true.

value: boolean
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.

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.

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.

NameDescriptionProperty Type
geoJSON

GeoJSON objects to include as a feature layer. Each element should be a geoJSON FeatureCollection. This property is intended to be modified by an HTTP binding to a URL containing the desired geoJSON data, and a map transform to process the results. 

For more information on the geoJSON format, see http//geojson.org/.

It is not the intent that geoJSON shapes are manually added to the component. Instead they In addition, the following site can be used to create a basic geoJSON layer: https://geojson.io/

See Perspective Map - Adding GeoJSON Shapes for more information. 

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

NameDescriptionProperty Type
styleOptions

Style options for a FeatureCollection layer. Additional styleOptions objects can be added to individual features within the FeatureCollection. 

NameDescriptionProperty Type
strokeWhether to draw stroke along the path. Set it to false to disable borders on polygons or circles.value: boolean
colorStroke color.color
weightStroke width in pixels.value: numeric
opacityStroke opacity.value: numeric
lineCapA string that defines the shape to be used at the end of the stroke. Options include butt, round, square, and inherit. Default value is inherit.value: string
lineJoinA string that defines shape to be used at the corners of the stroke. Options include miter, round, bevel, and inherit. Default value is inherit.value: string
dashArrayA string that defines the stroke dash pattern.value: string
dashOffsetA string that defines the distance into the dash pattern to start the dash.value: string
fillWhether to fill the path with color. Set it to false to disable filling on polygons or circles.value: boolean
fillColorFill color. Defaults to the value of the color property.color
fillOpacityFill opacity.value: numeric
fillRuleA string that defines how the inside of a shape is determined.value: string
interactiveIf false, the layer will not emit mouse events and will act as a part of the underlying map.value: boolean
object
array
object
hideViewMarkersOnZoom

The following feature is new in Ignition version 8.1.16
Click here to check out the other new features
Hides view markers while they are being repositioned while zooming in or out. Default value is true.

value: boolean
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 .

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

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. Documentation for these objects are provided for convenience. 

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
lat
Numeric
None
Numerical value representing a latitude value.
lng
Numeric
None
Numerical 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
animate
Boolean
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).
duration
Numeric
0.25
Duration of animated panning, in seconds.
easeLinearity
Numeric
0.25
The 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.
noMoveStart
Boolean
false
If 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
animate
Boolean
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).

FitBounds

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
paddingTopLeft
Point
[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.
paddingBottomRight
Point
[0,0]
Similar to paddingTopLeft, except for the bottom right corner of the map.
padding
Point
[0,0]
A setting that allows both the top left and bottom right padding to use the same value.
maxZoom
Numeric
null
The maximum possible zoom to use. 

Component Functions

  • Description

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

  • Parameters

Nothing

  •   Return

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

  • Description

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

  • Parameters

Nothing

  •   Return

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

  • Description

Returns the geographical bound of the map as a dictionary.

  • Parameters

Nothing

  •   Return

Dictonary  A dictionary containing the following keys:

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

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

  • Parameters

Nothing

  •   Return

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

  • 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 Perspective - Map#ZoomOptions. [optional]

  •   Return

Nothing

  • 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 pro ps.zoom.delta. [optional]

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

  •   Return

Nothing

  • 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 Perspective - Map#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 Perspective - Map#ZoomOptions. [optional]

  •   Return

Nothing

  • 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 Perspective - Map#FitBounds. [optional]

  •   Return

Nothing

  • 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 Perspective - Map#FitBounds. [optional]

  •   Return

Nothing

  • 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 Perspective - Map#PanOptions. [optional]

  •   Return

Nothing

  • 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 Perspective - Map#PanOptions . [optional]

  •   Return

Nothing

  • 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 Perspective - Map#PanOptions . [optional]

  •  Return

Nothing

  • 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 Perspective - Map#PanOptions . [optional]

  •  Return

Nothing

  • 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 Perspective - Map#PanOptions . [optional]

  •  Return

Nothing

  • 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 Perspective - Map#PanOptions . [optional]

  •  Return

Nothing

  • Description

Returns height and width of the Map component.

  • Parameters

Nothing

  •   Return

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

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

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

Object PathTypeDescription
event.nameStringThe name of the marker.

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

Object PathTypeDescription
event.latNumericThe latitude of where on the map the user clicked.
event.lngNumericThe longitude of where on the map the user clicked.

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

Object PathTypeDescription
event.latNumericThe latitude of where the mouse moved.
event.lngNumericThe longitude of where the mouse moved.

Interaction event. Fired when a vector is clicked. Returns the name of the vector, the type of the vector, and the coordinates of the vector. 

Object PathTypeDescription
event.nameAnyThe given name of the vector. Returns an empty string if a name is not defined. 
event.typeString

The type of the vector clicked. Possible values are:

  • polygon
  • circle
  • polyline
  • rectangle
event.latNumericThe latitude of the clicked vector.
event.lngNumericThe longitude of the clicked vector.

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

Object PathTypeDescription
event.zoomNumericWhat the zoom level on the map was before zooming.

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

Object PathTypeDescription
event.zoomNumericWhat the zoom level was changed to.

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

Object PathTypeDescription
event.zoomNumericWhat the zoom level on the map was after zooming.

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.

Object PathTypeDescription
event.latNumericThe latitude of the center of the map before moving.
event.lngNumericThe longitude value for the center of the map before moving.

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

Object PathTypeDescription
event.latNumericThe latitude value for the center of the map during moving.
event.lngNumericThe longitude value for the center of the map during moving.

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.

Object PathTypeDescription
event.latNumericThe latitude value for the center of the map after moving.
event.lngNumericThe longitude value for the center of the map after moving.

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

Object PathTypeDescription
event.oldSizePyJsonObjectAdapter

Returns the starting size of the map before the resize. Values are returned in an object that's functionally similar to a Python dictionary. The object contains two values: height and width. 


event.newSizePyJsonObjectAdapterReturns the starting size of the map after the resize. Values are returned in an object that's functionally similar to a Python dictionary. The object contains two values: height and width. 

Examples

Additional Layers

You can add any number of layers to the Perspective Map component by adding tiles under layers.raster.tile.

You will need to obtain an API key to call most maps. Many API keys are available for free or with a subscription to a service such as Google Maps Platform. The example below makes use of the Open Weather Map API

Open Weather Map API Endpoint
https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png?appid={API key}

For this example, we only need to update two parameters in the endpoint URL:

ParameterDescription
{layer}The name of the layer to display, such as clouds_new or temp_new.
{API key}Your unique API key.

PropertyValueDescription
layers.raster.tile.0
PropertyValue
urlhttps://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
options
PropertyValue
opacity1
zIndex0
Default map tile
layers.raster.tile.1
PropertyValue
url https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=YOUR_API_KEY
options
PropertyValue
opacity1
zIndex1
Clouds map tile
layers.raster.tile.2
PropertyValue
url https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=YOUR_API_KEY
options
PropertyValue
opacity0.6
zIndex2
Temperature map tile




  • No labels