[GIS] how to bound markers with base layers : leaflet

Question

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

Script

//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);
});
}).addTo(map);

//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.

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/