# Shape Layer

## Overview

The Map Shape layer displays vector maps encoded in the industry-standard [GeoJSON](https://geojson.org/) format.

## Binding to GeoJSON Data

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/map/layers/shape/source.txt)

## Customizing Shapes

The layer is rendered using the [Drawing API](https://www.telerik.com/kendo-angular-ui-develop/components/drawing) and can be customized.

The following example demonstrates how the set the shape color in the [shapeCreatedEvent](https://www.telerik.com/kendo-angular-ui-develop/components/map/api/shapecreatedevent)

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/map/layers/shape-custom/source.txt)

## Tooltips

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

The available inputs for the shape tooltip template are:

* `dataItem`—The original data item used to create the shape.
* `location`—The location of the center of the shape.

The shape tooltip is demonstrated in the example below:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/map/layers/shape-tooltip/source.txt)

## Suggested Links

* [Map Layers Overview](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers)
* [Tile Layer](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers/tile)
* [Bubble Map Layer](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers/bubble)
* [Marker Layer](https://www.telerik.com/kendo-angular-ui-develop/components/map/layers/marker)
* [API Index of the Map](https://www.telerik.com/kendo-angular-ui-develop/components/map/api)