Implement Leaflet #6906

mal0andre · 2023-12-27T15:03:09Z

mal0andre
Dec 27, 2023

Issue with Implementing Leaflet: JavaScript Not Working

Problem Description

I am attempting to implement Leaflet in my HTML page, but I am encountering issues with the JavaScript part. The CSS seems to be functioning correctly. The page is in raw HTML, with the script in the script section and the CSS in the CSS section.

Code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.min.js"></script>
    <script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.css"></script>

    <style>
        #map {
            background-color: #2C519A;
        }
    </style>
</head>

<body>

    <div id="map" style="height: 95vh;"></div>

    <script>
        var map = L.map('map').setView([0, 0], 2);

        var imageUrl = 'image.png';
        var imageBounds = [[-910.5, -200.5], [910.5, 200.5]];

        L.imageOverlay(imageUrl, imageBounds).addTo(map);
        marker.bindPopup("<b>Point d'intérêt</b><br>Texte descriptif.").openPopup();  // Issue: 'marker' is not defined.

        var searchControl = new L.Control.GeoSearch({
            provider: new L.GeoSearch.Provider.OpenStreetMap(),
        });
        map.addControl(searchControl);
    </script>

</body>

</html>

someone had previously asked for something similar without any response (#6850)

thanks

I'd appreciate your help, have a nice day

DavGifford · 2024-02-02T16:49:10Z

DavGifford
Feb 2, 2024

Hey, I figured out a not-great-but-works workaround, using iframe to display a single page GitHub Pages site that is just the leaflet.js map.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Leaflet #6906

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Implement Leaflet #6906

mal0andre Dec 27, 2023

Issue with Implementing Leaflet: JavaScript Not Working

Problem Description

Code

Replies: 1 comment

DavGifford Feb 2, 2024

mal0andre
Dec 27, 2023

DavGifford
Feb 2, 2024