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                 var sts;
  12                 var ws;
  13                 var map;
  14                 var markers;
  15                 var icon;
  16
  17                 function init() {
  18                         init_map();
  19                         sts = document.getElementById("sts");
  20                         sts.innerHTML = "uninitialized";
  21                         imei = document.getElementById("imei");
  22                         send = document.getElementById("send");
  23                         if (qimei) {
  24                                 imei.value = qimei;
  25                         }
  26                         open_ws();
  27                 }
  28
  29                 function init_map() {
  30                         map = new OpenLayers.Map ("map", {
  31                                 controls:[
  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,
  40                                 numZoomLevels: 19,
  41                                 units: 'm',
  42                                 projection: new OpenLayers.Projection(
  43                                                         "EPSG:900913"),
  44                                 displayProjection: new OpenLayers.Projection(
  45                                                         "EPSG:4326")
  46                         });
  47                         layerMapnik =
  48                           new OpenLayers.Layer.OSM.Mapnik("Mapnik");
  49                         map.addLayer(layerMapnik)
  50                         layerTransportMap =
  51                           new OpenLayers.Layer.OSM.TransportMap("TransportMap");
  52                         map.addLayer(layerTransportMap)
  53                         layerCycleMap =
  54                           new OpenLayers.Layer.OSM.CycleMap("CycleMap");
  55                         map.addLayer(layerCycleMap);
  56                         markers =
  57                           new OpenLayers.Layer.Markers("Markers");
  58                         map.addLayer(markers);
  59
  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);
  64
  65                         var lonLat =
  66                           new OpenLayers.LonLat(0, 0).transform(
  67                             new OpenLayers.Projection("EPSG:4326"),
  68                               map.getProjectionObject());
  69                         map.setCenter(lonLat, 1);
  70                 }
  71
  72                 function set_marker(lon, lat) {
  73                         console.log("setting marker at " + lon + ", " + lat)
  74                         var lonLat =
  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);
  80                 }
  81
  82                 function open_ws() {
  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;
  88                 }
  89                 function ws_onopen(event) {
  90                         console.log("ws opened " + event);
  91                         sts.innerHTML = "open";
  92                         imei.disabled = false;
  93                         send.disabled = false;
  94                         if (imei.value) {
  95                                 sendIMEI();
  96                         }
  97                 }
  98                 function ws_onmessage(event) {
  99                         console.log("message " + event.data);
 100                         msg = JSON.parse(event.data)
 101                         set_marker(+msg.longitude, +msg.latitude);
 102                 }
 103                 function ws_onerror(event) {
 104                         console.log("error " + event);
 105                         sts.innerHTML = "error";
 106                 }
 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);
 113                 }
 114
 115                 function sendIMEI() {
 116                         console.log("sending " + imei.value);
 117                         var msg = {
 118                                 imei: imei.value,
 119                                 type: "subscribe",
 120                                 date: Date.now()
 121                         };
 122                         ws.send(JSON.stringify(msg));
 123                         document.title = imei.value;
 124                         imei.value = "";
 125                 }
 126
 127                 function handleKey(evt) {
 128                         if (evt.keyCode === 13 || evt.keyCode === 14) {
 129                                 if (!imei.disabled) {
 130                                         sendIMEI();
 131                                 }
 132                         }
 133                 }
 134         </script>
 135
 136 </head>
 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>
 144         </div>
 145         <div style="width:100%; height:97%" id="map"></div>
 146         <div style="width:100%; height:1%" id="sts"></div>
 147 </body>
 148 </html>