A Guide to Working with Polygons in React Using Mapbox
Since my university days, I have been passionate about exploring and working with maps. It all started with my final year project, which involved developing a location-based social network. Recently, I landed a position at Zinkworks where I was presented with an intriguing opportunity to create and analyse polygons in real-time for network statistics using Mapbox in React. Although it was a thrilling and rewarding experience, it also posed some challenges. Specifically, I encountered a dearth of resources and information on the advanced features of working with Polygons in Mapbox with React. So, I decided to share my practical experience by creating an informative blog.
What are Polygons?
Polygons are a vital instrument in the field of mapping and geospatial analysis, as they aid in communicating information regarding the spatial relationships among diverse features within a specific area. A polygon is a two-dimensional shape consisting of multiple straight-line segments that form a closed loop. Polygons can represent various geographic features, such as land parcels, bodies of water, and administrative boundaries.
In addition to representing geographical features, polygons in maps can also be used for data visualisation and analysis. They are often used in geographic information systems (GIS) to display and analyse data that is spatially referenced. For example, Polygons have the potential to serve as a visual tool to depict the perimeters of various networks along with their respective coverage areas. Additionally, they can facilitate the analysis of network utilisation in real-time, providing insights into the performance of each network.
Polygon Utilisation in Zinkworks NDO
Zinkworks is a cutting-edge technology firm that is at the forefront of utilising innovative tools and techniques to streamline network monitoring. Zinkworks' product, Network Device Orchestrator (NDO), uses polygons to analyse network usage in real-time, enabling the orchestration of connected equipment, and predicting and avoiding demand spikes before they impact the network. Moreover, NDO predicts the future position of the connected equipment and its future capacity needs, and with polygons it presents that data in a user-friendly UI. By leveraging advanced features of polygons in Network Device Orchestrator (NDO), Zinkworks has been able to enhance its network utilisation analysis capabilities, empowering enterprise users to align their internal business rules to the available network capacity.
How to use Polygons using Mapbox in React?
Let's install the dependencies first:
`yarn add mapbox-gl react-map-gl @types/react-map-gl`
And add the following code:
import { GeoJSONSourceOptions } from 'mapbox-gl';
import { Layer, Map, Source } from 'react-map-gl';
const polygons: GeoJSONSourceOptions['data'] = {
type: 'FeatureCollection',
features: [
{
id: 1,
type: 'Feature',
properties: {
name: 'Area 51',
},
geometry: {
type: 'MultiPolygon',
coordinates: [
[
[
[-7.950966710379959, 53.43146017152239],
[-7.950966710379959, 53.42962140120139],
[-7.947024882898944, 53.42962140120139],
[-7.947024882898944, 53.43146017152239],
[-7.950966710379959, 53.43146017152239],
],
],
],
},
},
],
};
And add the Map component:
<Map
mapboxAccessToken={“MAPBOX_ACCESS_TOKEN_HERE”}
mapStyle='mapbox://styles/mapbox/satellite-streets-v9'
style={{
width: '100%',
height: '100%',
}}
initialViewState={{
longitude: -7.949333965946522,
latitude: 53.4313602035036,
zoom: 15
}}
>
<Source id='source' type='geojson' data={polygons}>
<Layer
{...{
id: 'data',
type: 'fill',
paint: {
'fill-color': 'rgb(5, 191, 5)',
'fill-opacity': 0.4
},
}}
/>
</Source>
</Map>
Let’s run the code and check if a polygon is displaying on the map like the one below:
Let's go through a few essential properties:
id: a unique id to identify each polygon, this can be used to target polygons like when hovering, etc.
properties: can be used to assign custom properties to polygons and subsequently access them at a later time, such as the polygon's name, value, and other relevant attributes.
geometry: used to define and establish the type of polygon and specify its coordinates.
The Layer component is a fundamental component for rendering diverse items, such as polygons and lines, with a range of unique properties, including fill-color and opacity. For example, you can use Layer to draw an outline for a polygon using the following code:
<Layer
{...{
id: 'outline',
type: 'line',
paint: {
'line-color': 'red',
'line-width': 2,
},
}}
/>
I hope this article was helpful, you can find the source code for different features in the following repo.
Repo URL: https://github.com/Ahmdrza/mapbox-polygons-react
To learn more about Zinkworks NDO solution, visit:
https://zinkworks.com/solutions/
Happy Coding!
Written By: Ahmad Raza
