phdphd Posted December 19, 2018 Share Posted December 19, 2018 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.