webdemo/index.html

   1 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
   2 <head>
   3         <title>Location</title>
   4         <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
   5         <script
   6           src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
   7         </script>
   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;
  14
  15                 var sts;
  16                 var ws;
  17                 var map;
  18                 var markers;
  19                 var icon;
  20
  21                 function init() {
  22                         init_map();
  23                         sts = document.getElementById("sts");
  24                         sts.innerHTML = "uninitialized";
  25                         imei = document.getElementById("imei");
  26                         send = document.getElementById("send");
  27                         if (qimei) {
  28                                 imei.value = qimei;
  29                         }
  30                         open_ws();
  31                 }
  32
  33                 function init_map() {
  34                         map = new OpenLayers.Map ("map", {
  35                                 controls:[
  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,
  44                                 numZoomLevels: 19,
  45                                 units: 'm',
  46                                 projection: new OpenLayers.Projection(
  47                                                         "EPSG:900913"),
  48                                 displayProjection: new OpenLayers.Projection(
  49                                                         "EPSG:4326")
  50                         });
  51                         layerMapnik =
  52                           new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  53                         map.addLayer(layerMapnik)
  54                         layerTransportMap =
  55                           new OpenLayers.Layer.OSM.TransportMap("TransportMap");
  56                         map.addLayer(layerTransportMap)
  57                         layerCycleMap =
  58                           new OpenLayers.Layer.OSM.CycleMap("CycleMap");
  59                         map.addLayer(layerCycleMap);
  60                         markers =
  61                           new OpenLayers.Layer.Markers("Markers");
  62                         map.addLayer(markers);
  63
  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);
  68
  69                         var lonLat =
  70                           new OpenLayers.LonLat(0, 0).transform(
  71                             new OpenLayers.Projection("EPSG:4326"),
  72                               map.getProjectionObject());
  73                         map.setCenter(lonLat, 1);
  74                 }
  75
  76                 function set_marker(lon, lat) {
  77                         console.log("setting marker at " + lon + ", " + lat)
  78                         var lonLat =
  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);
  84                 }
  85
  86                 function open_ws() {
  87                         wsurl = new URL("ws://localhost/");
  88                         wsurl.protocol = wsproto
  89                         wsurl.hostname = wshost
  90                         wsurl.port = wsport
  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;
  97                 }
  98                 function ws_onopen(event) {
  99                         console.log("ws opened " + event);
 100                         sts.innerHTML = "open";
 101                         imei.disabled = false;
 102                         send.disabled = false;
 103                         if (imei.value) {
 104                                 sendIMEI();
 105                         }
 106                 }
 107                 function ws_onmessage(event) {
 108                         console.log("message " + event.data);
 109                         msg = JSON.parse(event.data)
 110                         set_marker(+msg.longitude, +msg.latitude);
 111                 }
 112                 function ws_onerror(event) {
 113                         console.log("error " + event);
 114                         sts.innerHTML = "error";
 115                 }
 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);
 122                 }
 123
 124                 function sendIMEI() {
 125                         console.log("sending " + imei.value);
 126                         var msg = {
 127                                 imei: imei.value,
 128                                 type: "subscribe",
 129                                 date: Date.now()
 130                         };
 131                         ws.send(JSON.stringify(msg));
 132                         document.title = imei.value;
 133                         imei.value = "";
 134                 }
 135
 136                 function handleKey(evt) {
 137                         if (evt.keyCode === 13 || evt.keyCode === 14) {
 138                                 if (!imei.disabled) {
 139                                         sendIMEI();
 140                                 }
 141                         }
 142                 }
 143         </script>
 144
 145 </head>
 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>
 153         </div>
 154         <div style="width:100%; height:97%" id="map"></div>
 155         <div style="width:100%; height:1%" id="sts"></div>
 156 </body>
 157 </html>