Maps

23 Sep 202517 minutes to read

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>

Properties

allowImageExport boolean

Enables or disables the export to image functionality in maps.

Defaults to false

allowPdfExport boolean

Enables or disables the export to PDF functionality in maps.

Defaults to false

allowPrint boolean

Enables or disables the print functionality in maps.

Defaults to false

annotations AnnotationModel[]

Gets or sets the options for customizing the annotations in the maps.

background string

Gets or sets the background color of the maps container.

Defaults to null

baseLayerIndex 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

border BorderModel

Gets or sets the options for customizing the style properties of the maps border.

centerPosition CenterPositionModel

Gets or sets the center position of the maps.

description string

Gets or sets the description of the maps for assistive technology.

Defaults to null

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

format string

Gets or sets the format to apply internationalization for the text in the maps.

Defaults to null

height string

Gets or sets the height in which the maps is to be rendered.

Defaults to null

layers LayerSettingsModel[]

Gets or sets the options to customize the layers of the maps.

legendSettings LegendSettingsModel

Gets or sets the options to customize the legend of the maps.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

mapsArea MapsAreaSettingsModel

Gets or sets the options to customize the area around the map.

margin MarginModel

Gets or sets the options to customize the margin of the maps.

projectionType ProjectionType

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

tabIndex number

Gets or sets the tab index value for the maps.

Defaults to 0

theme MapsTheme

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

titleSettings TitleSettingsModel

Gets or sets the options to customize the title of the maps.

tooltipDisplayMode TooltipGesture

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’

useGroupingSeparator boolean

Enables or disables the visibility state of the separator for grouping.

Defaults to false

width string

Gets or sets the width in which the maps is to be rendered.

Defaults to null

zoomSettings ZoomSettingsModel

Gets or sets the options to customize the zooming operations in maps.

isShapeSelected boolean

Specifies whether the shape is selected in the maps or not.

Methods

addEventListener

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

addLayer

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

addMarker

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 (optional) number Specifies the index number of the layer.
markerCollection (optional) MarkerSettingsModel[] Specifies the settings of the marker to be added.

Returns void

appendTo

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

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

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

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

export

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

getBingUrlTemplate

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

getGeoLocation

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

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

getTileGeoLocation

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

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

panByDirection

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

pointToLatLong

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

print

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

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

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

removeLayer

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

shapeSelection

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

zoomByPosition

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

zoomToCoordinates

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

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

animationComplete EmitType<IAnimationCompleteEventArgs>

Triggers after the animation is completed in the maps.

annotationRendering EmitType<IAnnotationRenderingEventArgs>

Triggers before rendering an annotation in the maps.

beforePrint EmitType<IPrintEventArgs>

Triggers before the print gets started.

bubbleClick EmitType<IBubbleClickEventArgs>

Triggers when performing the click operation on the bubble element in maps.

bubbleMouseMove EmitType<IBubbleMoveEventArgs>

Triggers when hovering the mouse on the bubble element in maps.

bubbleRendering EmitType<IBubbleRenderingEventArgs>

Triggers before the bubble element gets rendered on the map.

click EmitType<IMouseEventArgs>

Triggers when a user clicks on an element in Maps.

dataLabelRendering EmitType<ILabelRenderingEventArgs>

Triggers before the data-label gets rendered.

doubleClick EmitType<IMouseEventArgs>

Triggers when performing the double click operation on an element in maps.

itemHighlight EmitType<ISelectionEventArgs>

Trigger before the shape, bubble or marker gets highlighted.

itemSelection EmitType<ISelectionEventArgs>

Triggers before the shape, bubble or marker gets selected.

layerRendering EmitType<ILayerRenderingEventArgs>

Triggers before the maps layer gets rendered.

legendRendering EmitType<ILegendRenderingEventArgs>

Triggers before the legend gets rendered.

load EmitType<ILoadEventArgs>

Triggers before the maps gets rendered.

loaded EmitType<ILoadedEventArgs>

Triggers after the maps gets rendered.

markerClick EmitType<IMarkerClickEventArgs>

Triggers when clicking on a marker element.

markerClusterClick EmitType<IMarkerClusterClickEventArgs>

Triggers when clicking the marker cluster in maps.

markerClusterMouseMove EmitType<IMarkerClusterMoveEventArgs>

Triggers when moving the mouse over the marker cluster element in maps.

markerClusterRendering EmitType<IMarkerClusterRenderingEventArgs>

Triggers before the maps marker cluster gets rendered.

markerDragEnd EmitType<IMarkerDragEventArgs>

When the marker has stopped dragging on the map, this event is triggered.

markerDragStart EmitType<IMarkerDragEventArgs>

When the marker begins to drag on the map, this event is triggered.

markerMouseMove EmitType<IMarkerMoveEventArgs>

Triggers when moving the mouse over the marker element in maps.

markerRendering EmitType<IMarkerRenderingEventArgs>

Triggers before the maps marker gets rendered.

mouseMove EmitType<IMouseMoveEventArgs>

This event is triggered when the mouse pointer moves over the map.

onclick EmitType<IMouseEventArgs>

Triggers when a user clicks on an element in Maps.

pan EmitType<IMapPanEventArgs>

Triggers before performing the panning operation.

panComplete EmitType<IMapPanEventArgs>

This event is triggered after performing the panning action.

resize EmitType<IResizeEventArgs>

Triggers to notify the resize of the maps when the window is resized.

rightClick EmitType<IMouseEventArgs>

Triggers when performing the right click operation on an element in maps.

shapeHighlight EmitType<IShapeSelectedEventArgs>

Triggers before the shape gets highlighted.

shapeRendering EmitType<IShapeRenderingEventArgs>

Triggers before the maps shape gets rendered.

shapeSelected EmitType<IShapeSelectedEventArgs>

Triggers when a shape is selected in the maps.

tooltipRender EmitType<ITooltipRenderEventArgs>

Triggers before the maps tooltip gets rendered.

tooltipRenderComplete EmitType<ITooltipRenderCompleteEventArgs>

Triggers after the maps tooltip gets rendered.

zoom EmitType<IMapZoomEventArgs>

Triggers before the zoom operations such as zoom in and zoom out in the maps.

zoomComplete EmitType<IMapPanEventArgs>

This event is triggered after the zooming operation is completed.