<html>
<head>
<title>Web App: Leaflet Map</title>
<script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="/b4j_ws.js"></script>
<script>
$( document ).ready(function() {
b4j_connect("/ws");
});
</script>
</head>
<body>
<h1>Web App: Leaflet Map example</h1>
<p>
<input type="radio" name="goto" value="0" checked>Anywhere Software<br/>
<input type="radio" name="goto" value="1">eurojams last exit<br/>
<button id="btngoto">GoTo</button>
</p>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
<script>
var map = L.map("map").setView([46.947, 7.4448], 12);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
function gtlatlon(lat, lon, zoom, txt) {
map.setView([lat, lon], zoom); // The function goto latlon
L.marker([lat, lon]).addTo(map).bindPopup(txt).openPopup();
}
var marker = new L.Marker([46.947, 7.4448]).on('click', markerOnClick).addTo(map);
function markerOnClick(e)
{
alert("hi. you clicked the marker at " + e.latlng);
}
</script>
</html>