Multiple Leaflet maps on same page with same optio

Question

I'm pretty new to leaflet.js and I'm trying to figure out how to assign the same map with the same set of options and layers to a different HTML container instead of having to remove and add a new one every time?

I used to deal with Open layers 2.13 and I had map.render(div); option every time I wanted to set map to another div. Is there a solution similar to this? Many thanks!

Answer 1

You can, but you have to duplicate the layers

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// add the same OpenStreetMap tile layer to the second map
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map2);

http://jsfiddle.net/FranceImage/aj44r7v2/