4

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?

Improve this question
4
  • have you tried using the PDF as an image and embedding that way?
    – MacroZED
    Commented Jan 31, 2018 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
    Commented Jan 31, 2018 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
    Commented Jan 31, 2018 at 20:22
  • 1
    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
    Commented Feb 1, 2018 at 17:13

1 Answer 1

Reset to default
1

I had a similar issue and was able to solve it based on the solution written by @TomazicM in the comment. In case someone else is looking for a solution in embedding a pdf file in the popup window on a leaflet map. Below is a complete sample code .

PS remember to change the pdf url. --> (src="/static/test.pdf" width="200px" height="200px")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="customstyle.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"

     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
    crossorigin=""></script>
    <title>TestMap</title>
</head>
<style>
    #map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
    <div id="map"></div>
    
</body>
<script>

var map = L.map('map').setView([ 51.5, -0.09], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup('<b>Hello world!</b><br>I am a popup. <br> <embed src="/static/test.pdf" width="200px" height="200px" />')


</script>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.