React - Geospatial GIS application - Mapping, drawing and editing GeoJson features on a Map

Overview

• Client: Telecommunications company
• Team: Work in a team of 3 Senior Frontend React engineers
• Functional requirements: Build a greefield system in which users can draw, edit, save, load previously drawn GeoSpatial data on a map. It would be used by the Telecommunication company’s network infrastruture rollout team. They will use it to plan and manage their new rollouts and updates of network infrastructure to their clients.
• Technical requirements: Build a greenfield GIS system using OpenLayers and React.

My Involvement: Senior Frontend React Engineer

I was one of the 3 Senior Frontend React engineers to build this greenfield GIS system.

We were able to achieve MVP build successfully at 4 months. A second Iteration (version 2) was delivered after 7 months from the beginning of the project.

The application was delivered complete with E2E (End to End) Tests also written by the 3 Frontend Engineers.

Overall, I was proud to be part of this project to deliver a complex system in a short space of time. It achived its goals, the layout out a clean and powerful, the tech stack was modern, code was written clean and was covered by E2E tests for QA coverage.

Key challenges:

One of the key challenges in this project was the usage of React in combination with OpenLayers. React components uses a delcarative programming style whilst the underlying OpenLayers sdk uses an imperative programming style. So the challenge was how to incorporate OpenLayers into React components.

We were able to build our foundation by leveraged off this https://github.com/richardhills/ol-react library. Whilst it had some basic structure required, it did not cover all the scope of OpenLayers with its React Components and its features were limited for our needs. During the project, the library provided a base and then it was extended, customized and patched it was required.

Note: This library is no longer being actively maintained. For any new projects embarking on a similar journey, there are likely a few more uptodate libraries doing similar to allow open layers to be used in React in an imperative way.

Skills and Technologies used

• React.js

  • Modular architecture, functional programming
  • Redux, Redux ducks
  • Sagas
  • State management

• OpenLayers (using React.js)

  • ol/Mapol/Feature
  • ol/layer/Layer
  • ol/layer/Group
  • ol/Collection
  • ol/geom/Point
  • ol/geom/Polygon
  • ol/interaction/Draw
  • ol/interaction/Modify
  • ol/interaction/Select
  • ol/interaction/Snap
  • GeoJSON, coordinate systems
  • GoogleMapTiles
  • ol/control/Zoom

My opinion of OpenLayers

It is a powerful mapping library.

I believe it has evolved greatly since 2017 when this project took place.

It is open source and has a good developer community behind it. However it also seems, it is maintained to a great degree by one developer (which is amazing!) and if you find a bug, it may take a while to get a response to it. You might have to dig into the original source code and find a hack or create a pull request yourself!

One let down is that the Tiles for it are not as great looking as Google Maps tiles. Especially when most people are used to seeing Google Maps tiles.

Fun fact

Back in 2017, Angular js vs React js was a neck to neck competition to decide which was going to be the dominant / popular SPA framework for the future!

Lucky I ended up going the React direction! ;)