CODEWITHSUNDEEP
javascriptleaflet
Mark Bottom
Mark Bottom

Reputation: 57

How to show an image and a link on a popup when clicking on a leaflet marker?

Currently, I have this code to show an image on a popup when clicking on the marker:

const marker3 = L.marker([22.78257, -94.5612], {icon: redIcon}).on('click', onClick2).addTo(map);

// When click on red marker, open popup with the image
function onClick2(e) {
    popupContent = document.createElement("img");
    popupContent.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png";
    marker3.bindPopup(popupContent, {
        maxWidth: "auto"
    });
}

I want to also show a link to the image on the popup, so that when clicked, it can be displayed full size on a new tab on the browser. Preferable the link is edited or something, so that it does not take much space on the screen.

Upvotes: 2

Views: 2184

Answers (2)

Alexander Farber
Alexander Farber

Reputation: 22958

Here a jsFiddle demo for you, click at the blue marker to display a popup with a clickable image:

animated open street map with a marker and popup

The Javascript code is very simple:

  • First you put the HTML content of the popup into the popupContent string
  • Then you create a map with OpenStreetMap tiles
  • Finally you create a marker with popup and attach it to the map

'use strict';

var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png';
var popupContent = 'Click the image to display it in full size:<br>' +
                    '<a href="' + imageUrl + '" target="_blank"><img src="' + imageUrl + '"></a>';

var startPosition = [51.4661, 7.2491];
var map = L.map('map').setView(startPosition, 14);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker(startPosition)
  .bindPopup(popupContent)
  .addTo(map);
html, body { 
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
}

a > img {
  border: 4px dashed blue;  
  max-height: 80px;
  max-width: 100px;
  padding: 4px;
}
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="map"></div>

Note, that opening a new browser tab might be blocked at Stackoverflow...

Upvotes: 0

pond27
pond27

Reputation: 278

How about changing the popupContent like below so that you can change the popup content flexibly? (The link should work in your environment.)

Also, I think onClick function is not necessary.

const src = "https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Stack_Exchange_logo_and_wordmark.svg/375px-Stack_Exchange_logo_and_wordmark.svg.png";
const popupContent = document.createElement("div")
popupContent.innerHTML = "<img src='" + src + "'>"
                       + "<a target='_blank' href='" + src + "'>See the image</a>"

const map = L.map('map').setView([10, 20]);
const marker = L.marker([10, 20]).bindPopup(
    popupContent,
    { maxWidth: "auto" }
).addTo(map);
#map {
    height: 360px;
}
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</head>
<body>
    <div id="map"></div>
</body>

Upvotes: 1

Related Questions