I been working with leaflet control and here i stuck for a while....

I have multiple base layers, and user can toggle between these layers. these layers have separate drawing controls.

When i add markers on one layer(for example : layer1), then it is also visible on other layers(layers added dynamically later on).

My question is, how can we put marker on layer which will strictly bound for it only e.g: layer1


//Custom control for marker
L.easyButton('fa-arrow', function () {
map.on('click', function arrow(e) {
L.marker(e.latlng, { icon: arrIcon, draggable: true}).addTo(map);
map.off('click', camerasPlace);

//already added layer and needs to bind marker with this
var layerGroup = new L.LayerGroup(),
imageOverlayUrl = 'assets/img/isbimg.jpg',
imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
featureGroup = new L.FeatureGroup().addTo(layerGroup);
var layerGroupings = { "Main": layerGroup };
var layerControl = new L.control.layers(layerGroupings,null, { collapsed: false }).addTo(map);

In short, i have to bound custom marker control with my this layer group i mentioned, it should not appear on other layers.

1 Answer 1


Here is what you can do:

  1. Wrap all your base layers in L.LayerGroup and add these layer groups to L.Control.Layers.
  2. Store reference to current base layer by subscribing to baselayerchange event of a map.
  3. When you add new marker, add it to group of current base layer instead of directly on map

Here is an example: http://jsfiddle.net/parshin/uLyfqh1f/

  • Thanks for help,,,exactly i was looking for that........i really appreciate that
    – S.Zirk
    Commented Sep 16, 2015 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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