• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Map / API / MapProps / 

MapProps

Represents the props of the KendoReact Map component.

NameTypeDefaultDescription

center?

number[] | Location | [number, number]

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

className?

string

Sets additional CSS classes to the component.

controls?

MapControls

The configuration of built-in map controls.

dir?

string

Represents the dir HTML attribute.

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).

onBeforeReset?

(event: BeforeResetEvent) => void

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

onMapClick?

(event: MapClickEvent) => void

Fired when the user clicks on the map.

onMarkerActivate?

(event: MarkerActivateEvent) => void

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

onMarkerClick?

(event: MarkerClickEvent) => void

Fired when a marker has been clicked or tapped.

onMarkerCreated?

(event: MarkerCreatedEvent) => void

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

Cancelling the event will prevent the marker from being shown.

onPan?

(event: PanEvent) => void

Fired while the map viewport is being moved.

onPanEnd?

(event: PanEndEvent) => void

Fires after the map viewport has been moved.

onRefresh?

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

Fires when the Map is about to refresh. The event can be used to prevent the refresh of the Map in specific cases.

onReset?

(event: ResetEvent) => void

Fired when the map is reset.

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

onShapeClick?

(event: ShapeClickEvent) => void

Fired when a shape is clicked or tapped.

onShapeCreated?

(event: ShapeCreatedEvent) => void

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

onShapeFeatureCreated?

(event: ShapeFeatureCreatedEvent) => void

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

onShapeMouseEnter?

(event: ShapeMouseEnterEvent) => void

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.

onShapeMouseLeave?

(event: ShapeMouseLeaveEvent) => void

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.

onZoomEnd?

(event: ZoomEndEvent) => void

Fired when the map zoom level has changed.

onZoomStart?

(event: ZoomStartEvent) => void

Fired when the map zoom level is about to change.

Cancelling the event will prevent the user action.

pannable?

boolean

true

Controls whether the user can pan the map.

style?

React.CSSProperties

The styles that are applied to the component.

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.

In this article

Not finding the help you need?

Contact Support