How to Integrate the React Maps Component into a React Application?

This article explains how to integrate the Syncfusion React Maps component into a React application. The Syncfusion React Maps component enables developers to visualize spatial data, display world or country maps, and plot locations using markers. It offers a wide range of features, including labels, bubbles, navigation lines, legends, tooltips, zooming, panning, drill-down capabilities, and more.

You can follow the step-by-step instructions below to get started with integrating Syncfusion Maps into your React project.

Step 1: To start developing a React application, you first need to create the app using the create-react-app package. To install it globally, run the following command:

npm install -g create-react-app

Step 2: Next, create a basic React application in your desired directory by running the following command:

npx create-react-app quickstart

If you prefer to use TypeScript, you can create the React application with TypeScript by running the below command

npx create-react-app quickstart --template typescript

Step 3: The React application is now created in the quickstart folder. You can navigate to that folder by running the following command:

cd quickstart

Step 4 : Now, install the Maps package within the “quickstart” folder by running the following command:

npm install @syncfusion/ej2-react-maps --save

Now you can add the Maps component to your application.

To initialize the Maps component, import the MapsComponent into src/App.js. If you are using TypeScript, you can import the MapsComponent into the src/App.tsx. You can choose the appropriate option based on your application. In the following code, the MapsComponent is included in the src/App.js file:

App.js

import { world_map } from './world_map.ts';
import './App.css';
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';

function App() {
  return (
    <div className="App">
      <MapsComponent id="maps">
            <LayersDirective>
                <LayerDirective shapeData={world_map}>
                </LayerDirective>
            </LayersDirective>
        </MapsComponent>
    </div>
  );
}

export default App;

The Maps component has now been added to the quickstart application. To view it, start the application by running the following command:

npm start

The application will now launch with the Maps component displayed.

View the sample in GitHub

Conclusion

We hope you enjoyed learning how to add the Maps component to your React application.
You can refer to our React Maps feature tour to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Maps example to understand how to create and visualize the data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!