tower/raspi/node/webapp/map.html at master · araobp/tower · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>

<head>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
</head>

<body>

  <div id="map">
  </div>

  <script>
    // [Reference] https://wiki.openstreetmap.org/wiki/OpenLayers_Marker_Example

    function load(latitude, longitude, markerUrl) {

      var overlay = new OpenLayers.Layer.Vector('Overlay', {
        styleMap: new OpenLayers.StyleMap({
          externalGraphic: './marker.png',
          graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
          title: '${tooltip}'
        })
      });

      var myLocation = new OpenLayers.Geometry.Point(longitude, latitude)
        .transform('EPSG:4326', 'EPSG:3857');

      overlay.addFeatures([
        new OpenLayers.Feature.Vector(myLocation, { tooltip: 'OpenLayers' })
      ]);

      var popup = new OpenLayers.Popup.FramedCloud("Popup",
        myLocation.getBounds().getCenterLonLat(), null,
        '<a target="_blank" href=' + markerUrl + '>AI Webcam</a>', null,
        false // <-- true if we want a close (X) button, false otherwise
      );

      map = new OpenLayers.Map({
        div: "map", projection: "EPSG:3857",
        layers: [new OpenLayers.Layer.OSM(), overlay],
        center: myLocation.getBounds().getCenterLonLat(), zoom: 18
      });

      map.addPopup(popup);
    }

    let href = location.href;
    let origin = location.origin;
    let url = origin + '/sensor/gps/aicam';
    let urlAicam = origin + '/broadcast/aicam';

    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);

    xhr.send();

    xhr.onload = function () {

      if (xhr.status != 200) {
        alert(`Error ${xhr.status}: ${xhr.statusText}`);
      } else {
        let l = JSON.parse(xhr.response);
        load(l.latitude, l.longitude, urlAicam);
      }

    };

  </script>
</body>

</html>