• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Shape Layer

The Map Shape layer displays vector maps encoded in the industry-standard GeoJSON format.

Binding to GeoJSON Data

The following example demonstrates how to bind a Shape layer to GeoJSON data:

Example
View Source
Change Theme:

Customizing Shapes

The layer is rendered using the Drawing API and can be customized.

The following example demonstrates how the set the shape color in the ShapeCreatedEvent

Example
View Source
Change Theme:

Tooltips

The Map has a built-in tooltip for shapes. To display the tooltip, define a shape tooltip renderer.

The available fields in the shape tooltip renderer context are:

  • dataItem—The original data item used to create the shape.
  • layerIndex—The index of the bubble layer in the Map.
  • location—The location of the center of the shape.

The shape tooltip is demonstrated in the example below:

Example
View Source
Change Theme:

In this article

Not finding the help you need?