CODEWITHSUNDEEP
jquerycontrolsleafletlayer
IrfanClemson
IrfanClemson

Reputation: 1779

Removing from Control but Keeping Layer on the Map

I have a Leaflet.js based web page at http://gisdev.clemson.edu/fireflies . In the top right corner are layers' controls. I would like to be able to to remove the options like 'states' from the layers' control box but still keeping the states' layer visible. If I don't add the 'states' object to the map's overlay then that layer doesn't get visible on the map.

I have thought of using jQuery to remove the option but an wondering if there is a better way--some kind of built-in within the Leaflet framework.

Any ideas?

Upvotes: 3

Views: 1282

Answers (2)

IrfanClemson
IrfanClemson

Reputation: 1779

The Answer by @sfletche works. Alternately, I am able to make this work by using jQuery. Here is my jQuery solution:

$('label').each(function() {
    if ($.trim($(this).text()) == 'States') {//Remove the States
        //$(this).parent().remove();
        $(this).remove();
    }
    if ($.trim($(this).text()) == 'Fireflies') {// Remove the Fireflies
        //$(this).parent().remove();
        $(this).remove();
    }
});

Upvotes: 0

sfletche
sfletche

Reputation: 49714

You can add a layer to the map without adding it to the control.

Looking at your Fireflies application, if you want to remove the states layer from the layer control while still having it display on the map, simply remove the states key/val from your overlays object.

You are already adding the states layer to the map with the following

var wmsstates = L.tileLayer.wms("http://jomdev.clemson.edu:8080/geoserver/it.geosolutions/wms", {
    layers: 'it.geosolutions:USA_States',
    format: 'image/png',
    transparent: true,
    version: '1.1.0',
    attribution: "usastates"
});

wmsstates.addTo(map);

At this point it's already been added to the map. So now all you have to do is not add it to the Layer Control.

So, instead of this

var overlays = {    
    "Counties": wmscounty,
    "States": wmsstates,
    "Fireflies": geojsonFirefly
};

layersControl = new L.Control.Layers(baseLayers, overlays, {
    collapsed: false,
    id: 'irfancontrols'
});

Use this

var overlays = {    
    "Counties": wmscounty
    "Fireflies": geojsonFirefly
};

layersControl = new L.Control.Layers(baseLayers, overlays, {
    collapsed: false,
    id: 'irfancontrols'
});

Since the States layer is no longer an overlay, it might be hidden underneath your basemap. To solve this you'll want to call bringToFront

wmsstates.bringToFront();

Great looking project BTW. :)

Upvotes: 2

Related Questions