Search results

Maps

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 number Specifies the index number of the layer.
markerCollection 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.

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.