1

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

1

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.

0

Here's a pretty useful plugin by Stefano Cudini, fairly simple to implement.

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.