phdphd Posted December 19, 2018 Share Posted December 19, 2018 (edited) 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! Edited December 19, 2018 by phdphd Quote Link to comment https://forums.phpfreaks.com/topic/308048-leaflet-map-in-a-popup-window-no-tiles-load/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.