React, Google Maps and Polygons

5 min readJul 7, 2021

Context

A while back ago, I was building a real estate application and I wanted to highlight some suburbs on the map, as well as showing some statistics about that suburb as tooltips. It led to creating the GoogleMap React component I am writing about today.

By the way, this topic belongs to the series to set up a Single Page Application using React, Redux and Asp.NET 5.0.

End Result

Below is what you should expect to have after following this guide. I will be providing a bunch of coordinates (a closed polygon), a centre and a label for each polygon, and the output will be like below. I will also create a reusable React component that I can re-use anywhere in my application.

Libraries

I am using React Google Maps, which is a popular library to render Google Maps in your React application.

Implementation

1. Interface (Component Signature)

Talking about a re-usable React component, I’d like to show you how it looks like from outside (i.e. how the rest of your application will consume this component).

As you can see, I have tried to remain as flexible as possible, and providing the majority of attributes you need to customise your map. It is obvious what each attribute is about, and that’s why I am focusing this post mainly on the polygons.

2. Map Component with Polygons

Here is the complete code behind the above GoogleMapComponent. It will render the below elements:

A Single Red Marker with Label if we just wanted to show a single marker
A series of Polygons, filled with specific colors and border colors along with a marker and tooltip. This can also be customised, so you show each polygon with a different color.

Also please note that I am passing an onClick delegate, meaning you can receive a call back whenever someone clicks on your polygons.

Note
Configuration, plumbing and troubleshooting your software foundation take a considerable amount of time in your product development. Consider using Pellerex which is a complete foundation for your enterprise software products, providing source-included Identity and Payment functions across UI (React), API (.NET), Pipeline (Azure DevOps) and Infrastructure (Kubernetes).

3. Coordinates

Perhaps this is the main part that I spent some time figuring out first time I was building my map with polygons.

At a high level, this is what I provide to my map component. It has a series of coordinate collections, which you see they are collapsed right now, because there are many of them.

Before I get into each polygon, you might notice that I have a Centre element at the end. The reason is, when I render 30 Polygons and load the page, I’d like the map to be positioned in a way that the user is able to see the Polygons with minimum scrolling. That’s why I have calculated the centre of all Polygons collectively, and that is the value you see there.

Now focusing the coordinates for each Polygon, here is the format you need to provide the Xs and Ys. Looking at the below data structure, here are the points I’d like to cover:

Each Polygon, comes with some meta data, such as locality, suburbId, suburb centre, and of course polygon data.
Coordinates come in the lat, lng format, which I can collect from public data stores such as data.gov.au.
Each polygon comes with a centre (suburbCentre in the json), that I have calculated as the centre of the polygon to show the red marker. Please note this is for each polygon, and is different from the centre of “all polygons” we talked earlier.

Polygons Need to Close

Obviously I have removed a lot of coordinates from the above payload for brevity, however if you need a smoothly shaped polygon, you need to provide hundreds of coordinates. Also make sure polygons close, meaning each polygon needs to start and end with the same coordinate (lat, lng).

Pellerex Foundation: For Your Next Enterprise Software

How are you building your current software today? Build everything from scratch or use a foundation to save on development time, budget and resources? For an enterprise software MVP, which might take 8–12 months with a small team, you might indeed spend 6 months on your foundation. Things like Identity, Payment, Infrastructure, DevOps, etc. they all take time, while contributing not much to your actual product. These features are needed, but they are not your differentiators.

Pellerex does just that. It provides a foundation that save you a lot development time and effort at a fraction of the cost. It gives you source-included Identity, Payment, Infrastructure, and DevOps to build Web, Api and Mobile apps all-integrated and ready-to-go on day 1.

Check out Pellerex and talk to our team today to start building your next enterprise software fast.