I'm trying to embed a PDF document into a Leaflet map popup, so that the PDF displays within the popup balloon when the user clicks the map point.

I've attempted to place <embed src="mypdf.pdf" width="500px" height="500px" /> into the leaflet popup wrapper elements, but the <embed> element does not show the content of the PDF, it is just blank.

However, I can take this same <embed> element and place it anywhere else on the web page, outside of the Leaflet popup element, and it shows the PDF file as expected - pointing to a problem specific to the popup.

Is there a reason why the <embed> tag is not working inside of a popup?

  • have you tried using the PDF as an image and embedding that way? – MacroZED Jan 31 '18 at 9:24
  • What is your environment? Did you check for errors in console? I tested it in Win7 with IE11, Firefox and Chrome and it works OK. – TomazicM Jan 31 '18 at 18:42
  • I'm working on Win10 in Firefox. I'm not seeing any errors in the console. Can you show the contents of your example popup's <div class="leaflet-popup-content-wrapper"> element? – Bob Jan 31 '18 at 20:22
  • I tested also in Win10 with Edge, Firefox and Chrome. It worked. For IE11 I had to install Adobe Reader.My definition is simple: var myMarker = L.marker([39.744, -105.0043]).bindPopup('<embed src="test.pdf" width="200px" height="200px" />'); myMarker.addTo(map); – TomazicM Feb 1 '18 at 17:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.