• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGrid
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetnew
    • ToolBar
    • Tooltips
    • TreeListupdated
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Map / API / MapComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

MapComponent

A sample component

Selector

kendo-map

Export Name

Accessible in templates as #kendoMapInstance="kendoChart"

Inputs

NameTypeDefaultDescription

center

number[]

The map center. Coordinates are listed as [Latitude, Longitude].

controls

MapControls

The configuration of built-in map controls.

maxZoom

number

19

The maximum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).

minSize?

number

256

The size of the map in pixels at zoom level 0.

minZoom

number

1

The minimum zoom level. Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).

pannable

boolean

true

Controls whether the user can pan the map.

popupSettings

PopupSettings

The settings for the tooltip popup.

resizeRateLimit

number

Limits the automatic resizing of the Map. Sets the maximum number of times per second that the component redraws its content when the size of its container changes. Defaults to 10. To disable the automatic resizing, set it to 0.

@Component({
    selector: 'my-app',
    template: `
        <kendo-map [resizeRateLimit]="2">
<!--                 ^^^^^^^^^^^^^^^^^^^^^^
      Will update the size of the Map up to two times a second.
      Resize the example pane or window to try it out.
-->
      </kendo-map>
  `
})
export class AppComponent {
}

wraparound

boolean

true

Specifies whether the map should wrap around the east-west edges.

zoom

number

3

The initial zoom level.

Typical web maps use zoom levels from 0 (whole world) to 19 (sub-meter features).

The map size is derived from the zoom level and minScale options: size = (2 ^ zoom) * minSize

Map zoom rounds floating point numbers. This is done so as the majority of web maps use the whole zoom levels 0 through to 19.

zoomable

boolean

true

Controls whether the map zoom level can be changed by the user.

Fields

NameTypeDefaultDescription

extent

Extent

Sets the extent (visible area) of the map.

layers

MapLayer[]

The marker layers instances.

Events

NameTypeDescription

beforeReset

EventEmitter<BeforeResetEvent>

Fired immediately before the map is reset. This event is typically used for cleanup by layer implementers.

centerChange

EventEmitter<number[]>

Fired when the map center has been changed.

mapClick

EventEmitter<MapClickEvent>

Fired when the user clicks on the map.

markerActivate

EventEmitter<MarkerActivateEvent>

Fired when a marker has been displayed and has a DOM element assigned.

markerClick

EventEmitter<MarkerClickEvent>

Fired when a marker has been clicked or tapped.

markerCreated

EventEmitter<MarkerCreatedEvent>

Fired when a marker has been created and is about to be displayed.

Cancelling the event will prevent the marker from being shown.

pan

EventEmitter<PanEvent>

Fired while the map viewport is being moved.

panEnd

EventEmitter<PanEndEvent>

Fires after the map viewport has been moved.

reset

EventEmitter<ResetEvent>

Fired when the map is reset.

This typically occurs on initial load and after a zoom/center change.

shapeClick

EventEmitter<ShapeClickEvent>

Fired when a shape is clicked or tapped.

shapeCreated

EventEmitter<ShapeCreatedEvent>

Fired when a shape is created, but is not rendered yet.

shapeFeatureCreated

EventEmitter<ShapeFeatureCreatedEvent>

Fired when a GeoJSON Feature is created on a shape layer.

shapeMouseEnter

EventEmitter<ShapeMouseEnterEvent>

Fired when the mouse enters a shape.

This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.

shapeMouseLeave

EventEmitter<ShapeMouseLeaveEvent>

Fired when the mouse leaves a shape.

This event will fire reliably only for shapes that have set fill color. The opacity can still be set to 0 so the shapes appear to have no fill.

zoomChange

EventEmitter<number>

Fired when the map zoom level has been changed.

zoomEnd

EventEmitter<ZoomEndEvent>

Fired when the map zoom level has changed.

zoomStart

EventEmitter<ZoomStartEvent>

Fired when the map zoom level is about to change.

Cancelling the event will prevent the user action.

Methods

eventOffset

Returns the event coordinates relative to the map element. Offset coordinates are not synchronized to a particular location on the map.

Parameters

e

any

The mouse event.

Returns

Point

The event coordinates relative to the map element.

eventToLayer

Retrieves projected (layer) coordinates that correspond to this mouse event. Layer coordinates are absolute and change only when the zoom level is changed.

Parameters

e

any

The mouse event.

Returns

Point

The projected (layer) coordinates that correspond to this event.

eventToLocation

Retrieves the geographic location that correspond to this mouse event.

Parameters

e

any

The mouse event.

Returns

Point

The geographic location that correspond to this mouse event.

eventToView

Retrieves relative (view) coordinates that correspond to this mouse event. Layer elements positioned on these coordinates will appear under the mouse cursor. View coordinates are no longer valid after a map reset.

Parameters

e

any

The mouse event.

Returns

Point

The relative (view) coordinates that correspond to this mouse event.

layerToLocation

Transforms layer (projected) coordinates to geographical location.

Parameters

point

number[] | Point

The layer (projected) coordinates. An array argument is assumed to be in x, y order.

zoom?

number

Optional. Assumed zoom level. Defaults to the current zoom level.

Returns

Location

The geographic location that corresponds to the layer coordinates.

locationToLayer

Returns the layer (projected) coordinates that correspond to a geographical location.

Parameters

location

Location | number[]

The geographic location. An array argument is assumed to be in [Latitude, Longitude] order.

zoom?

number

Optional. Assumed zoom level. Defaults to the current zoom level.

Returns

Point

The layer (projected) coordinates.

locationToView

Returns the view (relative) coordinates that correspond to a geographical location.

Parameters

location

Location | number[]

The geographic location. An array argument is assumed to be in [Latitude, Longitude] order.

Returns

Point

The view coordinates that correspond to a geographical location.

resize

Detects the size of the container and redraws the Map. Resizing is automatic unless you set the resizeRateLimit option to 0.

viewSize

Retrieves the size of the visible portion of the map.

Returns

{ height: number; width: number; }

The size (width and height) of the visible portion of the map.

viewToLocation

Returns the geographical location that correspond to the view (relative) coordinates.

Parameters

point

number[] | Point

The view coordinates. An array argument is assumed to be in x, y order.

zoom?

number

Optional. Assumed zoom level. Defaults to the current zoom level.

Returns

Location

The geographic location that corresponds to the view coordinates.

In this article

Not finding the help you need?

Contact Support