New to KendoReactStart a free 30-day trial

MapProps

Interface

Represents the props of the KendoReact Map component.

Definition

Package:@progress/kendo-react-map

Properties

center?

number[] | Location | [number, number]

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

Sets additional CSS classes to the component.

The configuration of built-in map controls.

dir?

string

Represents the dir HTML attribute.

maxZoom?

number

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

Default:

19

minSize?

number

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

Default:

256

minZoom?

number

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

Default:

1

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

Parameters:eventBeforeResetEvent

onMapClick?

(event: MapClickEvent) => void

Fires when the user clicks on the map.

Parameters:eventMapClickEvent

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

Parameters:eventMarkerActivateEvent

Fires when a marker has been clicked or tapped.

Parameters:eventMarkerClickEvent

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

Cancelling the event prevents the marker from being shown.

Parameters:eventMarkerCreatedEvent

onPan?

(event: PanEvent) => void

Fires while the map viewport is being moved.

Parameters:eventPanEvent

onPanEnd?

(event: PanEndEvent) => void

Fires after the map viewport has been moved.

Parameters:eventPanEndEvent

onRefresh?

(mapOptions: any, mapInstance: any) => void

Fires when the Map is about to refresh. You can use the event to prevent the refresh of the Map in specific cases.

Parameters:mapOptionsanymapInstanceany

onReset?

(event: ResetEvent) => void

Fires when the map is reset.

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

Parameters:eventResetEvent

Fires when a shape is clicked or tapped.

Parameters:eventShapeClickEvent

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

Parameters:eventShapeCreatedEvent

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

Parameters:eventShapeFeatureCreatedEvent

Fires when the mouse enters a shape.

This event fires 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.

Parameters:eventShapeMouseEnterEvent

Fires when the mouse leaves a shape.

This event fires 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.

Parameters:eventShapeMouseLeaveEvent

onZoomEnd?

(event: ZoomEndEvent) => void

Fires when the map zoom level has changed.

Parameters:eventZoomEndEvent

Fires when the map zoom level is about to change.

Cancelling the event prevents the user action.

Parameters:eventZoomStartEvent

pannable?

boolean

Controls whether the user can pan the map.

Default:

true

style?

CSSProperties

The styles that are applied to the component.

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.

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

Default:

true

zoom?

number

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.

Default:

3

zoomable?

boolean

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

Default:

true