0

I am trying to create a marker popup which replaces words like 'British Museum' with a link to fly to that museum on my Leaflet map. There are no problems with my variables so far and the link is registering the function call but the console just outputs an error saying that the function was not found.

item.description[1] = item.description[1].replace(artifact.name, `<a onclick="map.flyTo([51.519444, -0.126944], 4)">${artifact.name}</a>`);

Function calls like map.flyTo([51.519444, -0.126944], 4) work outside the link though but calling the function through the onclick attribute does not.

I already tried to call dummy functions in the onclick attribute which were not called, no matter where I put them in my index.js file. These dummy functions worked though when I called the dummy function through a script tag in the #map div in my index.html file.

<body>
    <div id="map">
        <script>
            function dummyFunction() {
                console.log("This one works.")
            }
        </script>
    </div>
</body>

<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="index.js" type="module"></script>

I also tried to use the click method.

item.description[1] = item.description[1].replace(artifact.name, `<a onclick="map.flyTo()">${artifact.name}</a>`).click(function () {alert("test");});

I also tried to implement it with querySelector as suggested in this answer.

item.description[1] = item.description[1].replace(artifact.name, `<a class="locationLink" onclick="map.flyTo()">${artifact.name}</a>`);
document.getElementsByClassName("locationLink").click(function () {alert("test");});

Thank you in advance.

WebSnke
  • 1
  • 4

0 Answers0