How to Use OpenLayers Maps in React

Let us map it out…

Screenshot by the author

Recently I had the task of implementing OpenLayers into our React application at my work. I found an existing npm package that somewhat did how I wanted to use it for maps, but not 100%. Also, the package didn’t have a ton of downloads and didn’t see that the project was being actively supported.

So considering all those factors I decided to build my own OpenLayers map components so that I could have the flexibility I wanted right out of the gate. This is the classic build your own vs. use something that already exists problems that developers face daily.

While I tend to lean heavily towards “don’t reinvent the wheel” normally, there are situations where you know you are going to bump into the wall as far as flexibility goes if you try to shoehorn your use case into something already existing.

So all that being said I will walk you through the components I built to make this work exactly how I wanted it to work and also leaving plenty of flexibility to add on to it in the future.

I will make all the example code available on Github.

Time for the code…

OpenLayers provides an awesome and powerful API via its npm package. this works great, but I wanted to build React components around the…