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).
</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: '© <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: '© <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>
.on("click", () => say("baron"))
or.on("click", function() { say("baron")})