0

I am trying to build a layer selector using carts.js.v4, similar to the one provided in Carto Builder.

Examples of layer selectors that I have found utilize sublayers and my maps are using separate layers since each is built using a different database.

The complete code is below and the map is viewable at

http://pstrust.org/carto/ca-pipelines-newdata.htm

//GAS DISTRIBUTION
 const gasDistributionDataset = new carto.source.Dataset(`
   ca_gasdistribution_edited_2
 `);
 const gasDistributionStyle = new carto.style.CartoCSS(`
   #layer {
       marker-width: ramp([gas_released], range(5, 20), quantiles(5));
       marker-fill: #005fec;
       marker-fill-opacity: 0.9;
       marker-allow-overlap: true;
       marker-line-width: 1;
       marker-line-color: #FFFFFF;
       marker-line-opacity: 1;
   }
 `);
 const gasDistributionLayer = new carto.layer.Layer(gasDistributionDataset, gasDistributionStyle, {
   featureClickColumns: ['local_date','significant','serious','operator_id','name','commodity_released_type','gas_released','fatal','injure','ignite_ind','explode_ind','num_pub_evacuated','location_type','incident_area_type','crossing','system_part_involved','installation_year','pipe_diameter','pipe_manufacture_year','material_involved','release_type','class_location_type','total_cost_current','accident_psig','mop_psig','accident_identifier','cause','cause_details']
 });
//GAS TRANSMISSION
 const gasTransmissionDataset = new carto.source.Dataset(`
   gtgg2002_to_present_1
 `);
 const gasTransmissionStyle = new carto.style.CartoCSS(`
   #layer {
       marker-width: ramp([unintentional_release], range(5, 20), quantiles(5));
       marker-fill: #00b300;
       marker-fill-opacity: 0.9;
       marker-allow-overlap: true;
       marker-line-width: 1;
       marker-line-color: #FFFFFF;
       marker-line-opacity: 1;
   }
 `);
 const gasTransmissionLayer = new carto.layer.Layer(gasTransmissionDataset, gasTransmissionStyle, {
   featureClickColumns: ['significant','serious','system_type','operator_id','name','local_datetime','incident_resulted','commodity_released_type','unintentional_release','intentional_release','fatal','injure','ignite_ind','explode_ind','num_pub_evacuated','location_type','incident_area_type','crossing','pipe_facility_type','item_involved','pipe_type','pipe_diameter','pipe_wall_thickness','pipe_smys','pipe_seam_type','pipe_seam_details','pipe_manufacture_year','release_type','class_location_type','could_be_hca','pir_radius','total_cost_current','accident_psig','mop_psig','accident_identifier','cause','cause_details']
 });

//HAZARDOUS LIQUID
 const hazardousLiqDataset = new carto.source.Dataset(`
   hl2002topresent
 `);
 const hazardousLiqStyle = new carto.style.CartoCSS(`
   #layer {
       marker-width: ramp([unintentional_release_bbls], range(5, 20), quantiles(5));
       marker-fill: #EE4D5A;
       marker-fill-opacity: 0.9;
       marker-allow-overlap: true;
       marker-line-width: 1;
       marker-line-color: #FFFFFF;
       marker-line-opacity: 1;
   }
 `);
 const hazardousLiqLayer = new carto.layer.Layer(hazardousLiqDataset, hazardousLiqStyle, {
   featureClickColumns: ['serious','ipe','operator_id','name','local_datetime','commodity_released_type','commodity_subtype','unintentional_release_bbls','intentional_release_bbls','recovered_bbls','net_loss_bbls','fatal','injure','ignite_ind','explode_ind','num_pub_evacuated','significant','incident_area_type','crossing','pipe_facility_type','item_involved','pipe_diameter','pipe_wall_thickness','pipe_manufacture_year','installation_year','release_type','water_contam_ind','could_be_hca','commodity_reached_hca','total_cost_current','accident_psig','mop_psig','accident_identifier','cause','cause_details','location_type']
   });
//US PIPELINES
 const usPipelinesDataset = new carto.source.Dataset(`
   us_pipelines
 `);
 const usPipelinesStyle = new carto.style.CartoCSS(`
   #layer {
     line-width: 3;
     line-color: #4CC8A3;
     line-opacity: 1;
   }
   #layer {
    [pipeline_type = 'Petroleum Product']{
      line-color: #2a36c6;
    }
    [pipeline_type = 'Hydrocarbon Gas Liquid']{
      line-color: #15ad19;
    }
    [pipeline_type = 'Crude Oil']{
      line-color: #c40808;
    }
   }
 `);
 const usPipelines = new carto.layer.Layer(usPipelinesDataset, usPipelinesStyle);

//GAS INTRASTATE AND INTERSTATE PIPELINES
 const gasIntraInterDataset = new carto.source.Dataset(`
   natural_gas_interstate_and_intrastate_pipelines_1
 `);
 const gasIntraInterStyle = new carto.style.CartoCSS(`
   #layer {
     line-width: 3;
     line-color: #31aac2;
     line-opacity: 1;
   }
 `);
 const gasIntraInter = new carto.layer.Layer(gasIntraInterDataset, gasIntraInterStyle);

//CA GAS MIDSTREAM PIPELINES
 const ca_MidStreamGasDataset = new carto.source.Dataset(`
   ca_midstream_gas
 `);
 const ca_MidStreamGasStyle = new carto.style.CartoCSS(`
   #layer {
     line-width: 3;
     line-color: #31aac2;
     line-opacity: 1;
   }
 `);
 const ca_MidstreamGas = new carto.layer.Layer(ca_MidStreamGasDataset, ca_MidStreamGasStyle);
//DEMOGRAPHICS
const demographicsDataset = new carto.source.SQL('SELECT * FROM demographics');
const demographicsDataset = new carto.source.Dataset('demographics');
   const demographicsStyle = new carto.style.CartoCSS(`
   #layer {
     polygon-fill: ramp([perc_bpov], (#efec3a, #efe837, #f0df32, #f2d62d, #f3cc27, #f4c121, #f5b41a, #f8a611, #f99a0b, #fa8f05, #fb8800), quantiles, "=", category);
   polygon-opacity: .3;  
   }
   #layer {
     [zoom < 9] {
         polygon-fill: ramp([perc_bpov], (#f9f8b0, #f9f5af, #f9f2ad, #faefab, #faeba9, #fbe6a6, #fbe1a3, #fcdba0, #fdd79d, #fdd29b, #fdcf99), quantiles, "=", category);
   polygon-opacity: 1;
       }
   }
   #layer::outline {
     line-width: 1;
     line-color: #FFFFFF;
     line-opacity: 0.5;
   }
   image-filters: colorize-alpha(#f9f8b0, #f9f5af, #f9f2ad, #faefab, #faeba9, #fbe6a6, #fbe1a3, #fcdba0, #fdd79d, #fdd29b, #fdcf99);
         `);

   const demographicsLayer = new carto.layer.Layer(demographicsDataset, demographicsStyle, {
     featureClickColumns: ['totalpop', 'hsholds', 'perc_bpov', 'per_cap_inc']
   });



//DRAW LAYERS ON MAP
 client.addLayers([demographicsLayer, ca_MidstreamGas, gasIntraInter, usPipelines, hazardousLiqLayer, gasDistributionLayer, gasTransmissionLayer]);
 client.getLeafletLayer().addTo(map);
0

You can use CARTO.js' .show() and .hide() methods. They will allow you to hide and show independently each layer added to your map. You can find the documentation here.

You can build your layer selector using that methods. By adding a checkbox to every layer in the legends, you can do something like this:

Checkbox HTML:

<input type="checkbox" id="nameOfYourLayer" checked/>

JS Code:

document.querySelector('#nameOfYourLayer').addEventListener('click', event => event.target.checked ? layerVariable.show() : layerVariable.hide() );

You can make it more generic targeting every checkbox and managing the current layer state inside your application.

  • I appreciate your help, but I have been unable to get this to work. I'm not sure where to put the listener. I've put the input tags into my legend: <p class="gasDistTitleText">Gas Distribution Incidents <input type="checkbox" id="distribution" checked/></p> I've tried putting the document querySelector in a variety of places: just under the opening <script> tag, document.querySelector('#distribution').addEventListener('click', event => event.target.checked ? distribution.show() : distribution.hide() ); , underneath the client.addLayers tag, and within the popup code (just to try). – Chris Coffin Sep 5 '18 at 16:54
  • Got it! I wasn't using the correct layer name. I was thinking the nameOfYourLayer was whatever ID I gave input rather than the actual layer name : } – Chris Coffin Sep 5 '18 at 17:49
  • Great to read that :) I am going to explain it clearly to avoid confussions. – jesusbotella Sep 6 '18 at 13:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.