Represents the maps control. It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that has rich feature set that includes markers, labels, bubbles and much more.
<div id="maps"/>
<script>
var maps = new Maps();
maps.appendTo("#maps");
</script> boolean
Enables or disables the export to image functionality in maps.
Defaults to false
boolean
Enables or disables the export to PDF functionality in maps.
Defaults to false
boolean
Enables or disables the print functionality in maps.
Defaults to false
Gets or sets the options for customizing the annotations in the maps.
string
Gets or sets the background color of the maps container.
Defaults to null
number
Gets or sets the index of the layer of maps which will be the base layer. It provides the option to select which layer to be visible in the maps.
Defaults to 0
Gets or sets the options for customizing the style properties of the maps border.
Gets or sets the center position of the maps.
string
Gets or sets the description of the maps for assistive technology.
Defaults to null
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
string
Gets or sets the format to apply internationalization for the text in the maps.
Defaults to null
string
Gets or sets the height in which the maps is to be rendered.
Defaults to null
Gets or sets the options to customize the layers of the maps.
Gets or sets the options to customize the legend of the maps.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
Gets or sets the options to customize the area around the map.
Gets or sets the options to customize the margin of the maps.
Gets or sets the projection with which the maps will be rendered to show the two-dimensional curved surface of a globe on a plane.
Defaults to Mercator
number
Gets or sets the tab index value for the maps.
Defaults to 0
Gets or sets the theme styles supported for maps. When the theme is set, the styles associated with the theme will be set in the maps.
Defaults to Material
Gets or sets the options to customize the title of the maps.
Gets or sets the mode in which the tooltip is to be displayed. The tooltip can be rendered on mouse move, click or double clicking on the element on the map.
Defaults to ‘MouseMove’
boolean
Enables or disables the visibility state of the separator for grouping.
Defaults to false
string
Gets or sets the width in which the maps is to be rendered.
Defaults to null
Gets or sets the options to customize the zooming operations in maps.
booleanSpecifies whether the shape is selected in the maps or not.
Adds the handler to the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event |
| handler | Function |
Specifies the call to run when the event occurs. |
Returns void
This method is used to add the layers dynamically to the maps.
| Parameter | Type | Description |
|---|---|---|
| layer | Object |
Specifies the layer to be added in the maps. |
Returns void
This method is used to add markers dynamically in the maps. If we provide the index value of the layer in which the marker to be added and the settings of the marker as parameters, the marker will be added in the location.
| Parameter | Type | Description |
|---|---|---|
| layerIndex | number |
Specifies the index number of the layer. |
| markerCollection | MarkerSettingsModel[] |
Specifies the settings of the marker to be added. |
Returns void
Appends the control within the given HTML element
| Parameter | Type | Description |
|---|---|---|
| selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
This method destroys the maps. This method removes the events associated with the maps and disposes the objects created for rendering and updating the maps.
Returns void
Removing unload event to persist data when enable persistence true
Returns void
This method handles the export functionality for the maps.
| Parameter | Type | Description |
|---|---|---|
| type | ExportType |
Specifies the type of the exported file. |
| fileName | string |
Specifies the name of the file with which the rendered maps need to be exported. |
| orientation (optional) | PdfPageOrientation |
Specifies the orientation of the PDF document while exporting. |
| allowDownload (optional) | boolean |
Specifies whether to download as a file or get as base64 string for the file. |
Returns Promise
This method is used to get the Bing maps URL.
| Parameter | Type | Description |
|---|---|---|
| url | string |
Specifies the URL of the Bing maps along with the API key. |
Returns Promise
This method is used to get the geographical coordinates for location points in pixels when shape maps are rendered in the maps.
| Parameter | Type | Description |
|---|---|---|
| layerIndex | number |
Specifies the index number of the layer of the maps. |
| x | number |
Specifies the x value in pixel. |
| y | number |
Specifies the y value in pixel. |
Returns GeoPosition
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
This method is used to get the geographical coordinates for location points in pixels when an online map provider is rendered in the maps.
| Parameter | Type | Description |
|---|---|---|
| x | number |
Specifies the x value in pixel. |
| y | number |
Specifies the y value in pixel. |
Returns GeoPosition
Handling unload event to persist data when enable persistence true
Returns void
This method is used to perform panning by specifying the direction.
| Parameter | Type | Description |
|---|---|---|
| direction | PanDirection |
Specifies the direction in which the panning must be performed. |
| mouseLocation (optional) | PointerEvent | TouchEvent |
Specifies the location of the mouse pointer in maps in pixels. |
Returns void
This method is used to convert the point in pixels to latitude and longitude in maps.
| Parameter | Type | Description |
|---|---|---|
| pageX | number |
Specifies the x position value in pixels. |
| pageY | number |
Specifies the y position value in pixels. |
Returns Object
This method handles the printing functionality for the maps.
| Parameter | Type | Description |
|---|---|---|
| id (optional) | string[] | string | Element |
Specifies the element to be printed. |
Returns void
Applies all the pending property changes and render the component again.
Returns void
Removes the handler from the given event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | string |
A String that specifies the name of the event to remove |
| handler | Function |
Specifies the function to remove |
Returns void
This method is used to remove a layer from the maps.
| Parameter | Type | Description |
|---|---|---|
| index | number |
Specifies the index number of the layer to be removed. |
Returns void
This method is used to select the geometric shape element in the maps.
| Parameter | Type | Description |
|---|---|---|
| layerIndex | number |
Specifies the index of the layer in maps. |
| propertyName | string | string[] |
Specifies the property name from the data source. |
| name | string |
Specifies the name of the shape, which is mapped from the data source, that is selected. |
| enable (optional) | boolean |
Specifies whether the shape should be selected or the selection should be removed. |
Returns void
This method is used to zoom the map by specifying the center position.
| Parameter | Type | Description |
|---|---|---|
| centerPosition | Object |
Specifies the location of the maps to be zoomed as geographical coordinates. |
| zoomFactor | number |
Specifies the zoom factor for the maps. |
Returns void
This method is used to zoom the maps based on the provided coordinates.
| Parameter | Type | Description |
|---|---|---|
| minLatitude | number |
Specifies the minimum latitude of the location to be zoomed. |
| minLongitude | number |
Specifies the minimum latitude of the location to be zoomed. |
| maxLatitude | number |
Specifies the maximum latitude of the location to be zoomed. |
| maxLongitude | number |
Specifies the maximum longitude of the location to be zoomed. |
Returns void
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|---|---|---|
| moduleList | Function[] |
? |
Returns void
EmitType<IAnimationCompleteEventArgs>
Triggers after the animation is completed in the maps.
EmitType<IAnnotationRenderingEventArgs>
Triggers before rendering an annotation in the maps.
Triggers before the print gets started.
EmitType<IBubbleClickEventArgs>
Triggers when performing the click operation on the bubble element in maps.
EmitType<IBubbleMoveEventArgs>
Triggers when hovering the mouse on the bubble element in maps.
EmitType<IBubbleRenderingEventArgs>
Triggers before the bubble element gets rendered on the map.
Triggers when a user clicks on an element in Maps.
EmitType<ILabelRenderingEventArgs>
Triggers before the data-label gets rendered.
Triggers when performing the double click operation on an element in maps.
Trigger before the shape, bubble or marker gets highlighted.
Triggers before the shape, bubble or marker gets selected.
EmitType<ILayerRenderingEventArgs>
Triggers before the maps layer gets rendered.
EmitType<ILegendRenderingEventArgs>
Triggers before the legend gets rendered.
Triggers before the maps gets rendered.
Triggers after the maps gets rendered.
EmitType<IMarkerClickEventArgs>
Triggers when clicking on a marker element.
EmitType<IMarkerClusterClickEventArgs>
Triggers when clicking the marker cluster in maps.
EmitType<IMarkerClusterMoveEventArgs>
Triggers when moving the mouse over the marker cluster element in maps.
EmitType<IMarkerClusterRenderingEventArgs>
Triggers before the maps marker cluster gets rendered.
EmitType<IMarkerDragEventArgs>
When the marker has stopped dragging on the map, this event is triggered.
EmitType<IMarkerDragEventArgs>
When the marker begins to drag on the map, this event is triggered.
EmitType<IMarkerMoveEventArgs>
Triggers when moving the mouse over the marker element in maps.
EmitType<IMarkerRenderingEventArgs>
Triggers before the maps marker gets rendered.
Triggers when a user clicks on an element in Maps.
Triggers before performing the panning operation.
This event is triggered after performing the panning action.
Triggers to notify the resize of the maps when the window is resized.
Triggers when performing the right click operation on an element in maps.
EmitType<IShapeSelectedEventArgs>
Triggers before the shape gets highlighted.
EmitType<IShapeRenderingEventArgs>
Triggers before the maps shape gets rendered.
EmitType<IShapeSelectedEventArgs>
Triggers when a shape is selected in the maps.
EmitType<ITooltipRenderEventArgs>
Triggers before the maps tooltip gets rendered.
EmitType<ITooltipRenderCompleteEventArgs>
Triggers after the maps tooltip gets rendered.
Triggers before the zoom operations such as zoom in and zoom out in the maps.
This event is triggered after the zooming operation is completed.