Name | Description | Property Type |
---|
init | Map initial state when loaded. Options as follows: Name | Description | Property Type |
---|
center | Sets the latitude and longitude for the initial state of the map.
Name | Description | Property Type |
---|
lat | Latitude value for the map. | value: numeric | lng | Longitude 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. Name | Description | Property 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. Expand |
---|
title | Click here to see Zoom properties |
---|
| Name | Description | Property Type |
---|
controls | Whether zoom controls are added to the map. Default is true. | value: boolean | delta | Controls 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 | onBoxZoom | Enables the map to be zoomed to a rectangular area defined by pressing the shift key while dragging the mouse. Default is true. | value: boolean
| onDoubleClick | Enables 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
| onScrollWheel | Enables the map to be zoomed in and out using the mouse scroll wheel. Default is true. | value: boolean
| snap | Forces the map's zoom level to be a multiple of this value. Applicable after fitBounds() or a pinch-zoom. | value: numeric | max | Maximum zoom level of the map. Default is null. | value: numeric | min | Minimum zoom level of the map. Default is null. | value: numeric | animation | Animation settings for the map. Name | Description | Property 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 | attribution | Enables an attribution control on the map. Default is true. | value: boolean | closePopupsOnClick | When set to true, popups will close when a user clicks anywhere else on the map. Default is true. | value: boolean | trackResize | Enables the map to automatically handle browser window resizing. Default is false. | value: boolean | keyboardNav | Enables 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 | keyboardPanDelta | The number of pixels to pan when keyboard a arrow key is pressed. Default is 80. | value: numeric | dragging | Enables the map to be dragged with a mouse/touch. Default is true. | value: boolean | fadeAnimation | Enables 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. Expand |
---|
title | Click here to see the layers properties |
---|
| Name | Description | Property Type |
---|
raster | Map raster layers. Name | Description | Property Type |
---|
tile | Settings enable youto 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.
Expand |
---|
title | Click here to see tile properties |
---|
| Name | Description | Property 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}.png | value: string | urlTemplateParams | An 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
Expand |
---|
title | Click here to see Web Map Service properties |
---|
| Name | Description | Property Type |
---|
layers | Comma-separated list of WMS layers to display. (Required) | value: string | styles | Comma-separated list of WMS styles. | value: string | format | WMS image format (use 'image/png' for layers with transparency). | value: string | transparent | If enabled, the WMS service will return images with transparency. Default is false. | value: boolean | version | Version of the WMS service to use. | value: string | uppercase | If enabled, WMS request parameters keys will be uppercase. Default is false. | value: boolean |
|
| object | options
| Options for standard tile layer creation. Expand |
---|
title | Click here to see options properties |
---|
| Name | Description | Property Type |
---|
attribution | This tile layers attribution. | value: string | opacity | Opacity of tiles. | value: numeric | zIndex | The z-index of tiles in the grid. | value: numeric | tileSize | Width and height of tiles in the grid. Expand |
---|
title | Click here to see tileSize properties |
---|
| Name | Description | Property Type |
---|
width | Width of tiles in the grid. | value: numeric | height | Height of tiles in the grid. | value: numeric |
|
| object | update | Tile update options. Expand |
---|
title | Click here to see update properties |
---|
| Name | Description | Property Type |
---|
whenZooming | By 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 | whenIdle | Load 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 | interval | Tiles will not update more than once every update interval in miliseconds when panning. | value: numeric |
|
| object | zoom | Zoom options. Expand |
---|
title | Click here to see zoom properties |
---|
| Name | Description | Property Type |
---|
max | Maximum zoom level up to which this layer will be displayed (inclusive). Default is 18. | value: numeric | min | Minimum zoom level down to which this layer will be displed (inclusive). Default is 0. | value: numeric | offset | Zoom number used in the tile URLs will be offset with this value. | value numeric | reverse | If 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. Expand |
---|
title | Click here to see native properties |
---|
| Name | Description | Property Type |
---|
max | Maximum 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 | min | Minimum 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']. Expand |
---|
title | Click here to see subdomains properties |
---|
| Name | Description | Property Type |
---|
errorTileUrl | URL to the tile image to show in place of the tile that failed to load. | value: string | tms | If true, inverses Y axis numbering for tiles (turn this on for Tile Map Service services). Default is false. | value: boolean | detectRetina | If 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 | crossOrigin | Enables 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. Name | Description | Property Type |
---|
source | Image URL. | value: string | bounds | Rectangle bounds. Name | Description | Property Type |
---|
corner1 | Settings for lat and lng bounds for corner1. Name | Description | Property Type |
---|
lat | Latitudinal coordinate | value: numeric | lng | Longitudinal coordinate | value: numeric |
| object | corner2 | Settings for lat and lng bounds for corner2. Name | Description | Property Type |
---|
lat | Latitudinal coordinate | value: numeric | lng | Longitudinal coordinate | value: numeric |
| object |
| object | options | Options for the image overlay. Name | Description | Property Type |
---|
opacity | The opacity of the image overlay. | value: numeric | alt | Text for the alt attribute of the image (useful for accessibility). | value: numeric | crossOrigin | Whether 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 | errorOverlayUrl | URL to the overlay image to show in place of the overlay that failed to load. | value: string | zIndex | The 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. Name | Description | Property Type |
---|
polygon | An array of polygon layers. Expand |
---|
title | Click here to see the polygon properties |
---|
| Name | Description | Property Type |
---|
polygons | An array of polygons each consisting of an array of points that create a single polygon. Expand |
---|
title | Click here to polygon properties |
---|
| Name | Description | Property Type |
---|
lat | Latitudinal coordinate | value: numeric | lng | Longitudinal coordinate | value: numeric |
|
| array | smoothFactor | How 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 | stroke | Stroke settings for the individual polygon layer. Name | Description | Property Type |
---|
enabled | Whether to draw stroke along the path. Set it to false to disable borders. | value: boolean | color | Stroke color. | value: string | weight | Stroke weight in pixels. | value: numeric | opacity | Stroke opacity (0-1). | value: numeric | dashArray | Stroke dash array | value: numeric | dashOffset | Defines the distance in the dash patter to start the dash. | value: numeric | lineCap | A string that defines shape to be used at the end of the stroke. Options are round, butt, or square. | value: string | lineJoin | A 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. Name | Description | Property Type |
---|
enabled | Whether to fill the pattern with color. | value: boolean | color | Fill color. | value: string | opacity | Fill opacity (0-1). | value: numeric | rule | Presentation 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. Expand |
---|
title | Click here to see the polyline properties |
---|
| Name | Description | Property Type |
---|
polylines | An array of polylines each consisting of an array of points that create a single polyline. Expand |
---|
title | Click here to polygon properties |
---|
| Name | Description | Property Type |
---|
lat | Latitudinal coordinate | value: numeric | lng | Longitudinal coordinate | value: numeric |
|
| array | smoothFactor | How much to simplify each polyline on the zoom level. | value: numeric | noClip | Disables polyline clipping. | value: boolean | stroke | Stroke settings for the individual polyline layer. Name | Description | Property Type |
---|
enabled | Whether to draw stroke along the path. Set it to false to disable borders. | value: boolean | color | Stroke color. | value: string | weight | Stroke weight. | value: numeric | opacity | Stroke opacity. | value: numeric | dashArray | Stroke dash array | value: numeric | dashOffset | Defines the distance in the dash patter to start the dash. | value: numeric | lineCap | Shape to be used at the end of the stroke. Options are round, butt, or square. | value: string | lineJoin | 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 polyline layer. Name | Description | Property Type |
---|
enabled | Whether to fill the pattern with color. | value: boolean | color | Fill color. | value: string | opacity | Fill opacity. | value: numeric | rule | Presentation 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. Expand |
---|
title | Click here to see the rectangle properties |
---|
| Name | Description | Property Type |
---|
rectangles | An array of rectangle bounds each consisting of two corners that create a single rectangle. | array | smoothFactor | How much to simplify each rectangle on the zoom level. | value: numeric | noClip | Disables rectangle clipping. | value: boolean | stroke | Stroke settings. Name | Description | Property Type |
---|
enabled | Whether to draw stroke along the path. Set it to false to disable borders. | value: boolean | color | Stroke color. | value: string | weight | Stroke width in pixels. | value: numeric | opacity | Stroke opacity (0-1). | value: numeric | dashArray | Stroke dash array. | value: numeric | dashOffset | Defines the distance in the dash patter to start the dash. | value: numeric | lineCap | A string that defines the shape to be used at the end of the stroke. Options are round, butt, or square. | value: string | lineJoin | A 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. Name | Description | Property Type |
---|
enabled | Whether to fill the pattern with color. | value: boolean | color | Fill color. | value: string | opacity | Fill opacity (0-1). | value: numeric | rule | Presentation 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. Expand |
---|
title | Click here to see the circle properties |
---|
| Name | Description | Property Type |
---|
circles | An array of circles each consisting of center point corners that creates a single circle. | array | radius | Radius of the circle marker, in pixels. | value: numeric | stroke | Stroke settings for individual circle layer. Name | Description | Property Type |
---|
enabled | Whether to draw stroke along the path. Set it to false to disable borders. | value: boolean | color | Stroke color. | value: string | weight | Stroke width in pixels. | value: numeric | opacity | Stroke opacity. | value: numeric | dashArray | Stroke dash array | value: numeric | dashOffset | Defines the distance in the dash patter to start the dash. | value: numeric | lineCap | Shape to be used at the end of the stroke. Options are round, butt, or square. | value: string | lineJoin | Shape 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. Name | Description | Property Type |
---|
enabled | Whether to fill the pattern with color. | value: boolean | color | Fill color. | value: string | opacity | Fill opacity. | value: numeric | rule | Presentation 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. Expand |
---|
title | Click here to see ui properties |
---|
| Name | Description | Property Type |
---|
marker | Map marker layers. Expand |
---|
title | Click here to see the marker properties |
---|
| Name | Description | Property Type |
---|
name | A unique name that is used to distinguish this marker from another. | value: string | lat | Latitudinal coordinate. | value: numeric | lng | Longitudinal coordinate. | value: numeric | opacity | Marker opacity. | value: numeric | icon | Marker icon configuration. Name | Description | Property Type |
---|
path | Icon path. Otherwise uses default icon. | value: string | color | Fill color for the icon. | value: string | size | Size settings. Name | Description | Property Type |
---|
width | Width in pixels. | value: numeric | height | Height in pixels. | value: numeric |
| value: numeric | style | Style 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. Name | Description | Property Type |
---|
content | The tooltip content to display. Name | Description | Property Type |
---|
text | Text to display. | value: string. | view | The view to display as popup content. If configured, this overrides the text property. Name | Description | Property Type |
---|
path | Path of view to display. | value: string | params | Parameters to be passed to the view. Names in this object must match input parameters defined on the view. | object |
| object |
| object | direction | Direction 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 | permanent | Whether to open the tooltip permanently or on a mouseover. | value: boolean | sticky | If true, the tooltip will follow the mouse instead of being fixed at the feature center. | value: boolean | opacity | Tooltip opacity. | value: numeric |
| object | popup | Popup configuration for this marker. Name | Description | Property Type |
---|
enabled | Enable marker popup. | value: boolean | content | The popup content to display. Name | Description | Property Type |
---|
text | Text to display. | value: string. | view | The view to display as popup content. If configured, this overrides the text property. Name | Description | Property Type |
---|
path | Path of view to display. | value: string | params | Parameters to be passed to the view. Names in this object must match input parameters defined on the view. | object |
| object |
| object | width | Name | Description | Property Type |
---|
max | Maximum popup width in pixels. | value: numeric | min | Minimum popup width in pixels. | value: numeric |
| object | height | Maximum popup height in pixels. | value: numeric | pan | Popup pan configuration. Name | Description | Property Type |
---|
auto | Set it to false if you don't want the map to do panning animation to fit the opened popup. | value: boolean |
| object | closeButton | Controls the presence of a close button in the popup. | value: boolean | autoClose | Set to false if you want to override the default behavior of the popup closing when another popup is opened. | value: boolean | closeOnEscapeKey | Set to false if you want to override the default behavior of the escape key for closing the popup. | value: boolean | closeOnClick | Set 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. Expand |
---|
title | Click here to see the popup properties. |
---|
| Name | Description | Property Type |
---|
enabled | Show popup. | value: boolean | lat | Latitudinal coordinate. | value: numeric | lng | Longitudinal coordinate. | value: numeric | content | The popup content to display. Name | Description | Property Type |
---|
text | Text to display. | value: string. | view | The view to display as popup content. If configured, this overrides the text property. Name | Description | Property Type |
---|
path | Path of view to display. | value: string | params | Parameters 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. Name | Description | Property Type |
---|
max | Maximum popup width in pixels. | value: numeric | min | Minimum popup width in pixels. | value: numeric |
| object | height | Maximum popup height in pixels. | value: numeric | pan | Popup pan configuration. Name | Description | Property Type |
---|
auto | Set it to false if you don't want the map to do panning animation to fit the opened popup. | value: boolean |
| object | closeButton | Controls the presence of a close button in the popup. | value: boolean | autoClose | Set to false if you want to override the default behavior of the popup closing when another popup is opened. | value: boolean | closeOnEscapeKey | Set to false if you want to override the default behavior of the escape key for closing the popup. | value: boolean | closeOnClick | Set 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. Expand |
---|
title | Click here to see the view properties |
---|
| Name | Description | Property Type |
---|
path | Path of view to display. | value: string | params | Parameters to be passed to the view. Names in this object must match input parameters defined on the view. | object | lat | Latitudinal coordinate. | value: numeric | lng | Longitudinal coordinate. | value: numeric | transparentBackground | If enabled, disables the default background color. | value: boolean | shadow | If enabled, displays a box shadow around the view. | value: boolean |
|
| array |
|
| value: string dropdown | other | Other map layers. Expand |
---|
title | Click here to other properties |
---|
| Name | Description | Property Type |
---|
geoJSON | GeoJSON objects to include as a feature layer. Hint: Try an HTTP binding. See: http//geojson.org/. | array |
|
| object |
|
| object | style | Sets 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. |
|
|