In the previous article, we obtained the GeoJSON of the world map polygon data.
This will be used to display it on the Mapbox map.
The description also assumes that Nextjs has already been set up.
The version of Nextjs in this article is ‘13.5.4″.
Create Layer.
Mapbox visualises GeoJSON data loaded using Layers.
Here, polygons and lines are defined separately.
When the property ‘WOE_ID’ of GeoJSON matches a specific value, the colour is set to red. Otherwise, #abdda4 is used.
WOE_ID’ is a 32-bit identifier allocated by Yahoo that identifies every place on earth.
Here, Japan is set to red.
export const polygonLayer: FillLayer = {
id: "polygon",
type: "fill",
paint: {
"fill-color": [
"match",
["get", "WOE_ID"],
23424856,
"red", // Red when WOE_ID is 23424856
"#abdda4", // Otherwise, default color
],
"fill-opacity": 0.7,
},
};The colour of the line is also defined.
The line width is set to 2 px in black.
export const lineLayer: LineLayer = {
id: "outline",
type: "line",
paint: {
"line-color": "#3b3b3b",
"line-width": 2,
},
};In summary, it looks like this.
import type { FillLayer, LineLayer } from "react-map-gl";
export const polygonLayer: FillLayer = {
id: "polygon",
type: "fill",
paint: {
"fill-color": [
"match",
["get", "WOE_ID"],
23424856,
"red",
"#abdda4",
],
"fill-opacity": 0.7,
},
};
export const lineLayer: LineLayer = {
id: "outline",
type: "line",
paint: {
"line-color": "#3b3b3b",
"line-width": 2,
},
};Load GeoJSON.
This time, GeoJson data is placed in the project.
Refer to it and load it with a FeatureCollection type.
It is typed with as, but it would be better to type it separately, e.g. via API.
In react-map-gl, you can deploy it on the map by passing it to the data property of the Source component.
import * as React from "react";
import { useRef } from "react";
import Map, { NavigationControl, Source } from "react-map-gl";
import type { FeatureCollection } from "geojson";
/**
* Original data for GeoJson
* https://www.naturalearthdata.com/
*/
import CountriesData from "@/data/ne_50m_admin_0_countries.json";
export default React.memo(function MapboxComponent() {
const CountryFeatureCollection = useRef<FeatureCollection>(CountriesData as FeatureCollection);
return (
<Map
id="map"
mapboxAccessToken={process.env.NEXT_PUBLIC_MAP_BOX_TOKEN}
initialViewState={{
zoom: 1,
}}
reuseMaps
mapStyle="mapbox://styles/mapbox/streets-v11"
>
<NavigationControl />
<Source type="geojson" data={CountryFeatureCollection.current}></Source>
</Map>
);
});
Load the Layer and display it on the Map.
Pass the created Layer component to the Source component.
In this case, coloured polygon data and line data will be used.
By defining it here, you can use the Layer to display the data based on the data passed to the Source’s data property.
<Source type="geojson" data={CountryFeatureCollection.current}>
<Layer {...polygonLayer} />
<Layer {...lineLayer} />
</Source>The whole code looks like this.
import * as React from "react";
import { useRef } from "react";
import Map, { Layer, NavigationControl, Source } from "react-map-gl";
import type { FeatureCollection } from "geojson";
/**
* Original data for GeoJson
* https://www.naturalearthdata.com/
*/
import CountriesData from "@/data/ne_50m_admin_0_countries.json";
import { lineLayer, polygonLayer } from "./mapStyle";
export default React.memo(function MapboxComponent() {
const CountryFeatureCollection = useRef<FeatureCollection>(CountriesData as FeatureCollection);
return (
<Map
id="map"
mapboxAccessToken={process.env.NEXT_PUBLIC_MAP_BOX_TOKEN}
initialViewState={{
zoom: 1,
}}
reuseMaps
mapStyle="mapbox://styles/mapbox/streets-v11"
>
<NavigationControl />
<Source type="geojson" data={CountryFeatureCollection.current}>
<Layer {...polygonLayer} />
<Layer {...lineLayer} />
</Source>
</Map>
);
});
Call the created component on the page you want to display.
You have successfully displayed the GeoJson data in Mapbox.
Summary
I think the strength of Mapbox is that it can be easily displayed. But I think Expressions of Layers in the official documentation is difficult to understand.
