Tutorial: React Mapbox GL and rendering Objects based on longitude/latitude

If you’ve made it to this blog, chances are you’re in the early stages of setting up a map for a React app. Luckily for you, I’ve already done a bit of research and today I’m going to walk you through the basics of working with MapboxGL.

Mapbox

Using React-Mapbox-GL is basically as simple as using a React component with that we feed all of Mapbox’s specifications. We were able to render the map above by doing npm install --save react-map-gl and then return in the React method<ReactMapGL/>.

To determine where the initial center of the map, we’re going to declare a state of viewport with longitude, zoom, width, height and latitude as it’s key values. (Don’t forget the access token!)

Now to give it the ability to move around…

We’re going to have a helper method that we takes the viewport passed as props directly into the react component, as such:

onViewportChange = viewport => {
// console.log(viewport)
this.setState({viewport});
};

Cool! Now we can look around by directly manipulating the State of the viewport.

Next, we found this API containing all of the publicly recorded trees in NYC from NYC open data in 2015. Our data comes with longitude and latitude as key values given to us, so we’re able to quickly pinpoint exactly where they are on the map by using a React-Mapbox-GL component called Marker .

React-Mapbox-GL component

Trees are also given the key value of health. I used a conditional statement to render the different tree icons based on their health level. (Withered means unknown, brown branches means poor, light green means fair and dark green means good)

And there you have it, objects rendered base on longitude and latitude.

But…

A huge issue dawned upon me that with a large amount of data (specifically 683,000 trees….), it would either lag or my server would just freeze entirely, and to nobody’s surprise….it did.

So, to come up with ideas to battle this problem, I listed down several ways to fix this issue.

• Reducing the amount of objects rendered base on the center of my map, by declaring four values that sets the minimum and maximum longitude and latitude allowed for the objects to be rendered.
• Performing the filter method in the backend, and make specific fetch request based on the State of my viewport and the four values mentioned above.
• (Optional) Figuring out a way to map data by object density rather than individual object.

Below is my current progress:

An app using React-Mapbox-GL with 2015 Street Tree Census

Method I used for filtering:

let filteredTrees = allTrees.filter(tree => (parseFloat(tree.longitude) < this.state.viewport["longitude"]+maxDifference && parseFloat(tree.longitude) > this.state.viewport["longitude"]-maxDifference) && (parseFloat(tree.latitude )< this.state.viewport["latitude"]+maxDifference && parseFloat(tree.latitude) > this.state.viewport["latitude"]-maxDifference))

Thanks for reading!