How I could create layers dinamycally

[LongJohnSilver1504]

Hello.
I need create layer for my map dynamically instead of static like all the examples.
How I could do this?
Thanks

[borja-munoz]

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.

[borja-munoz]

Closing this issue.

[songololo]

@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.

[borja-munoz]

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 the id of the source linked to the layer. When the layer is instantiated, it gets the source from the Redux store using the selectSourceById 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]);
  

[songololo]

@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.

[borja-munoz]

Thank you for the feedback, we'll definitely consider it for improving the documentation.