KendoReact

React Map

  • Easily add interactive maps to your React app: Integrate a wide range of tile map providers and add customizations as your project requires.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

Overview

The KendoReact Map component will help you integrate and visualize a map service (like Open Street Map) into your React app. It comes with support for overlays and other shapes.

  • Tile based maps, integrating with open map providers
  • Map markers
  • GeoJSON
  • Touch-based control for mobile devices
  • Events and API

See the React Map demo.

React Map - Overview, KendoReact UI Library

Tile-Based Maps and Integration with Open Map Providers

Get your React Map up and running in no time by integrating one of the many open map data services with the GeoViz Map. The component provides flexible configuration options, allowing you to easily load maps from various tile-based map providers, such as Openstreetmap.org, ArcGIS and many more.

See the React Map Tile Layer demo.

React-map-tile-based-maps-and-integration-with-open-map-providers

Bubble Layer

For built-in data visualization, the React Map includes a bubble tile layer. When bound to data, values will be represented by bubbles of different sizes and colors.

See the React Map Bubble Layer demo.

React-map-bubble-layer

GeoJSON Binding

The GeoJSON standard enables you to draw your unique shapes and add custom data to your React maps. You can display anything from country and state outlines to off-the-wall ideas. The high-level customization options allow you to implement complex scenarios and meet any project requirement.

See the React Map GeoJSON binding demo.

React-map-binding-to-geojson

Map Markers

Bind the React Map to data to add points of interests, defined by their geographical position on the map.

See the React Map Markers demo.

React-map-markers-with-tooltips

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.