var map = L.map('map1');
var map = L.map('map2');
var map = L.map('map3');
Technically, yes, you have 3 maps; but you only care to "remember" one of them (map3). At this point in time, I'm going to assume you really do want 3 unique Leaflet instances in the DOM (I'll also go ahead and say, that's probably not the right decision).
First, my best guess is your using a JavaScript library that provides standard tab functionality. Which means your tabs aren't loading new pages (therefore, the unique ID requirement); instead you are merely hiding/showing DOM elements based on user events.
Your HTML was fine, so we'll use that again - our 3 elements. There's nothing special about these elements, they are just the individual pieces of paper we've been told to draw our maps on. In fact, I'm going to name mine a bit different just to reinforce that fact a bit:
<!-- Just sheets of paper we can draw on, nothing more -->
<div id="weather"></div>
<div id="population"></div>
<div id="healthcare"></div>
Now, our friend asks us to draw him a map on the sheet of paper labelled weather:
// Stop eating the crayons
var map = L.map('weather');
There you go buddy, at your request: we call this wonderful work of art: map!
Now, he wants us to draw some more - on the rest of our papers!
var map = L.map('population');
Another one done! I will call this one: map!
var map = L.map('healthcare');
And this one's called... map! Hrmmmm... we didn't really plan this out very well. How are we supposed to show anyone the first or second pages we drew on!? We could figure it out, given enough time, sure... but even then how are our friends going to ask us to show it to them? The only way for our friends to ask us to show them our first map is for them to describe it very well while we look through every single thing in our room for something that matches that description.
It would have been a lot easier if we had just named all of our maps something unique.
var weatherMap = L.map('weather');
var populationMap = L.map('population');
var healthcareMap - L.map('healthcare');
Even better - what if we set aside a special place just for our maps? Then not only would we know right where to go in our room to find them; we'd know that every single one of them was there. If a friend asked us for a map there's no need to go look in the closet, we know they are all in our folder right here:
var maps = [
L.map('weather'),
L.map('population'),
L.map('healthcare')
];
It can definitely get a lot better than that though. How you structure everything really just depends on the data you are working with and what, exactly, you are trying to accomplish.
Until somebody finds a better solution, here what I would do ...
As you noticed, leaflet is using pixel position to set zIndex (in Marker.js)
pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
this._zIndex = pos.y + this.options.zIndexOffset;
What I suggest is to undo leaflet zIndex using setZIndexOffset()
Say you want to set zIndex = 100, you would do
var pos = map.latLngToLayerPoint(marker.getLatLng()).round();
marker.setZIndexOffset(100 - pos.y);
There is a bit of a glitch: you have to do it every time the map is zoomed :(
Here is a JSFiddle example (comment the code in adjustZindex() to see the difference)
Best Answer
Yes, it is possible.
I suggest you have a look at the layer switching controls section of the leaflet plugins page; there are several plugins that implement complex layer controls, and maybe you can benefit from one of them.
Ultimately, you can create your own HTML input elements (checkboxes/radio buttons/drop-downs/etc), attach event listeners to their
changeevent, and calllayer.addTo(map)/layer.remove()as needed, keeping references to your instances ofL.Layer.