Comments (10)
The idea would be this : https://github.com/piemapping/react-map-gl/pull/1/files
from react-map-gl.
Hey @alex3165, Thanks for this PR. I like the idea of a React friendly API for describing the map styles. However, if I'm understanding the PR correctly, this would cause the API to no longer be stateless, which is one of the goals for the project. see: http://uber.github.io/react-map-gl/#/stateless If others felt strongly that this no longer desired, we can revise that goal, but it's a goal I still think is desirable. Specifically, if we exposed the underlying map object via the context, overlays could change the state of the map in unexpected ways.
For now, the use cases you're describing, adding geoJSON route and markers, can be achieved with the mapStyle
prop of the MapGL object. It might also be worth iterating over the pain points in creating mapStyles and the ways to make it easier.
from react-map-gl.
Hey @vicapow the problem in my use case is that designers are designing the map on Mapbox studio so to use their design i need to use the link to Mapbox style as a mapStyle
props so i cannot pass an object. At least passing the map through context to all childrens would give more flexibility to developers that use the library.
Another point is that i need to update the position of the marker, it's something that i do with :
this.state.source.setData({
type: "Point",
coordinates: coordinates.toJS()
});
The link you gave about stateless chapter on your documentation is not working, i am agree that having the map in state is not ideal but i need this to pass it through context.
from react-map-gl.
Hey @vicapow the problem in my use case is that designers are designing the map on Mapbox studio so to use their design i need to use the link to Mapbox style as a mapStyle props so i cannot pass an object. At least passing the map through context to all childrens would give more flexibility to developers that use the library.
For now, you can request the style yourself, then pass the style to the MapGL object after it's loaded.
Another point is that i need to update the position of the marker, it's something that i do with :
this.state.source.setData({ type: "Point", coordinates: coordinates.toJS() });
You could update the style with the new coordinates. react-map-gl should efficiently update the map style for you, without causing the entire style to reload.
The link you gave about stateless chapter on your documentation is not working, i am agree that having the map in state is not ideal but i need this to pass it through context.
whoops! try this one: http://uber.github.io/react-map-gl/
from react-map-gl.
@vicapow Hey. Can you explain how can I alter the mapStyle layer property or source property without causing the whole map to reload?
from react-map-gl.
At this moment we have no intention to support changing the API layer. Most of these operations should be done through modifying the mapStyle object directly.
from react-map-gl.
@abmai, this is very prohibitive isn't it ?
For example, my goal is to show a raw mapbox style, and add some overlay.
The API, for now, doesn't allow to
- Define a style (plugged to data)
- Add some client-side overlay
without redefining the whole base style.
This example from mapbox is basically impossible without redefining the whole style.
from react-map-gl.
@cyrilchapon it’s definitely possible. Just request the style yourself, modify it, then pass it to react-map-gl.
from react-map-gl.
@vicapow you mean request the style.json ?
I realized that possibility afterward
from react-map-gl.
it’s definitely possible. Just request the style yourself, modify it, then pass it to react-map-gl.
Does anyone have an example or a reference about how this can be done? For example, I have a Mapbox style url like 'mapbox://styles/mapbox/light-v10'
and I want to load it as a basemap. Here is the Mapbox example of how this can be done with the imperative API: https://docs.mapbox.com/mapbox-gl-js/example/vector-source/
What would the equivalent look like with react-map-gl
?
from react-map-gl.
Related Issues (20)
- [Bug] [docs] Link to MapLibre API docs are broken
- [Feat] Add support for latest Mapbox rendering release (V3) HOT 2
- [Bug] Input data given to 'xxx' is not a valid GeoJSON object HOT 3
- [Bug] Map loading issue on resizing width HOT 1
- [Bug] Missing tiles breaks Layer props update HOT 1
- [Bug] Mapbox queryRenderedFeatures() returns empty array HOT 1
- [Bug] Jump To does not center the map at the point you click on HOT 1
- [Bug] Blurred textures on ultrawide monitors HOT 1
- [Bug] Map projection "globe" is not working in react-map-gl HOT 1
- Next14/Remix HOT 1
- [Feat] Fetch tiles using axios HOT 3
- [Bug] React 19: "Warning: Invalid prop `source` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props."
- [Feat] upgrade to fit `[email protected]` HOT 8
- [Bug] mapRef.current is null inside `onLoad` HOT 4
- Issues with useControl when upgrading to nextjs 14.2
- [Bug] Unexpected map distortion with sticky elements
- [Feat] Update react-map.gl Footer
- [Feat] Use the extended MapLibre CustomRenderMethod
- [Enhancement] Improv - Website hero text breaks on mobile
- Create Security Policy
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-map-gl.