TL;DR I need React component for maps. I thought it would be easy. The 5-minute task, not more. As a result, it turned out to be month (not a month of working time) trip of errors, trials and bug reports.
Google maps
Obviously, I tried react-google-maps. I didn't know much about maps and React at the moment. Immediately got a bug with rendering popup (infoWindow in terms of Google Maps). I found out that this library poorly supported and started to search for alternatives. There are 4 alternatives for React Google maps components. But all of them poorly supported.
See full table with data in my gist
Other options
I started to dig what are other options. I found following options libraries for maps: Leaflet, OpenLayers, D3, Mapbox GL JS, Mapbox.js (which is Leaflet plugin) and corresponding React components. Check the same gist for comparison of those libraries.
react-leaflet is most supported option. Except for the fact, that everything which is out of bounds of Leaflet, but makes sense for React component library, is mercilessly rejected:
Later I found small example which compared OpenLayer and Mapbox GL and was stricken by the speed of render of Mapbox GL JS. I also was able to compare to Leaflet with VectorGrid plugin, and from my POV Mapbox GL JS is far ahead of other competitors in the speed of rendering.
I realized that usage of Mapbox GL JS or Leaflet or OpenLayer makes much more sense, rather than use Google Maps.
- I’m not locked to one tile provider. I can use free providers or even roll my own server. Small note: it is possible to use third-party tile providers with Mapbox GL JS.
- I can bundle library with Webpack (or Brunch or anything else), which is not possible with Google maps
- It is open source
Mapbox GL JS
So I switched my attention to react-map-gl. It looks really impressive. It appreciates React declarative approach. It uses Mapbox GL JS. But lacks standard components, like Popup or Marker. Not a problem I said to myself — I will do it myself. And here avalanche of problems started. It is totally unclear how to get into development server, to test new code. Not a problem: I will create an empty project with create-react-app add react-map-gl as dependency and build a component. Why create-react-app? Because it is so easy to use it. I use it even for projects without React (simply delete react dependencies from package.json). Nope. Not so fast: react-map-gl is incompatible with create-react-app. After poking around I realized that I do not use the latest version of the library. Latest published version is 2.0.2 (at the moment of writing, was smaller at the moment of my experiments), but GitHub project actually contains version 3.0.0.aplpha.5. I decide to give a try with the latest development version. Added dependency using GitHub link. And surprise: npm can not handle git installation from repositories without pre-generated artifacts. I actually using yarn, but it has the same issue. Whatever, let’s solve this in a straightforward way:
yarn install
cd node_modules/react-map-gl/
yarn install
npm run build-es5
npm run build-es6
Finally, I got into issue with create-react-app or Webpack or babel (not sure what exactly) and ES6 modules.
Result
I got no working map component. I know much more about maps and a bit more about React. I have issued ton of bug reports and feature requests.
PS
This is another JS-fatigue story. I wanted to share it with you to show how much troubles you can catch before you even try to write actual software. This threshold should be minimized. I want to say thank you to people who makes me believe that not all that bad
Dan Abramov
One of the authors of create-react-app and open source advocate. Create-react-app is the gem of easy to use software. I do not want to do a lot of small decisions on the start. Give me reasonable defaults. I suppose Rails was first who came up with conventions over configuration (thanks to DHH and co). Also, Dan actively promotes good documentation, which a lot of projects miss.
Evan Czaplicki
The author of Elm. One really amazing feature of Elm is super friendly error messages. After Elm Rust and even Haskell started to work on more friendly messages. I mention this because I got into one cryptic warning on this trip.
Yehuda Katz
Who took part in the development of Rails, Ember, Yarn, Bundler and many others. Thank you for Yarn.
PS 2
There is hope to get cross-platform Mapbox React component. React Native Mapbox GL already exists.
Image credit: Sir John Tenniel from the 1865 edition of “Allice in Wonderland”, via Wikimedia Commons.