How do I add images (as a screenshot, for example) into individual popups on a Leaflet map hosted on GitHub?

[warrenwoodhouse]

🏷️ Discussion Type

Question

💬 Feature/Topic Area

Other

Body

Ref.: Map Link | RAW File

Hi everyone, my name is Warren and I’m new to the discussions forums on here but I’m not new to GitHub. I was wondering if anyone has any ideas, suggestions or any experiences in Leaflet maps, specifically CRS.simple, on how to add images (such as photos and screenshots) into individual popups of each markers on the map, the link is at the top as Map Link, for your convenience.

If you have any way of doing this, as for the life of me this past week, I have no clue on how to add images in popups, I would greatly appreciate any advice or help on this matter.

Happy coding everyone!

Warren

[lavneethora]

You should be able to add images directly inside the Leaflet popup using normal HTML. CRS.Simple should not really change anything with how the popup itself works.

For example, if you have something like:

L.marker([100, 200])
    .addTo(map)
    .bindPopup("Some text");

you can just put an <img> tag inside bindPopup():

L.marker([100, 200])
    .addTo(map)
    .bindPopup(`
        <div>
            <h3>Marker Title</h3>
            <img src="images/example.jpg"
                 alt="Screenshot"
                 style="width:250px; max-width:100%; height:auto;">
            <p>Some text here</p>
        </div>
    `);

If you are hosting it through GitHub Pages, I would probably keep the images inside the same repo and use relative paths.

Something like:

marthaisdead/
├── index.html
└── images/
    ├── image1.jpg
    ├── image2.jpg
    └── image3.jpg

Then for each marker you can just change the image path:

L.marker([100, 200]).addTo(map).bindPopup(`
    <img src="images/image1.jpg" style="width:250px; max-width:100%;">
`);

L.marker([150, 300]).addTo(map).bindPopup(`
    <img src="images/image2.jpg" style="width:250px; max-width:100%;">
`);

You can also control the popup size if the screenshots are large:

L.marker([100, 200])
    .addTo(map)
    .bindPopup(
        `<img src="images/image1.jpg" style="width:300px; max-width:100%;">`,
        { maxWidth: 320 }
    );

Basically, bindPopup() accepts HTML, so you can put images, text, links, headings, etc. inside each individual popup. Your CRS.Simple coordinates can stay the same.

I hope this helps!

[warrenwoodhouse]

Unfortunately my popup layout doesn’t use that. It’s more like this:

`. Location Database
const locations = [
// Points of Interests
{ id: "poi-1", name: "Family Home", type: "poi", y: 858, x: 132 },
{ id: "poi-2", name: "Family Church", type: "poi", y: 638, x: 252 },
{ id: "poi-3", name: "The Cemetery", type: "poi", y: 88, x: 288 },
{ id: "poi-4", name: "Crossroads", type: "poi", y: 494, x: 180 },
{ id: "poi-5", name: "Family Graveyard", type: "poi", y: 982, x: 510 },
{ id: "poi-6", name: "The Lake", type: "poi", y: 736, x: 1374 },
{ id: "poi-7", name: "The Island", type: "poi", y: 624, x: 1708 },
{ id: "poi-8", name: "Wine Cellar - Family Home", type: "poi", y: 736, x: 276 },
{ id: "poi-9", name: "House in The Woods", type: "poi", y: 778, x: 472 },
// Bunkers
{ id: "bunker-1", name: "Bunker", type: "bunker", y: 1018, x: 1372 },
// Camera Accessories
{ id: "cameraaccessory-1", name: "100 ISO Film (Chapter: The Room)", type: "cameraaccessory", y: 768, x: 206 },
{ id: "cameraaccessory-2", name: "Flash (Chapter: The Room)", type: "cameraaccessory", y: 858, x: 114 },
{ id: "cameraaccessory-3", name: "Tripod (Chapter: The Rolls)", type: "cameraaccessory", y: 764, x: 317 },
{ id: "cameraaccessory-4", name: "Infrared Lens & Film (Chapter: The Rolls)", type: "cameraaccessory", y: 798, x: 229 },
{ id: "cameraaccessory-5", name: "Macro Lens, Orange Filter & Blue Filter (Chapter: The Rolls)", type: "cameraaccessory", y: 763, x: 225 },
{ id: "cameraaccessory-6", name: "25 ISO Film (Chapter: The Woods)", type: "cameraaccessory", y: 845, x: 117 },
{ id: "cameraaccessory-7", name: "Focal Lens x0.5, Macro Lens & Focal Lens x2 (Chapter: The Woods)", type: "cameraaccessory", y: 774, x: 196 },
{ id: "cameraaccessory-8", name: "Red Filter (Chapter: The Woods)", type: "cameraaccessory", y: 760, x: 209 },
// IR Photos
{ id: "irphoto-1", name: "IR Photo 1", type: "irphoto", y: 749, x: 332 },
{ id: "irphoto-2", name: "IR Photo 2", type: "irphoto", y: 621, x: 251 },
{ id: "irphoto-3", name: "IR Photo 3", type: "irphoto", y: 477, x: 160 },
{ id: "irphoto-4", name: "IR Photo 4", type: "irphoto", y: 784, x: 1116 },
{ id: "irphoto-5", name: "IR Photo 5", type: "irphoto", y: 746, x: 656 },
{ id: "irphoto-6", name: "IR Photo 6", type: "irphoto", y: 532, x: 371 },
// IR Lady
{ id: "irlady-1", name: "IR Lady 1", type: "irlady", y: 871, x: 269 },
{ id: "irlady-2", name: "IR Lady 2", type: "irlady", y: 519, x: 309 },
{ id: "irlady-3", name: "IR Lady 3", type: "irlady", y: 786, x: 448 },
{ id: "irlady-4", name: "IR Lady 4", type: "irlady", y: 844, x: 793 },
// Side Quests
{ id: "side-1", name: "Telegraph Pole (Side Quest: Lapo's quest)", type: "side", y: 570, x: 186 },
{ id: "side-2", name: "Telegraph Machine (Side Quest: Lapo's quest)", type: "side", y: 906, x: 64 }
];

    // 6. Registry to look up markers by ID
    const markerRegistry = {};
    let currentOpenMarkerId = null;

    // 7. Initialize URL Parameters
    const urlParams = new URLSearchParams(window.location.search);
    const urlMarkerId = urlParams.get('marker');
    const urlFilters = urlParams.get('filters') ? urlParams.get('filters').split(',') : null;

    // 8. Add Markers & Populate Layer Groups
    locations.forEach(loc => {
        const popupContent = `
            <div>
                <strong>${loc.name}</strong><br>
                <small>ID: ${loc.id}</small><br>
                <button class="share-btn" onclick="copyShareableUrl('${loc.id}')">📋 Copy Share Link</button>
            </div>
        `;

        const marker = L.marker([loc.y, loc.x], { icon: customIcons[loc.type] }).bindPopup(popupContent);
        markerRegistry[loc.id] = { marker, type: loc.type, coords: [loc.y, loc.x] };

        if (filterGroups[loc.type]) {
            marker.addTo(filterGroups[loc.type].group);
        }

        // Update URL when a marker popup is opened/closed `

the methods you’ve shown would have worked if it was a different layout for the popup container. Any ideas on how I could add images in the containers in this way? I’ve added the markers to give you an idea.

Hmmm… maybe… would the images work if they were shown in Section 8 but not sure how it would work there though.

[warrenwoodhouse]

I think I have an idea from the methods you gave me. I’ll let you know if it works.

[warrenwoodhouse]

@lavneethora Your method worked, sort of. Here’s how it worked for me

.popup-image { width: 100%; height: auto; margin-bottom: 10px; border-radius: 4px; max-height: 250px; object-fit: cover; display: block; }
That needs to be added to the style section before the body tag

Then in each of the markers, this
. Location Database const locations = [ // Points of Interests { id: "poi-1", name: "Family Home", type: "poi", y: 858, x: 132, image: "images/image1.png" },

Now at the end of my index page, in Section 8, we can add this and that’s how it’s displayed now :)

8. Add Markers & Populate Layer Groups locations.forEach(loc => { const popupContent =

${loc.image ? <img src="${loc.image}" alt="${loc.name}" class="popup-image" onerror="this.style.display='none'"> : ''}`

It took some attempts at asking Copilot before it got it right. Now it works! Sweet! Anyways, thanks for the help.

[warrenwoodhouse]

const popupContent = `

${loc.name}

ID: ${loc.id}

📋 Copy Share Link

And if I add a loc.img and then add the url for each image in the markers, this will provide the image, right?