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");
11 const wsproto = window.protocol === "https" ? "wss" : "ws";
12 const wshost = window.hostname ? window.hostname : "localhost";
13 const wsport = window.port ? window.port : 5049;
23 sts = document.getElementById("sts");
24 sts.innerHTML = "uninitialized";
25 imei = document.getElementById("imei");
26 send = document.getElementById("send");
34 map = new OpenLayers.Map ("map", {
36 new OpenLayers.Control.Navigation(),
37 new OpenLayers.Control.PanZoomBar(),
38 new OpenLayers.Control.LayerSwitcher(),
39 new OpenLayers.Control.Attribution()],
40 maxExtent: new OpenLayers.Bounds(
41 -20037508.34,-20037508.34,
42 20037508.34,20037508.34),
43 maxResolution: 156543.0399,
46 projection: new OpenLayers.Projection(
48 displayProjection: new OpenLayers.Projection(
52 new OpenLayers.Layer.OSM.Mapnik("Mapnik");
53 map.addLayer(layerMapnik)
55 new OpenLayers.Layer.OSM.TransportMap("TransportMap");
56 map.addLayer(layerTransportMap)
58 new OpenLayers.Layer.OSM.CycleMap("CycleMap");
59 map.addLayer(layerCycleMap);
61 new OpenLayers.Layer.Markers("Markers");
62 map.addLayer(markers);
64 var size = new OpenLayers.Size(21, 25);
65 var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
66 icon = new OpenLayers.Icon(
67 'https://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
70 new OpenLayers.LonLat(0, 0).transform(
71 new OpenLayers.Projection("EPSG:4326"),
72 map.getProjectionObject());
73 map.setCenter(lonLat, 1);
76 function set_marker(lon, lat) {
77 console.log("setting marker at " + lon + ", " + lat)
79 new OpenLayers.LonLat(lon, lat).transform(
80 new OpenLayers.Projection("EPSG:4326"),
81 map.getProjectionObject());
82 markers.addMarker(new OpenLayers.Marker(lonLat,icon));
83 map.setCenter(lonLat, 16);
87 wsurl = new URL("ws://localhost/");
88 wsurl.protocol = wsproto
89 wsurl.hostname = wshost
91 console.log("wsurl is " + wsurl)
92 ws = new WebSocket(wsurl);
93 ws.onopen = ws_onopen;
94 ws.onmessage = ws_onmessage;
95 ws.onerror = ws_onerror;
96 ws.onclose = ws_onclose;
98 function ws_onopen(event) {
99 console.log("ws opened " + event);
100 sts.innerHTML = "open";
101 imei.disabled = false;
102 send.disabled = false;
107 function ws_onmessage(event) {
108 console.log("message " + event.data);
109 msg = JSON.parse(event.data)
110 set_marker(+msg.longitude, +msg.latitude);
112 function ws_onerror(event) {
113 console.log("error " + event);
114 sts.innerHTML = "error";
116 function ws_onclose(event) {
117 console.log("close " + event);
118 sts.innerHTML = "closed";
119 imei.disabled = true;
120 send.disabled = true;
121 setTimeout(open_ws, 5000);
124 function sendIMEI() {
125 console.log("sending " + imei.value);
131 ws.send(JSON.stringify(msg));
132 document.title = imei.value;
136 function handleKey(evt) {
137 if (evt.keyCode === 13 || evt.keyCode === 14) {
138 if (!imei.disabled) {
146 <body onload="init();">
147 <div style="width:100%; height:2%" id="hdr">
148 <input id="imei" type="text" name="imei"
149 size="16" maxlength="16" placeholder="Enter IMEI"
150 autocomplete="off" onkeyup="handleKey(event)">
151 <input type="button" id="send" name="send" value="Send"
152 onclick="sendIMEI()" disabled>
154 <div style="width:100%; height:97%" id="map"></div>
155 <div style="width:100%; height:1%" id="sts"></div>