Comments (6)
Hi @songololo,
The Layers guide refererenced previously describes how to add your own layers and this applies both to CartoLayers as well as other deck.gl layers you might want to use. The data sources guide might also be useful to understand how sources and layers work: https://docs.carto.com/carto-for-developers/carto-for-react/guides/data-sources
I'll try to answer your questions:
-
it isn't clear how to create a source for a custom layer?
A source is just an abstraction representing the data source for a layer and it is not mandatory. Usually most deck.gl layers will have a
data
property that will contain an array of objects with the data to be rendered. You can create this (source) intermediate object to add some decoupling or you could directly add the data in the corresponding layer property. -
custom layers expect a data property - how to link the creation of this layer to a source for the custom layer?
Layers generated with the hygen tool have a
source
property that contains theid
of the source linked to the layer. When the layer is instantiated, it gets the source from the Redux store using theselectSourceById
selector. To ensure the source is in the store when you add the layer, in the view the store is added (addSource
) to the store before the layer (addLayer
). You can follow a similar approach for your own custom layers although this is not mandatory. -
if fetching the data with fetchLayerData - then how to link this to a source?
You can see an example in this section in the documentation: https://docs.carto.com/carto-for-developers/carto-for-react/guides/data-sources#document-mode. This uses a
GeoJsonLayer
but you could use any other layer and apply the required transformations to the data. -
if using custom layers without a source, then adding and removing the layer from the corresponding view page doesn't seem to work as intended? Maybe because the source is null it skips some internal steps? In my case it seems to load the custom layer even on non-related view pages and doesn't seem to remove the layer.
I don't think the source is mandatory when adding the layer. You need to check that you are adding (addLayer) the layer only in the
useEffect
hook for the view (when it is mounted) and then removing it when it is unmounted, in the cleanup:useEffect(() => { dispatch( addLayer({ id: yourLayerId, }) ); return () => { dispatch(removeLayer(yourLayerId)); }; }, [dispatch]);
from carto-react.
Hi!
Layers in a CARTO for React application are essentially functions that return a deck.gl layer.
If you are using one of the CARTO for React templates and you use the Hygen code generator, the code for creating a CartoLayer
is automatically created. This code takes some properties from the source through the useCartoLayerProps
hook. If you attach the layer to a view, when the view is opened, the source and the layer gets added to the store (using the addSource-addLayer actions). This means the layer is instantiated and added to the map through the getLayers()
function.
You can create your dynamic layers in the same way, by creating a new function that return a deck.gl layer. You can use any deck.gl layer, not only the CartoLayer
. Our recommendation is to link the layer to a source, if possible, so if you have widgets using the same source, all the filters are integrated. You can decide to add the layer to the map every time a given view is added or not.
You can review all the steps needed in the Layers guide within the CARTO for React documentation.
from carto-react.
Closing this issue.
from carto-react.
@borja-munoz is there anywhere to find more information about how to use custom layers with a CARTO app?
The documentation shows how to use custom layers for one-off single-view apps, but doesn't really show complete examples of how to integrate custom layers with the broader ecosystem of CARTO react / redux state management.
What would really help is to show how a custom layer can live side-by-side with CartoLayers - including whether and how to add a custom source, how to properly add and remove the layer from the corresponding view, etc.
After looking through the docs there is still a number of questions:
- it isn't clear how to create a source for a custom layer?
- custom layers expect a data property - how to link the creation of this layer to a source for the custom layer?
- if fetching the data with
fetchLayerData
- then how to link this to a source? - if using custom layers without a source, then adding and removing the layer from the corresponding view page doesn't seem to work as intended? Maybe because the source is null it skips some internal steps? In my case it seems to load the custom layer even on non-related view pages and doesn't seem to remove the layer.
from carto-react.
@borja-munoz thank you this was helpful, particularly the link for data-sources and document mode.
The last question was a mistake on my part due to styling, if following the memoization strategy suggested in the docs then all seems to work (including adding to and removing from views).
What would help people like me who are new to the CARTO stack is to maybe have a documentation page containing some of the points you made above just to help people build a conceptual model of how to interface custom layers with with the CARTO API and workflows.
from carto-react.
Thank you for the feedback, we'll definitely consider it for improving the documentation.
from carto-react.
Related Issues (20)
- FormulaWidget issue with mode global disabled HOT 14
- [RFC] Add a territory selector widget HOT 3
- [RFC] Save custom geometries created with the SpatialFilter HOT 2
- [RFC] Support for Drop a Pin HOT 3
- [RFC] Support for multi-language HOT 3
- [RFC] Comparative Widgets HOT 5
- [RFC] Save the state of the filters HOT 3
- [RFC] Spatial Filter HOT 11
- GeoJSON support in useCartoLayerProps HOT 1
- queryParameters HOT 7
- Remote executeModel doesn't work for POST requests HOT 4
- quadbinZoom error HOT 2
- Hygen is not working HOT 3
- [RFC] Widget size control HOT 1
- [RFC] Export AnimatedNumber component HOT 1
- [Bug] BarWidgetUI
- [RFC] Site Selection - Information element for widgets
- executeSQL function doesn't return the status error
- Allow passing decimal precision as a prop for CategoryWidgetUI HOT 4
- [Bug] ComparativeCategoryWidgetUI progress bar missing background color
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 carto-react.