I'm working on a React app with a mapbox component and am trying to understand the use case for react-map-gl vs the examples on the Mapbox site that just use mapbox-gl. From the React GitHub issues they mention this in regards to performance -
React may decide to render more than necessary than Mapbox would on its own, failing to account for how expensive the draw call is.
If you are using mapbox as nothing but a map display, generally speaking you do not need this library. If you are trying to match the map with any other React component, you will eventually run into the same issue.
But then the entire Mapbox studio is written I believe without any react wrappers...and there are plenty of React components in Studio besides the map, so it does not seem like this argument holds true. Anyone have thoughts or experience they can share?
React Native - react-native-mapbox-gl vs react-native-maps - Geographic Information Systems Stack Exchange
question: Considerably lower FPS with react-map-gl compared to mapbox-gl
reactjs - What's the difference between the components ReactMapGL and MapGL in the react-map-gl library? - Stack Overflow
react-map-gl or mapbox-gl?
Videos
I have done an app with react-native-maps and haven't used mapbox one. If you need to have a larger number of markers displayed at once it's tricky to get there (you'd have to fork the repository and change something in the Android/iOS parts of the codebase).
There should be no issues displaying 50 markers on the map but the CPU explodes (that's I guess one of the reasons why AirBnB in their app does not have many markers and limits the number when you look at a small region with hundreds of locations).
Given that mapbox seems to be more low level I guess there would be no issues with that.
If you are using Create-React-Native-App (Expo) to kick off your project, react-native-map is already included... I've done a bunch of Leaflet and Django work in the past, I found it pretty straight-forward to get going with this approach.
Adding Mapbox to Expo is "In Progress" https://expo.canny.io/feature-requests/p/add-mapbox-gl-support
I find the documentation for react-native-maps to be more example based (easier to understand) where as the Mapbox docs are API definition driven. Good, but not as approachable for those new to React-Native their library.
They will both work with GeoJson, no worries.
I'm really starting to get frustrated with this. I've seen a split between using react-map-gl and mapbox-gl usage in tutorials. It's all honestly kind of a mess cos no one tutorial/documentation is what I need it for. I thought I had figured something out but I realized my .js files arent acutally responisble for rendering the map. It's only rendering because of a <script> tag I found in one tutorial in the index.html file which is I feel like that's not what I want ultimately.
Ultimately I know I'm going to have to loop thru gelocation data in an API to add points on a map but if it's only because of that tag in html then why the hell use React to begin with? It's weird to me I can't find a striaght answer considering how popular React is.
I also hate JavaScript (cliche, I know) and am much more competent in Python so I'm considering scrapping this (honestly for like the sixth time now) and starting over in Django or Flask even thought I have zero experience with them.
Thoughts?
» npm install react-map-gl
I know this is an old post..
As I understand it, the cause is that mapbox (not react-map-gl) has a bug in it that does not transpile correctly with "npm build".
Fortunately you do NOT have to eject your app as I learned in this link: https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795
I had to npm install worker-loader
Then add the following lines.
// had this.
import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css';
// added the following 6 lines.
import mapboxgl from 'mapbox-gl';
// The following is required to stop "npm build" from transpiling mapbox code.
// notice the exclamation point in the import.
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
Since I'm using typescript and linting, I had to add some directives to ignore warnings/errors that would otherwise stop it from compiling.
Note that I did not have to install mapboxgl since react-map-gl uses it.
But, I did need to add eslint-disable-next-line import/no-unresolved
and eslint-disable-next-line import/no-webpack-loader-syntax
combined on the same line.
I am using "react-map-gl": "^6.1.17".
The issue is caused by the transpiler. It's a bug that Mapbox is working on. Follow the suggestions here:
https://github.com/mapbox/mapbox-gl-js/issues/10173
It's also in the official documentation now.
https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2
Does anyone have any experience incorporating mapbox with plotted points from their json in a react app? There are a serious lack of tutorials out there, and the docs for Mapbox are insane.