Adding Layers

Adding layers to your map

To add layers to your map navigate to ../src/data/layers/ and you will see two files:

  • railaccidents.js - a sample layer configuration file

  • index.js - the main configuration file for all layers

To add a layer you can either copy the railaccidents.js layer or modify that layer file. Keep in mind that the name of that file will be the name of the layer variable in the application state.

export default {  
    name: 'Rail Accidents',  
    visible: true,  
    cartocss: `#layer {    
        marker-width: 7;    
        marker-fill: ramp([equipment_damage], (#f3e79b, #fac484, #f8a07e, #eb7f86, #ce6693, #a059a0, #5c53a5), quantiles);    
        marker-fill-opacity: 1;    
        marker-allow-overlap: true;    
        marker-line-width: 1;    
        marker-line-color: #FFFFFF;    
        marker-line-opacity: 1;  }  `,  
    query: `SELECT * FROM rail_accidents` 
};

The following elements must be added for your layer to show up:

Once these are set you can save you layer and open the index.js file

import railaccidents from './railaccidents';
import states from './states';

// Export order will be the layer order

export default { 
    states,  
    railaccidents
}

If you were to add a new layer called states, all I need to do is to import that new layer into the index.js file and then set the order of the layers. The bottom most layer will be on top, so in this example railaccidents will show up on top of the states layer. That’s it!

Last updated