<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web App: Leaflet Map</title>
<link rel="stylesheet" href ="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="/b4j_ws.js"></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>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?
access_token={accessToken}', {
attribution: 'Β© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> Β© <a
href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a
href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: 'mapbox/streets-v11',
accessToken: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
}).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();
}
</script>
<script>
//connect to the web socket when the page is ready.
$( document ).ready(function() {
b4j_connect("/ws");
});
</script>
</body>