Code Generator
CARTO for React includes a code generator based on Hygen to speed up the creation of the most common elements found in apps: views, sources, and layers.
Views
If you want to create a new View, you need to execute the following command in the project root folder:
The command will ask you to select the following options:
The code generator will perform three different actions in your code:
Modify the route settings in the application (in the
src/routes.js
file) to add the path to the new view.Add the view to the header in the
src/components/common/header/Header.js
file.Create a new file for the view in the following folder:
src/components/views
. This view will contain the “Hello World” string in the returned JSX code. You can substitute this string with the JSX code for your user interface.
Sources
If you want to create a new Source, you need to execute the following command:
The command will ask you to select the following options:
The code generator will create a new file in the src/data/sources/
folder that will define a source object with the following properties:
In addition to these three properties, you can add an additional credentials
property to the source after it has been created. This is useful if you want to add a source with different credentials from those specified in the src/store/initialStateSlice.js
file.
Layers
For creating a new layer, you need to execute the following command:
The command will ask you to select the following options:
The code generator will perform two different actions:
Create a new file for the layer in the
src/components/layers/
folder. This element will return aCartoLayer
. If you want to modify the default visualization options, you can modify the corresponding deck.gl layer properties.Attach the layer to the view in the corresponding view file, if this option has been selected. If this is the case, before adding the layer by dispatching the
addLayer
action, the source will also be added using theaddSource
action.
Help
For further information about these commands you can execute:
Last updated