background

KendoReact

React Map

  • Easily add interactive maps to your React app.
  • Part of the KendoReact library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Map Header
  • Visualize Data on a Live Map

    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
  • Pin Icons SVG Rendering

    The KendoReact Map component enables you to easily incorporate custom SVG icons to pinpoint specific locations on your map for a more personalized mapping experience.

  • 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

All KendoReact Components

Next Steps