-1

I am hoping there are some Leaflet experts here who can explain what I'm missing in the code below. I am only a hobbyist programmer so I apologize if my terminology doesn't make complete sense.

I was getting errors calling a function by clicking a marker added to a leaflet map. So, as shown below, I wrote a simple function to display a page alert when the marker is clicked. Strangely, when the webpage is loaded the alert is immediately triggered (displays image below).

enter image description here

</script>


<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin="">
</script>

<div id='map'></div>

<script>
    var map = L.map('map', { zoomSnap: 0.25}).setView([43.0000, -76.0000], 7.75);

    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);

    map.dragging.enable();
    map.touchZoom.enable();
    map.doubleClickZoom.enable();
    map.scrollWheelZoom.disable();
    map.boxZoom.enable();
    map.keyboard.disable();
    if (map.tap) map.tap.disable();
    document.getElementById('map').style.cursor='default';


function say(text){
    alert(text)
}

    var MARKER2 = L.marker([42.47975912090048, -77.46811214311259]).on('click', say("baron")).addTo(map);



    MARKER2.bindTooltip("Baron Winds", {permanent: true}).openTooltip();


</script>

I am wondering if it has something to do with opening the tooltips by default. I really need that behavior so, If that is the issue, any work arounds would be appreciated

  • M

06/11/24 Update:

Tried GrzegorzTs suggestion but clicking the marker still has no effect. Revised code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

<head>

<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin="">
</script>

</head>

<body>
    <style>
        #map { height: 1000px; }
        #map { width: 1400px; }
        /*{scroll-behavior: smooth;}*/
    </style>

<div id='map'></div>

<script>
    var map = L.map('map', { zoomSnap: 0.25}).setView([43.0000, -76.0000], 7.75);

    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);

    map.dragging.enable();
    map.touchZoom.enable();
    map.doubleClickZoom.enable();
    map.scrollWheelZoom.disable();
    map.boxZoom.enable();
    map.keyboard.disable();
    if (map.tap) map.tap.disable();
    document.getElementById('map').style.cursor='default';

    var MARKER2 = L.marker([42.47975912090048, -77.46811214311259]).on('click', function() {say("baron")}).addTo(map);
</script>

</body>
</html>
Improve this question
4
  • 2
    .on("click", () => say("baron")) or .on("click", function() { say("baron")})
    – Grzegorz T.
    Commented May 11 at 6:27
  • @GrzegorzT. thanks but finally got around to trying that and something is still keeping it from running.
    – mshamrock
    Commented Jun 11 at 19:36
  • @mshamrock I rolled back your edit because you removed the part that caused your problem (your incorrect definition of your click handler).
    – Jared Smith
    Commented Jun 11 at 19:49
  • @mshamrock this is a Q&A site, not an interactive tutorial site. Don't change the nature of your question, instead ask a new question.
    – Jared Smith
    Commented Jun 11 at 19:51

1 Answer 1

Reset to default
0

Ignore the 06/11/24 update... the suggestion works but still requires/relies on the global function "say":

function say(text){
    alert(text)
}
Improve this answer

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