How to Add a React Map Component to Your Web Application

MESCIUS' Wijmo FlexMap is a feature-rich library that empowers web developers to create stunning and interactive maps effortlessly. In this blog, we'll delve into the capabilities of Wijmo FlexMap, specifically focusing on the capabilities of the ScatterMapLayer component. Our goal is to create an engaging world map visualizing airport locations, showcasing how FlexMap transforms geographical data into compelling visuals within a React application.

FlexMap stands out for its simplicity and flexibility in map creation, making it an ideal choice for developers seeking a seamless integration of maps into their applications. Let's explore why FlexMap is a game-changer.

Ready to Get Started? Download Wijmo Today!

Intuitive API Design

FlexMap boasts an intuitive API design that streamlines the map-building process. Developers can effortlessly configure layers, customize styles, and handle data binding with ease.

GeoMapLayer for Geographical Context

The GeoMapLayer in FlexMap provides a solid foundation for geographical context. By incorporating this layer, we establish the canvas for our world map, ensuring accuracy and precision in the representation of countries.

Before you can add this layer, you need geoJSON data. There are many ways you can get this data; for example, you can check out Natural Earth and download one of their files. Once you have your data, save it as a .json file in your application.

Your geoJSON data should look like this:

{
  "type": "FeatureCollection",
  "name": "ne_110m_admin_0_countries",
  "crs": {
    "type": "name",
    "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "featurecla": "Admin-0 country",
...

ScatterMapLayer for Visualizing the Data

The scatterMapLayer feature allows us to breathe life into our maps by visualizing data points dynamically. In our case, we'll utilize ScatterMapLayer to showcase airport locations across the globe.

Building a React World Map with ScatterMapLayer

Now, let's dive into the process of building a React application with FlexMap, emphasizing the use of scatterMapLayer and airport location data. If you would like to reference the blog code, it can be found here.

Setting Up the Project

Begin by setting up a new React project using Create React App:

npx create-react-app flexmap-demo

Once set up, install Wijmo FlexMap:

npm install @grapecity/wijmo.react.all

Creating the FlexMap. In your src folder, create a WorldMap.js component. Insert this code:

import React from "react";
import {
  FlexMap,
  GeoMapLayer,
  ScatterMapLayer,
} from "@grapecity/wijmo.react.chart.map";

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
    </FlexMap>
  );
};

export default WorldMap;

Adding the geoJSON and GeoMapLayer. The itemsSource property will bind your geoJSON data to the geoMapLayer (Please see reference code to get the JSON data):

import earth from "./data/natural-earth-vector.json";

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
      <GeoMapLayer itemsSource={earth} />
    </FlexMap>
  );
};

Adding the scatterMapLayer:

const WorldMap = ({ data }) => {
  return (
    <FlexMap itemsSource={[]}>
      <GeoMapLayer itemsSource={earth} />
      <ScatterMapLayer itemsSource={data} binding="coordinates" />
    </FlexMap>
  );
};

Integrate the WorldMap component and airports data (see reference code for JSON) into your main application in src/App.js:

import React from "react";
import WorldMap from "./WorldMap";
import airports from "./data/airports.json";
import "@grapecity/wijmo.styles/wijmo.css";

function App() {

  return (
    <div className="App">
      <h1>FlexMap Demo</h1>
      <WorldMap data={airports} />
    </div>
  );
}

export default App;

Run your React app:

npm start

When  you visit http://localhost:3000, you should be able to see a captivating airport map brought to life like this: 

Elevate Your Mapping Experience

In conclusion, Wijmo FlexMap's versatility and the ScatterMapLayer's dynamic capabilities elevate and simplify the mapping experience for developers. Whether visualizing airport locations or other geographical data, FlexMap proves to be an indispensable tool for creating engaging and informative maps within an application. Harness the power of FlexMap to transform your data into compelling visuals effortlessly.

Hope you found this blog helpful. Happy coding!

Ready to Get Started? Download Wijmo Today!