Adding geoJSON to FlexMap GeoMapLayer

The FlexMap component serves as the fundamental building block for creating maps in applications. It provides a container for various map-related elements and functionalities. FlexMap acts as a host for different map layers, such as the GeoMapLayer, enabling you to overlay various data representations on the map.

Getting geoJSON

Before you can add geoJSON data to your map, you first need to have geoJSON data. Where you get it is up to you, but there are a lot of resources online. I found a Natural Earth compiled file hosted on GitHub. Once you have your data, save it as a .json file in your application.

Your geoJSON data it should look something 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",
...

Importing the geoJSON data into your app

You can import your geoJSON file using ESM import statements:

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

Specifying the data source for GeoMapLayer

There are two ways to specify the data to your GeoMapLayer: set the itemsSource propery to your geoJSON data or using the url property. If the data source is specified as a url, the map fetches the data and sets the itemsSource.

<div className="container-fluid">
      <FlexMap header="FlexMap Example">
        <GeoMapLayer itemsSource={earth} />
      </FlexMap>
</div>

That's all it takes to get your GeoMapLayer connected with geoJSON data. Additional information about maps can be found in the Wijmo documentation. Also, utilizing our app demos is a great way to get an understanding on how to create your own FlexMap.

Happy coding!