I have a series of tabs running down the left hand of my page and on each page I have a leaflet map. Each map is based on the choropleth example but I'm running into problems. Only one of the three maps enables me to do the custom info call to put the attributes into the info panel.

I've quickly worked out that each map has to have its own 'map' ID e.g

<div id="map1"></div>
...var map = L.map('map1').setView([37.8, -96], 4);...
<div id="map2"></div>
...var map = L.map('map2').setView([37.8, -96], 4);...
<div id="map3"></div>
...var map = L.map('map3').setView([37.8, -96], 4);...

so I'm guessing that I would need to make each instance of the info.onAdd function unique? I've played around do this but with no luck.

var info = L.control();
info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    return this._div;
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');

1 Answer 1

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 = [

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.

  • 5
    oops.. I'm facing the same problem. but having unique map variable names also doesn't help. any updates on this?
    – manas
    Commented Apr 20, 2014 at 17:41

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.