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"></script>
6 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");
19 sts = document.getElementById("sts");
20 sts.innerHTML = "uninitialized";
21 imei = document.getElementById("imei");
22 send = document.getElementById("send");
30 map = new OpenLayers.Map ("map", {
32 new OpenLayers.Control.Navigation(),
33 new OpenLayers.Control.PanZoomBar(),
34 new OpenLayers.Control.LayerSwitcher(),
35 new OpenLayers.Control.Attribution()],
36 maxExtent: new OpenLayers.Bounds(
37 -20037508.34,-20037508.34,
38 20037508.34,20037508.34),
39 maxResolution: 156543.0399,
42 projection: new OpenLayers.Projection(
44 displayProjection: new OpenLayers.Projection(
48 new OpenLayers.Layer.OSM.Mapnik("Mapnik");
49 map.addLayer(layerMapnik)
51 new OpenLayers.Layer.OSM.TransportMap("TransportMap");
52 map.addLayer(layerTransportMap)
54 new OpenLayers.Layer.OSM.CycleMap("CycleMap");
55 map.addLayer(layerCycleMap);
57 new OpenLayers.Layer.Markers("Markers");
58 map.addLayer(markers);
60 var size = new OpenLayers.Size(21, 25);
61 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
62 icon = new OpenLayers.Icon(
63 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
66 new OpenLayers.LonLat(0, 0).transform(
67 new OpenLayers.Projection("EPSG:4326"),
68 map.getProjectionObject());
69 map.setCenter(lonLat, 1);
72 function set_marker(lon, lat) {
73 console.log("setting marker at " + lon + ", " + lat)
75 new OpenLayers.LonLat(lon, lat).transform(
76 new OpenLayers.Projection("EPSG:4326"),
77 map.getProjectionObject());
78 markers.addMarker(new OpenLayers.Marker(lonLat,icon));
79 map.setCenter(lonLat, 16);
83 ws = new WebSocket("ws://localhost:5049");
84 ws.onopen = ws_onopen;
85 ws.onmessage = ws_onmessage;
86 ws.onerror = ws_onerror;
87 ws.onclose = ws_onclose;
89 function ws_onopen(event) {
90 console.log("ws opened " + event);
91 sts.innerHTML = "open";
92 imei.disabled = false;
93 send.disabled = false;
98 function ws_onmessage(event) {
99 console.log("message " + event.data);
100 msg = JSON.parse(event.data)
101 set_marker(+msg.longitude, +msg.latitude);
103 function ws_onerror(event) {
104 console.log("error " + event);
105 sts.innerHTML = "error";
107 function ws_onclose(event) {
108 console.log("close " + event);
109 sts.innerHTML = "closed";
110 imei.disabled = true;
111 send.disabled = true;
112 setTimeout(open_ws, 5000);
115 function sendIMEI() {
116 console.log("sending " + imei.value);
122 ws.send(JSON.stringify(msg));
123 document.title = imei.value;
127 function handleKey(evt) {
128 if (evt.keyCode === 13 || evt.keyCode === 14) {
129 if (!imei.disabled) {
137 <body onload="init();">
138 <div style="width:100%; height:2%" id="hdr">
139 <input id="imei" type="text" name="imei"
140 size="16" maxlength="16" placeholder="Enter IMEI"
141 autocomplete="off" onkeyup="handleKey(event)">
142 <input type="button" id="send" name="send" value="Send"
143 onclick="sendIMEI()" disabled>
145 <div style="width:100%; height:97%" id="map"></div>
146 <div style="width:100%; height:1%" id="sts"></div>