Making Maps With React

New blog post: How to make maps with Reactjs.  #javascript

  • For a normal map a library without WebGL support will be sufficient.
  • The Google Map React library wraps your Google map as a React component.
  • The cool thing about it is that it lets you render any React component into the map, which gives you the opportunity to easily create custom markers.
  • Another useful feature is that the components provided by the Google Maps API (for example Traffic or Transit layers or a searchbox) can be included in the map as well.
  • As an example we set up a simple map using the scatterplot overlay.

BLOG

@webk1d: New blog post: How to make maps with Reactjs. #javascript

In this article you can find an overview about different React mapping libraries. A lot of our projects are about data visualizations and maps in particular. For two years we have been building most of our applications with React. At the beginning we just used Leaflet inside a React component. Now we are mostly using React Leaflet which is a React wrapper for Leaflet.

All examples included in this article can be found in the making-maps-with-react Github repo if you want to play around a bit.

Before you start developing your map you should decide if you need WebGL support or not. You may consider using WebGL if you have a lot of features to be displayed at once, let’s say 10k markers for example. For a normal map a library without WebGL support will be sufficient.

As mentioned earlier this is the library we use mostly. Leaflet is a very solid mapping library and this is the React wrapper. It’s actively maintained and already uses Leaflet version ^1.0.0.

. We are importing it in our main.styl file.

You can find the full example in the Github repo.

This is a very special mapping library because it has no external dependencies. For now you can only display overlays and markers on a basemap, so it could be useful for a very simple locator map. So far, there are no popups for the markers implemented so you would need to come up with your own logic. For more information, check out the project page.

You can find the full example in the Github repo.

The Google Map React library wraps your Google map as a React component. The cool thing about it is that it lets you render any React component into the map, which gives you the opportunity to easily create custom markers. Another useful feature is that the components provided by the Google Maps API (for example Traffic or Transit layers or a searchbox) can be included in the map as well.

Make sure to include your Google Maps API key. The setup is very straight forward:

The full example is available in the Github repo.

If you need WebGL support for your project, you might consider using React MapGL. This is a react wrapper for Mapbox GL which uses WebGL to render maps from vector tiles.

The library has a small API and some sample overlays like scatterplot. Other useful overlays are provided e.g by deck.gl. As an example we set up a simple map using the scatterplot overlay. In the next section you can find a version that uses deck.gl.

The setup is a little tricky and the docs seem to be a bit confusing because the readme of the repo and the docs are different. Note that it is necessary to install immutable and provide an Mapbox API key to get started.

You can find the full example in the Github repo.

Deck.GL was developed by the uber team and is a framework which provides beautiful overlays for maps rendered with Mapbox GL. On the website of the project you will find a tutorial that shows how to implement different layers in your map. The example below uses the GeoJsonLayer and ScreenGridLayer (with 50.000 points).

You can find the full example in the Github repo.

Making Maps With React