1 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
3 <title>Location</title>
4 <script src="http://www.openlayers.org/api/OpenLayers.js">
6 <script src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
8 <script type="text/javascript">
9 const urlParams = new URLSearchParams(window.location.search);
10 const qimei = urlParams.get("imei");
12 const ourl = new URL(window.location);
13 const wsproto = ourl.protocol === "https" ? "wss" : "ws";
14 const wshost = ourl.hostname ? ourl.hostname : "localhost";
15 const wsport = ourl.port ? ourl.port : 5049;
17 const imeis = new Set();
18 const locations = new Array();
33 sts = document.getElementById("sts");
34 sts.innerHTML = "uninitialized";
35 imei = document.getElementById("imei");
36 send = document.getElementById("send");
37 clear = document.getElementById("clear");
38 subslist = document.getElementById("subslist");
39 tstamp = document.getElementById("tstamp");
47 map = new OpenLayers.Map ("map", {
49 new OpenLayers.Control.Navigation(),
50 new OpenLayers.Control.PanZoomBar(),
51 new OpenLayers.Control.LayerSwitcher(),
52 new OpenLayers.Control.Attribution()],
53 maxExtent: new OpenLayers.Bounds(
54 -20037508.34,-20037508.34,
55 20037508.34,20037508.34),
56 maxResolution: 156543.0399,
59 projection: new OpenLayers.Projection(
61 displayProjection: new OpenLayers.Projection(
65 new OpenLayers.Layer.OSM.Mapnik("Mapnik");
66 map.addLayer(layerMapnik)
68 new OpenLayers.Layer.OSM.TransportMap("TransportMap");
69 map.addLayer(layerTransportMap)
71 new OpenLayers.Layer.OSM.CycleMap("CycleMap");
72 map.addLayer(layerCycleMap);
74 new OpenLayers.Layer.Markers("Markers");
75 map.addLayer(markers);
77 var size = new OpenLayers.Size(21, 25);
78 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
79 icon = new OpenLayers.Icon(
80 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
83 new OpenLayers.LonLat(0, 0).transform(
84 new OpenLayers.Projection("EPSG:4326"),
85 map.getProjectionObject());
86 map.setCenter(lonLat, 1);
89 function set_marker(msg) {
90 if (locations.push(msg) > maxmarkers) {
93 console.log("new marker list " + JSON.stringify(locations));
94 tstamp.innerHTML = msg.timestamp;
96 // TODO: figure how to have multiple markers and/or track
97 for (const loc of locations) {
98 lonLat = new OpenLayers.LonLat(+loc.longitude,
99 +loc.latitude).transform(
100 new OpenLayers.Projection("EPSG:4326"),
101 map.getProjectionObject());
102 markers.addMarker(new OpenLayers.Marker(lonLat,icon));
104 map.setCenter(lonLat, 16);
108 wsurl = new URL("ws://localhost/");
109 wsurl.protocol = wsproto
110 wsurl.hostname = wshost
112 console.log("wsurl is " + wsurl)
113 ws = new WebSocket(wsurl);
114 ws.onopen = ws_onopen;
115 ws.onmessage = ws_onmessage;
116 ws.onerror = ws_onerror;
117 ws.onclose = ws_onclose;
119 function ws_onopen(event) {
120 console.log("ws opened " + event);
121 sts.innerHTML = "online";
122 imei.disabled = false;
123 send.disabled = false;
124 clear.disabled = false;
127 function ws_onmessage(event) {
128 console.log("message " + event.data);
129 set_marker(JSON.parse(event.data));
131 function ws_onerror(event) {
132 console.log("error " + event);
133 sts.innerHTML = "error: " + event;
135 function ws_onclose(event) {
136 console.log("close " + event);
137 sts.innerHTML = "offline";
138 imei.disabled = true;
139 send.disabled = true;
140 clear.disabled = true;
141 setTimeout(open_ws, 5000);
144 function sendIMEI(do_clear) {
149 imeis.add(imei.value);
152 const imstr = Array.from(imeis).join(",");
153 document.title = imstr;
154 subslist.innerHTML = imstr;
156 imei: Array.from(imeis),
161 console.log("sending" + JSON.stringify(msg));
162 ws.send(JSON.stringify(msg));
166 function handleKey(evt) {
167 if (evt.keyCode === 13 || evt.keyCode === 14) {
168 if (!imei.disabled) {
176 <body onload="init();">
177 <div style="width:100%; height:2%" id="hdr">
178 <input id="imei" type="text" name="imei"
179 size="16" maxlength="16" placeholder="Enter IMEI"
180 autocomplete="off" onkeyup="handleKey(event)">
181 <input type="button" id="send" name="send" value="Send"
182 onclick="sendIMEI(false)" disabled>
183 <input type="button" id="clear" name="clear" value="Clear"
184 onclick="sendIMEI(true)" disabled>
185 <span id="subslist"></span>
186 <span id="tstamp" style="float:right"></span>
188 <div style="width:100%; height:97%" id="map"></div>
189 <div style="width:100%; height:1%" id="sts"></div>