title: How do we add same shapefiles on two or more leaflet maps on same page?
body: <p>I have two Leaflet maps on the same page and I am trying to load the same shapefile on both of them. On the first one it gets loaded and displayed while on the other it gets loaded but not displayed.</p>
  
  <pre><code>mymap = L.map('map_container').setView([24.379311, 88.041001], 15);
  mymap2 = L.map('map_container2').setView([24.379311, 88.041001], 15);
  
  L.tileLayer(
       '', {
          maxZoom: 18,
          minZoom:1,
  }).addTo(mymap);
  
  L.tileLayer(
       '', {
          maxZoom: 18,
          minZoom:1,
  }).addTo(mymap2);
  
  shpfile = new L.Shapefile('js/world/TM_WORLD_BORDERS-0.3', {
      style: stateStyle
  });
  shpfile.addTo(mymap);
  shpfile.once("data:loaded", function() {
      console.log("finished loaded shapefile");
  });
  
  shpfile2 = new L.Shapefile('js/world/TM_WORLD_BORDERS-0.3', {
      style: stateStyle
  });
  shpfile2.addTo(mymap2);
  shpfile2.once("data:loaded", function() {
      console.log("finished loaded shapefile2");
  });
  </code></pre>
  
  <p>So in 'mymap' its getting loaded and displayed but in 'mymap2' its just getting loaded but not displayed.</p>
  
  <p>The markers and everything is getting displayed on both of them, its just an issue with the shapefiles.</p>
  
  <p>Can someone please guide me through it?</p>
  
  <p>Thanks.</p>