5 ms·

React-map-gl – React components for Mapbox GL JS

148 points by polskibus 9y ago

lucideer 9y ago
EDIT: Completely misread this as ReactNative instead of React for some reason. Ignore all of the below. --- This is being released on the back of the "official" Mapbox GL React Native library[0] just having new resources[1] committed to it after having been neglected for 1.5 years[2]. I haven't looked into it at all yet, but I wonder was it borne out of frustration (commits seems to have started shortly after the last MBRNGL release), and what the Mapbox guys' perspective on it in terms of differentiating the libraries. [0] https://github.com/mapbox/react-native-mapbox-gl/ https://github.com/mapbox/react-native-mapbox-gl/ [1] https://github.com/mapbox/react-native-mapbox-gl/issues/590#issuecomment-322901528 https://github.com/mapbox/react-native-mapbox-gl/issues/590#... [2] https://github.com/mapbox/react-native-mapbox-gl/releases/tag/3.2.1 https://github.com/mapbox/react-native-mapbox-gl/releases/ta...
- lwansbrough 9y ago
  I don't believe Uber's component works in React Native, so I don't think your claim is correct.
- buckhx 9y ago
  I contacted Mapbox about their React Native library and they said it's defunct and they won't be supporting it. Been using AirBnBs mapping library for RN. It does the job but def has some rough edges.
  - lucideer 9y ago
    How long ago did you contact them? The recent activity on the repo issues seems to indicate a change of heart on their part.
- pveugen 9y ago
  We expanded our team and are working on improvements to React Native SDK, which was initially a side project from one of our engineers. We’re excited to support the library and get it to feature parity with our native iOS, Android, and Qt SDKs. Disclaimer: I work with the mobile team at Mapbox.
davidjhamp 9y ago
Having used this, its not without its issues. * Adds a performance penalty over straight Mapbox-GL. * No support for animations / flyovers / etc. * You have to give width/height in pixels for map size. * Can't introspect map to get layer / point data w/o hacks. The recent ver 3.0 was a big improvement.
- codor 9y ago
  These issues were big enough that I just recently removed this library on a new project in favor of straightforward Mapbox GL JS. The inability to use percentages for height/width is a major drawback. No sense in adding size to the bundle for fewer options.
  - davidjhamp 9y ago
    Seconded, in our case we haven't yet but its on the roadmap.
- pendragon 9y ago
  It does not make it easy to access the mapbox library API directly. It claims there is a way, but it's not documented.
  - davidjhamp 9y ago
    You can get the mapbox-gl map instance by using a ref and then grabbing the mapbox-gl map off of that (but not documented or officially supported).
joeevans1000 9y ago
AFAIK Uber switched back to Google Maps... does anyone know why they are still working on Mapbox code?
- iirvine 9y ago
  I seem to recall from the last time I stumbled on this it's largely used for internal visualization and tools
- Demiurge 9y ago
  Any backstory on why they switched back? Having tried using Google Maps and Earth APIs, they are as opaque and impossible to extend as closed source API/library get.
gejose 9y ago
Bit of a plug, but I recently built something using this and found it really easy to use with react https://blog.georgejose.com/visualizing-transit-vehicle-locations-on-a-map-in-real-time-67a97c77cbe3 https://blog.georgejose.com/visualizing-transit-vehicle-loca...
- blumomo 9y ago
  Great post, well written, thanks for sharing. You want to fix: 359s => 359ms in your post.
  - gejose 9y ago
    Thanks for noticing that!
- canada_dry 9y ago
  That's a great app! I have long standing hate-on for the TTC's inefficiency... buses that more-often-than-not travel in clusters where the first one is half full, the remaining ones are empty. The TTC constantly raises fares but does little to utilize technology to make themselves more efficient! /rant
- altotrees 9y ago
  This is a really neat app. How long did it take and was it just a personal side project?
- davidjhamp 9y ago
  It would be nice if you animated the position changes to avoid the jumpiness.
wlindner 9y ago
I prefer https://github.com/alex3165/react-mapbox-gl https://github.com/alex3165/react-mapbox-gl over this library. It seems better maintained and documented.
- firloop 9y ago
  That's a good library but I had a hard time getting it to work with server side rendering. Ended up having do to a dynamic import with Next.js 3 beta just to get the page to work. This problem affects most mapping libs, not sure if Uber's is any different.
- futileboy 9y ago
  I think it's way better than the Uber library. We tried both and ended up going with this version and it was much more flexible for our needs.
- roelvanhintum 9y ago
  Uber's library was the reason i moved to alex3165's version. Every update came with a day of debugging. Hopefully the new version is any better.
willtheperson 9y ago
Somewhat related, anyone have a good list of drop-in React components organized in categories? I'm thinking of something like iOS Cookies for React Components.
- chrisweekly 9y ago
  Check out Boundless: Accessible, Battle-Tested, Composable React Components https://boundless.js.org https://boundless.js.org
- acemarke 9y ago
  There's a good list of React components at https://github.com/brillout/awesome-react-components https://github.com/brillout/awesome-react-components , and https://js.coach https://js.coach is an auto-generated search engine for React-related libraries on NPM with some category filtering.
zspitzer 9y ago
Just as a heads up for people supporting Safari and all iOS users, there's some sort of a leak in Safari which causes Mapbox-gl type apps to crash with the famous "A problem occurred with this webpage so it was reloaded" problem on iOS https://bugs.webkit.org/show_bug.cgi?id=172790 https://bugs.webkit.org/show_bug.cgi?id=172790

148 points by polskibus 9y ago

EDIT: Completely misread this as ReactNative instead of React for some reason. Ignore all of the below. --- This is being released on the back of the "official" Mapbox GL React Native library[0] just having new resources[1] committed to it after having been neglected for 1.5 years[2]. I haven't looked into it at all yet, but I wonder was it borne out of frustration (commits seems to have started shortly after the last MBRNGL release), and what the Mapbox guys' perspective on it in terms of differentiating the libraries. [0] https://github.com/mapbox/react-native-mapbox-gl/ https://github.com/mapbox/react-native-mapbox-gl/ [1] https://github.com/mapbox/react-native-mapbox-gl/issues/590#issuecomment-322901528 https://github.com/mapbox/react-native-mapbox-gl/issues/590#... [2] https://github.com/mapbox/react-native-mapbox-gl/releases/tag/3.2.1 https://github.com/mapbox/react-native-mapbox-gl/releases/ta...

lwansbrough 9y ago
I don't believe Uber's component works in React Native, so I don't think your claim is correct.
buckhx 9y ago
I contacted Mapbox about their React Native library and they said it's defunct and they won't be supporting it. Been using AirBnBs mapping library for RN. It does the job but def has some rough edges.
- lucideer 9y ago
  How long ago did you contact them? The recent activity on the repo issues seems to indicate a change of heart on their part.
pveugen 9y ago
We expanded our team and are working on improvements to React Native SDK, which was initially a side project from one of our engineers. We’re excited to support the library and get it to feature parity with our native iOS, Android, and Qt SDKs. Disclaimer: I work with the mobile team at Mapbox.

davidjhamp 9y ago

Having used this, its not without its issues. * Adds a performance penalty over straight Mapbox-GL. * No support for animations / flyovers / etc. * You have to give width/height in pixels for map size. * Can't introspect map to get layer / point data w/o hacks. The recent ver 3.0 was a big improvement.

codor 9y ago
These issues were big enough that I just recently removed this library on a new project in favor of straightforward Mapbox GL JS. The inability to use percentages for height/width is a major drawback. No sense in adding size to the bundle for fewer options.
- davidjhamp 9y ago
  Seconded, in our case we haven't yet but its on the roadmap.
pendragon 9y ago
It does not make it easy to access the mapbox library API directly. It claims there is a way, but it's not documented.
- davidjhamp 9y ago
  You can get the mapbox-gl map instance by using a ref and then grabbing the mapbox-gl map off of that (but not documented or officially supported).

joeevans1000 9y ago

AFAIK Uber switched back to Google Maps... does anyone know why they are still working on Mapbox code?

iirvine 9y ago
I seem to recall from the last time I stumbled on this it's largely used for internal visualization and tools
Demiurge 9y ago
Any backstory on why they switched back? Having tried using Google Maps and Earth APIs, they are as opaque and impossible to extend as closed source API/library get.

gejose 9y ago

Bit of a plug, but I recently built something using this and found it really easy to use with react https://blog.georgejose.com/visualizing-transit-vehicle-locations-on-a-map-in-real-time-67a97c77cbe3 https://blog.georgejose.com/visualizing-transit-vehicle-loca...

blumomo 9y ago
Great post, well written, thanks for sharing. You want to fix: 359s => 359ms in your post.
- gejose 9y ago
  Thanks for noticing that!
canada_dry 9y ago
That's a great app! I have long standing hate-on for the TTC's inefficiency... buses that more-often-than-not travel in clusters where the first one is half full, the remaining ones are empty. The TTC constantly raises fares but does little to utilize technology to make themselves more efficient! /rant
altotrees 9y ago
This is a really neat app. How long did it take and was it just a personal side project?
davidjhamp 9y ago
It would be nice if you animated the position changes to avoid the jumpiness.

wlindner 9y ago

I prefer https://github.com/alex3165/react-mapbox-gl https://github.com/alex3165/react-mapbox-gl over this library. It seems better maintained and documented.

firloop 9y ago
That's a good library but I had a hard time getting it to work with server side rendering. Ended up having do to a dynamic import with Next.js 3 beta just to get the page to work. This problem affects most mapping libs, not sure if Uber's is any different.
futileboy 9y ago
I think it's way better than the Uber library. We tried both and ended up going with this version and it was much more flexible for our needs.
roelvanhintum 9y ago
Uber's library was the reason i moved to alex3165's version. Every update came with a day of debugging. Hopefully the new version is any better.

willtheperson 9y ago

Somewhat related, anyone have a good list of drop-in React components organized in categories? I'm thinking of something like iOS Cookies for React Components.

chrisweekly 9y ago
Check out Boundless: Accessible, Battle-Tested, Composable React Components https://boundless.js.org https://boundless.js.org
acemarke 9y ago
There's a good list of React components at https://github.com/brillout/awesome-react-components https://github.com/brillout/awesome-react-components , and https://js.coach https://js.coach is an auto-generated search engine for React-related libraries on NPM with some category filtering.

zspitzer 9y ago

Just as a heads up for people supporting Safari and all iOS users, there's some sort of a leak in Safari which causes Mapbox-gl type apps to crash with the famous "A problem occurred with this webpage so it was reloaded" problem on iOS https://bugs.webkit.org/show_bug.cgi?id=172790 https://bugs.webkit.org/show_bug.cgi?id=172790