Jump to content

Leaflet Map In A Popup Window : No Tiles Load


phdphd

Recommended Posts

Hi All,

I have been struggling and googling for a few days and found no solution so far.

I have a leaflet map with clusters that helps user search for events in specific areas of a city. This map works correctly.

Below the map there are DIVs, where each DIV gathers information about a part of the events. Each DIV has a clickable icon.

When the user clicks an icon pertaining to one of those DIVs, I want to display another leaflet map in a printable popup window.

I could make this work with a Google static map (for which just a link is needed), but it turns out to be harder with leaflet.

Basically the window popup is built using « generator.document.write » pieces of code.

The issue I am facing is that no or just one tile loads.

Here is how the js code looks like :

 

function printinfo(el,el3){//el=hidden div in the main page, that contains another div (el3) where will be inserted the map.

document.getElementById(''+el3+'').innerHTML = "<div id='mymap' style='height:400pt;width:400pt;'></div>";

var tiles = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png', {
	attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
	minZoom: 1,
	maxZoom: 19
}),latlng = L.latLng(0.00, 0.00);


var map = L.map('mymap', {center: latlng, zoom: 19, layers: [tiles]});

/*here goes some code that feeds the map with markers and fits it to bounds*/

var generator=window.open('','name','height=1000,width=800,scrollbars=1');
generator.document.write('<!DOCTYPE html><html><head><title>Hello<\/title>');
generator.document.write('<link rel="stylesheet" href="xxxx" />');//here go all the links to css files, including leaflet ones
generator.document.write('<\/head><body>');
generator.document.write('<div onclick="javascript:print();" id="print_icon"><img  src="..\/images\/images_misc\/print.png" alt="" title=""><\/div>');
generator.document.write($("#"+el).html());
generator.document.write('<script>function print(){document.getElementById(\'print_icon\').style.display="none";setTimeout(function(){ window.print(); document.getElementById(\'print_icon\').style.display="block"}, 500);}</script><script src="../js/leaflet-src.js" ></script><script src="../js/leaflet.markercluster-src.js"></script>');
generator.document.write('<\/body><\/html>');
generator.document.close();
}

 

Thanks for your help!

 

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.