[GIS] Leaflet Layer Controls

angularjsjavascriptleaflet

I have been searching, but have not found a way to do this…

I have several 'generic' layers that I want to show in my Control for users to toggle on and off… That works fine.

However, I would like to let the user select additional layers from a list, and have them toggle on and off as well. BUT, I do NOT want those layers added to the control. Instead, I want to add them to an external list (shown outside the map), and have a checkbox for each that the user can use to show/hide that layer on the map.

I want to do this via Angular/JavaScript.

Potentially, the user could have 20+ additional layers selected, so adding them to the control is not good, as the list would be very long.

Any ideas?

And no, I do not have any code to share, as I cannot find any way to add a layer to the map, without adding it to the control….

–Sam

Best Answer

I'm working on a cancer map app in leaflet some of my code may help.

First is my html checkbox code: 

<input id="thyroid" type="checkbox" class="list_item2" onClick='updateLayerVis("thyroid");'/><label><a href='http://www.health.ny.gov/statistics/cancer/registry/abouts/thyroid.htm' target='_blank'><img src='images/question_12x12.png'/></a> Thyroid</label>

I have a checkbox and small png for it's icon. When the checkbox is checked it fires off my onClick function called updateLayerVis and passes it the layer name.

Next my JavaScript: 

//Create list of cancer types in app
var clist = ["bladder","brain","breast","colorectal","esophagus","kidney","larynx","leukemia","liver","lung","mesothelioma","nhl","oral","ovary","pancreas","prostate","stomach","testis","thyroid","uterus"];

// create the layers in the list 
for (i = 0; i < clist.length; i++) {
 mapLayers[clist[i]] = new L.GeoJSON(data,{ style: style,onEachFeature: theOnEachFeature, filter: function(feature, layer) {return feature.properties.CANCERTYPE ==clist[i] ;}});
 }

Now I have layers defined already as GeoJSON, so this checks for the layer and adds or removes it from the map.

function updateLayerVis(a){

    if(document.getElementById(a).checked==true){
        var lyr = mapLayers[a];
        lyr.addTo(map);

    }else{
         map.removeLayer(mapLayers[a]);
    }
}

I hope this helps.

Related Question