GoogleMaps.html

﻿<!DOCTYPE html>
<html>
<head>
  <title>Google Maps</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    #mapview {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <style type="text/css">
    #legend {
      background: rgba(0, 0, 0, 0);
      font-size: 18px;
      font-family: Arial, sans-serif;
    }

    .color {
      border: 1px solid;
      height: 20px;
      width: 15px;
      margin-right: 3px;
      float: left;
    }

    .c1 {
      background: #a50026;
    }

    .c2 {
      background: #d73027;
    }

    .c3 {
      background: #f46d43;
    }

    .c4 {
      background: #fdae61;
    }

    .c5 {
      background: #fee08b;
    }

    .c6 {
      background: #d9ef8b;
    }

    .c7 {
      background: #a6d96a;
    }

    .c8 {
      background: #66bd63;
    }

    .c9 {
      background: #1a9850;
    }

    .c10 {
      background: #006837;
    }
  </style>

</head>
<body>
  <div id="mapview"></div>
  <script>
    /****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Copyright (C) 2014 Klarälvdalens Datakonsult AB, a KDAB Group company, info@kdab.com, author Milian Wolff <milian.wolff@kdab.com>
** Contact: https://www.qt.io/licensing/
**
** This file is part of the QtWebChannel module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of The Qt Company Ltd nor the names of its
**     contributors may be used to endorse or promote products derived
**     from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/

    "use strict";

    var QWebChannelMessageTypes = {
      signal: 1,
      propertyUpdate: 2,
      init: 3,
      idle: 4,
      debug: 5,
      invokeMethod: 6,
      connectToSignal: 7,
      disconnectFromSignal: 8,
      setProperty: 9,
      response: 10,
    };

    var QWebChannel = function (transport, initCallback) {
      if (typeof transport !== "object" || typeof transport.send !== "function") {
        console.error("The QWebChannel expects a transport object with a send function and onmessage callback property." +
          " Given is: transport: " + typeof (transport) + ", transport.send: " + typeof (transport.send));
        return;
      }

      var channel = this;
      this.transport = transport;

      this.send = function (data) {
        if (typeof (data) !== "string") {
          data = JSON.stringify(data);
        }
        channel.transport.send(data);
      }

      this.transport.onmessage = function (message) {
        var data = message.data;
        if (typeof data === "string") {
          data = JSON.parse(data);
        }
        switch (data.type) {
          case QWebChannelMessageTypes.signal:
            channel.handleSignal(data);
            break;
          case QWebChannelMessageTypes.response:
            channel.handleResponse(data);
            break;
          case QWebChannelMessageTypes.propertyUpdate:
            channel.handlePropertyUpdate(data);
            break;
          default:
            console.error("invalid message received:", message.data);
            break;
        }
      }

      this.execCallbacks = {};
      this.execId = 0;
      this.exec = function (data, callback) {
        if (!callback) {
          // if no callback is given, send directly
          channel.send(data);
          return;
        }
        if (channel.execId === Number.MAX_VALUE) {
          // wrap
          channel.execId = Number.MIN_VALUE;
        }
        if (data.hasOwnProperty("id")) {
          console.error("Cannot exec message with property id: " + JSON.stringify(data));
          return;
        }
        data.id = channel.execId++;
        channel.execCallbacks[data.id] = callback;
        channel.send(data);
      };

      this.objects = {};

      this.handleSignal = function (message) {
        var object = channel.objects[message.object];
        if (object) {
          object.signalEmitted(message.signal, message.args);
        } else {
          console.warn("Unhandled signal: " + message.object + "::" + message.signal);
        }
      }

      this.handleResponse = function (message) {
        if (!message.hasOwnProperty("id")) {
          console.error("Invalid response message received: ", JSON.stringify(message));
          return;
        }
        channel.execCallbacks[message.id](message.data);
        delete channel.execCallbacks[message.id];
      }

      this.handlePropertyUpdate = function (message) {
        for (var i in message.data) {
          var data = message.data[i];
          var object = channel.objects[data.object];
          if (object) {
            object.propertyUpdate(data.signals, data.properties);
          } else {
            console.warn("Unhandled property update: " + data.object + "::" + data.signal);
          }
        }
        channel.exec({ type: QWebChannelMessageTypes.idle });
      }

      this.debug = function (message) {
        channel.send({ type: QWebChannelMessageTypes.debug, data: message });
      };

      channel.exec({ type: QWebChannelMessageTypes.init }, function (data) {
        for (var objectName in data) {
          var object = new QObject(objectName, data[objectName], channel);
        }
        // now unwrap properties, which might reference other registered objects
        for (var objectName in channel.objects) {
          channel.objects[objectName].unwrapProperties();
        }
        if (initCallback) {
          initCallback(channel);
        }
        channel.exec({ type: QWebChannelMessageTypes.idle });
      });
    };

    function QObject(name, data, webChannel) {
      this.__id__ = name;
      webChannel.objects[name] = this;

      // List of callbacks that get invoked upon signal emission
      this.__objectSignals__ = {};

      // Cache of all properties, updated when a notify signal is emitted
      this.__propertyCache__ = {};

      var object = this;

      // ----------------------------------------------------------------------

      this.unwrapQObject = function (response) {
        if (response instanceof Array) {
          // support list of objects
          var ret = new Array(response.length);
          for (var i = 0; i < response.length; ++i) {
            ret[i] = object.unwrapQObject(response[i]);
          }
          return ret;
        }
        if (!response
          || !response["__QObject*__"]
          || response.id === undefined) {
          return response;
        }

        var objectId = response.id;
        if (webChannel.objects[objectId])
          return webChannel.objects[objectId];

        if (!response.data) {
          console.error("Cannot unwrap unknown QObject " + objectId + " without data.");
          return;
        }

        var qObject = new QObject(objectId, response.data, webChannel);
        qObject.destroyed.connect(function () {
          if (webChannel.objects[objectId] === qObject) {
            delete webChannel.objects[objectId];
            // reset the now deleted QObject to an empty {} object
            // just assigning {} though would not have the desired effect, but the
            // below also ensures all external references will see the empty map
            // NOTE: this detour is necessary to workaround QTBUG-40021
            var propertyNames = [];
            for (var propertyName in qObject) {
              propertyNames.push(propertyName);
            }
            for (var idx in propertyNames) {
              delete qObject[propertyNames[idx]];
            }
          }
        });
        // here we are already initialized, and thus must directly unwrap the properties
        qObject.unwrapProperties();
        return qObject;
      }

      this.unwrapProperties = function () {
        for (var propertyIdx in object.__propertyCache__) {
          object.__propertyCache__[propertyIdx] = object.unwrapQObject(object.__propertyCache__[propertyIdx]);
        }
      }

      function addSignal(signalData, isPropertyNotifySignal) {
        var signalName = signalData[0];
        var signalIndex = signalData[1];
        object[signalName] = {
          connect: function (callback) {
            if (typeof (callback) !== "function") {
              console.error("Bad callback given to connect to signal " + signalName);
              return;
            }

            object.__objectSignals__[signalIndex] = object.__objectSignals__[signalIndex] || [];
            object.__objectSignals__[signalIndex].push(callback);

            if (!isPropertyNotifySignal && signalName !== "destroyed") {
              // only required for "pure" signals, handled separately for properties in propertyUpdate
              // also note that we always get notified about the destroyed signal
              webChannel.exec({
                type: QWebChannelMessageTypes.connectToSignal,
                object: object.__id__,
                signal: signalIndex
              });
            }
          },
          disconnect: function (callback) {
            if (typeof (callback) !== "function") {
              console.error("Bad callback given to disconnect from signal " + signalName);
              return;
            }
            object.__objectSignals__[signalIndex] = object.__objectSignals__[signalIndex] || [];
            var idx = object.__objectSignals__[signalIndex].indexOf(callback);
            if (idx === -1) {
              console.error("Cannot find connection of signal " + signalName + " to " + callback.name);
              return;
            }
            object.__objectSignals__[signalIndex].splice(idx, 1);
            if (!isPropertyNotifySignal && object.__objectSignals__[signalIndex].length === 0) {
              // only required for "pure" signals, handled separately for properties in propertyUpdate
              webChannel.exec({
                type: QWebChannelMessageTypes.disconnectFromSignal,
                object: object.__id__,
                signal: signalIndex
              });
            }
          }
        };
      }

      /**
       * Invokes all callbacks for the given signalname. Also works for property notify callbacks.
       */
      function invokeSignalCallbacks(signalName, signalArgs) {
        var connections = object.__objectSignals__[signalName];
        if (connections) {
          connections.forEach(function (callback) {
            callback.apply(callback, signalArgs);
          });
        }
      }

      this.propertyUpdate = function (signals, propertyMap) {
        // update property cache
        for (var propertyIndex in propertyMap) {
          var propertyValue = propertyMap[propertyIndex];
          object.__propertyCache__[propertyIndex] = propertyValue;
        }

        for (var signalName in signals) {
          // Invoke all callbacks, as signalEmitted() does not. This ensures the
          // property cache is updated before the callbacks are invoked.
          invokeSignalCallbacks(signalName, signals[signalName]);
        }
      }

      this.signalEmitted = function (signalName, signalArgs) {
        invokeSignalCallbacks(signalName, signalArgs);
      }

      function addMethod(methodData) {
        var methodName = methodData[0];
        var methodIdx = methodData[1];
        object[methodName] = function () {
          var args = [];
          var callback;
          for (var i = 0; i < arguments.length; ++i) {
            if (typeof arguments[i] === "function")
              callback = arguments[i];
            else
              args.push(arguments[i]);
          }

          webChannel.exec({
            "type": QWebChannelMessageTypes.invokeMethod,
            "object": object.__id__,
            "method": methodIdx,
            "args": args
          }, function (response) {
            if (response !== undefined) {
              var result = object.unwrapQObject(response);
              if (callback) {
                (callback)(result);
              }
            }
          });
        };
      }

      function bindGetterSetter(propertyInfo) {
        var propertyIndex = propertyInfo[0];
        var propertyName = propertyInfo[1];
        var notifySignalData = propertyInfo[2];
        // initialize property cache with current value
        // NOTE: if this is an object, it is not directly unwrapped as it might
        // reference other QObject that we do not know yet
        object.__propertyCache__[propertyIndex] = propertyInfo[3];

        if (notifySignalData) {
          if (notifySignalData[0] === 1) {
            // signal name is optimized away, reconstruct the actual name
            notifySignalData[0] = propertyName + "Changed";
          }
          addSignal(notifySignalData, true);
        }

        Object.defineProperty(object, propertyName, {
          configurable: true,
          get: function () {
            var propertyValue = object.__propertyCache__[propertyIndex];
            if (propertyValue === undefined) {
              // This shouldn't happen
              console.warn("Undefined value in property cache for property \"" + propertyName + "\" in object " + object.__id__);
            }

            return propertyValue;
          },
          set: function (value) {
            if (value === undefined) {
              console.warn("Property setter for " + propertyName + " called with undefined value!");
              return;
            }
            object.__propertyCache__[propertyIndex] = value;
            webChannel.exec({
              "type": QWebChannelMessageTypes.setProperty,
              "object": object.__id__,
              "property": propertyIndex,
              "value": value
            });
          }
        });

      }

      // ----------------------------------------------------------------------

      data.methods.forEach(addMethod);

      data.properties.forEach(bindGetterSetter);

      data.signals.forEach(function (signal) { addSignal(signal, false); });

      for (var name in data.enums) {
        object[name] = data.enums[name];
      }
    }

    //required for use with nodejs
    if (typeof module === 'object') {
      module.exports = {
        QWebChannel: QWebChannel
      };
    }
  </script>
  <script>
    var map;
    var sv;
    var svf = 0;
    var polyline;
    var polylines = [];
    var curLatLon = "";
    var interpolate = false;
    var samples_markers = [];
    var results_markers = [];
    var legendTitle = 'SVF'
    var EARTH_RADIUS = 6378137;
    var rectangle = null;
    var isInterp = false;
    var waiting = false;
    var mainWin;
    new QWebChannel(qt.webChannelTransport, function (channel) {
      mainWin = channel.objects.mainWin;
    });
    var colors = ['rgb(165,0,38)', 'rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,139)', 'rgb(217,239,139)', 'rgb(166,217,106)', 'rgb(102,189,99)', 'rgb(26,152,80)', 'rgb(0,104,55)'];
    function degs2radians(degs) {
      return degs * (Math.PI / 180.0);
    }
    function great_circle_distance(lat1, lon1, lat2, lon2) {
      dLat = degs2radians(lat2 - lat1);
      dLon = degs2radians(lon2 - lon1);
      a = (Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(degs2radians(lat1)) * Math.cos(degs2radians(lat2)) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2));
      c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      d = EARTH_RADIUS * c;
      return d;
    }
    function getColor(val) {
      idx = Math.floor(val * 10);
      //alert(val.toString() + "," + idx.toString() + "," + colors[idx].toString())
      if (idx < 0)
        idx = 0;
      if (idx > 9)
        idx = 9;
      return colors[idx];
      //r = Math.round(val * 255.0);
      //g = Math.round((1.0 - val) * 255.0);
      //color = 'rgb(' + r + ', ' + g + ', ' + '0)';
      ////alert(color);
      //return 'rgb(' + r + ', ' + g + ', ' + '0)';
    }
    function initMap() {
      initLon = -76.61488182;
      initLat = 39.28950776;
      sv = new google.maps.StreetViewService();
      map = new google.maps.Map(document.getElementById('mapview'), {
        center: { lat: initLat, lng: initLon },
        streetViewControl: true,
        zoom: 15
      });

      google.maps.event.addListener(map, 'rightclick', function (event) {
        rightClickCallback(event.latLng);
      });

      google.maps.event.addListener(map, 'click', function (event) {
        leftClickCallback(event.latLng);
      });

      google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
        google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
          google.maps.event.trigger(map, 'resize');
        });
      });
      //google.maps.event.trigger(panorama, 'resize');
      mainWin.loadCache("");
      function leftClickCallback(pnt) {
        this.curLatLon = pnt
        mainWin.leftClick(pnt.lat() + "," + pnt.lng() + "," + pnt);
      }
      function rightClickCallback(pnt) {
        mainWin.rightClick(pnt.lat() + "," + pnt.lng() + "," + pnt);
      }

      // Adds a marker to the map and push to the array.
      createLegend();
    }
 
    function createLegend() {
      map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
      // Create the legend and display on the map
      var legend = document.createElement('div');
      legend.id = 'legend';
      var legendContent = []
      legendContent.push('<h3>' + legendTitle +' </h3>');
      legendContent.push('<p><div class="color c10"></div>0.9-1.0</p>');
      legendContent.push('<p><div class="color c9"></div>0.8-0.9</p>');
      legendContent.push('<p><div class="color c8"></div>0.7-0.8</p>');
      legendContent.push('<p><div class="color c7"></div>0.6-0.7</p>');
      legendContent.push('<p><div class="color c6"></div>0.5-0.6</p>');
      legendContent.push('<p><div class="color c5"></div>0.4-0.5</p>');
      legendContent.push('<p><div class="color c4"></div>0.3-0.4</p>');
      legendContent.push('<p><div class="color c3"></div>0.2-0.3</p>');
      legendContent.push('<p><div class="color c2"></div>0.1-0.2</p>');
      legendContent.push('<p><div class="color c1"></div>0.0-0.1</p>');
      legend.innerHTML = legendContent.join('');
      legend.index = 1;

      map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend);
    }

    function zoom(lat, lon) {
      map.setCenter(new google.maps.LatLng(lat, lon));
    }

    function select() {
      if (rectangle === null) {
        bounds = map.getBounds();
        lat = map.getCenter().lat();
        lng = map.getCenter().lng();
        xsize = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
        ysize = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();
        span = xsize;
        if (span > ysize)
          span = ysize;
        halfspan = span * 0.5
        bounds = new google.maps.LatLngBounds(new google.maps.LatLng(lat - halfspan, lng - halfspan), new google.maps.LatLng(lat + halfspan, lng + halfspan));
        rectangle = new google.maps.Rectangle({
          bounds: bounds,
          editable: true,
          draggable: true
        });
        rectangle.setMap(map);
      }
      else {
        rectangle.setMap(null);
        rectangle = null;
      }

    }
    function getSelectionBound() {
      if (rectangle === null) {
        return "";
      }
      bounds = rectangle.getBounds();
      min = bounds.getSouthWest();
      max = bounds.getNorthEast();
      return (min.lat() + "," + min.lng() + "," + max.lat() + "," + max.lng())
    }

    // Deletes all markers in the array by removing references to them.
    function clearSamples() {
      for (var i = 0; i < samples_markers.length; i++) {
        samples_markers[i].setMap(null);
      }
      samples_markers = [];
      for (var i = 0; i < polylines.length; i++) {
        polylines[i].setMap(null);
        polylines[i].getPath().clear();
      }
      polylines = [];

    }

    function clearResults() {
      for (var i = 0; i < results_markers.length; i++) {
        results_markers[i].setMap(null);
      }
      results_markers = [];
    }

    function randColor() {
      for (var i = 0, col = ''; i < 6; i++) {
        col += (Math.random() * 16 | 0).toString(16);
      }
      return '#' + col;
    }

    function newPolyline() {
      newcolor = randColor()
      polyline = new google.maps.Polyline({
        strokeColor: newcolor,
        strokeOpacity: 1.0,
        strokeWeight: 3
      });
      polyline.setMap(map);
      polylines.push(polyline);
    }

    function addLineVertex(lat, lon) {
      var path = polyline.getPath();
      path.push(latLng);
    }

    function addMarker(lat, lon) {
      latLng = new google.maps.LatLng(lat, lon)
      var marker = new google.maps.Marker({
        position: latLng,
        title: "",
        map: map
      });
      samples_markers.push(marker);
    }

    function removeSamplePoints(num) {
      for (var i = 0; i < num; i++) {
        samples_markers[samples_markers.length - 1].setMap(null);
        samples_markers.pop();
      }

      if (polylines.length > 0) {
        polyline.setMap(null);
        polyline.getPath().clear();
        polylines.pop();
        if (polylines.length > 0) {
          polyline = polylines[polylines.length - 1]
        }
      }

    }

    function setLegendTitle(title) {
      legendTitle = title;
      createLegend();
    }

    function setMarker(svf, tsv, bsv, value, imagesrc, imagesrc2, lat, lon) {

      latLng = new google.maps.LatLng(lat, lon)

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: getColor(value),
          fillOpacity: 0.95,
          strokeColor: getColor(value),
          strokeWeight: 1,
          optimized: false,
          scale: 10
        },
        title: "SVF=" + String(svf.toFixed(2)) + " (sky)" + '\n' + "TVF=" + String(tsv.toFixed(2)) + " (tree)" + '\n' + "BVF=" + String(bsv.toFixed(2)) + " (building)"
      });

      marker.setOpacity(1.0)
      results_markers.push(marker);

      var content = [imagesrc, imagesrc2];
      var infowindow = new google.maps.InfoWindow({ disableAutoPan: true, pixelOffset: new google.maps.Size(0, 0) });
      google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
        return function () {
          title = marker.getTitle();
          html = '<!DOCTYPE html>' +
            '<html>' +
            '<body>' +
            '<img src="' + content[0] + '" style="width:256px;height:256px;">' +
            '<img src="' + content[1] + '" style="width:256px;height:256px;">' +
            '</body>' +
            '</html>'
          infowindow.setContent(html);
          infowindow.open(map, marker);
        };
      })(marker, content, infowindow));

      google.maps.event.addListener(marker, 'mouseout', (function (marker, content, infowindow) {
        return function () {
          infowindow.close();
        };
      })(marker, content, infowindow));

    }

  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
          async defer></script>
</body>
</html>