carOnMap.js

carOnMap.js

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var FollowPathInteractive = function () {
  function FollowPathInteractive(_ref) {
    var _this = this;

    var marker = _ref.marker,
      map = _ref.map,
      polyline = _ref.polyline,
      events = _ref.events;

    _classCallCheck(this, FollowPathInteractive);

    this.$slider = jQuery('#route-progress');
    this.$slider.val(0);
    this.$slider.rangeslider({
      polyfill: false
    });

    this.$slider.on("input", function (evt) {
      var val = _this.$slider.val();
      var event = _this.events[val];
      if (event) _this.updatePosition(event);
    });

    this.$text = jQuery("#route-text");

    this.map = map;
    this.polyline = polyline;
    this.events = events;
    this.marker = marker;

    this.x = 0;
    this.progress = 0;
    this.currentEvent = false;
    this.length = events.length;

    this.setupSlider();
    this.addEventListeners();
  }

  _createClass(FollowPathInteractive, [{
    key: "setupSlider",
    value: function setupSlider() {
      this.$slider.attr("min", 0);
      this.$slider.attr("max", this.length);
      this.$slider.rangeslider('update', true);
    }
  }, {
    key: "updateProgress",
    value: function updateProgress(x) {
      this.progress += x;
      this.progress = Math.min(this.length, this.progress);
      this.progress = Math.max(0, this.progress);
      this.currentEvent = this.events[this.progress];
      console.log("current", this.currentEvent);

      if (this.currentEvent) {
        this.updatePosition();
      }
    }
  }, {
    key: "updatePosition",
    value: function updatePosition(event) {
      var position = event || this.currentEvent;
      this.marker.setPosition(position);
      this.$text.html(new Date(event.time).toLocaleTimeString() + " Uhr");
    }
  }, {
    key: "addEventListeners",
    value: function addEventListeners() {
      var marker = this.marker,
        map = this.map;

      // map.addListener( "drag", function ( event ) {
      // } )


      google.maps.event.addListener(marker, "dragend", function (evt) {
        // console.log( "dragend", evt.pixel.x )
        // this.updateProgress( evt.pixel.x )
      });

      google.maps.event.addListener(marker, "drag", function (evt) {
        console.log("drag", evt, evt.pixel.x);
        //setTimeout(() => {this.updateProgress( evt.pixel.x )}, 50)
      });
    }
  }]);

  return FollowPathInteractive;
}();

window.__initMap = function () {
  console.log("map_ready 2");
  var iconParking = createMarkerImage("marker-parking.png", 2);
  var iconMoving = createMarkerImage("marker-car.png");
  // va iconUrl = mfr.gpsTracking.GPS_SERVER_URL + "/images/marker-parking.png"
  var iconStart = createMarkerImage("marker-car-parking.png");

  var map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 48.1809183, lng: 11.5534533 },
    zoom: 12.0
  });

  var deviceId = window.__deviceId;
  var date = window.__date;

  fetch("/api/path/" + deviceId + "/" + date).then(function (res) {
    return res.json();
  }).then(function (events) {
    // console.log( "events", events )
    var coordinates = events.records
    // .filter( ping => ping.ignition === "00" )
      .map(function (ping) {
        return { lat: ping.lat, lng: ping.lng };
      });

    drawDebugMarkers(events);
    var polyline = drawPath(coordinates);
    window.polyline = polyline;
    // let marker =  new google.maps.Marker( {
    //   position: coordinates[0],
    //   title:    "TITLE",
    //   label:   "CAR",
    //   icon
    // } )

    var markers = drawParkingSpots(events.segmentsByType["eParking"]);
    markers && map.panTo(markers[0].position);

    // var snapToRoute = new SnapToRoute( map, markers[ 0 ], polyline )

    var onlyDriving = events.records.filter(function (event) {
      return event.ignition === "01";
    });

    var followMarker = new FollowPathInteractive({ events: onlyDriving, marker: markers[0], polyline: polyline, map: map });
    window.followMarker = followMarker;

    signalReadyToParentWindow();
  });

  function drawPath(coordinates) {
    var polyline = new google.maps.Polyline({
      path: coordinates,
      geodesic: true,
      strokeColor: "#c40000",
      strokeOpacity: 1.0,
      strokeWeight: 3
    });

    polyline.setMap(map);
    return polyline;
  }

  function signalReadyToParentWindow() {
    var targetOrigin = "*";
    try {
      window.parent.postMessage({
        event: "report_callback",
        data: window.events
      }, targetOrigin);
    } catch (e) {
      console.log(e, "Kein Report Callback");
    }
  }

  function drawDebugMarkers(events) {}

  function createMarkerImage(img) {
    var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

    return new google.maps.MarkerImage("/images/" + img, new google.maps.Size(56 / scale, 49 / scale), // size
      new google.maps.Point(0 / scale, 0 / scale), // origin
      new google.maps.Point(17 / scale, 44 / scale), // anchor
      new google.maps.Size(56 / scale, 49 / scale));
  }

  function drawParkingSpots(locations) {

    locations.reverse();
    var markers = locations.map(function (loc, key) {
      var position = { lat: loc.pos_start.lat, lng: loc.pos_start.lng };
      console.log("key", loc, key);
      var marker = new google.maps.Marker({
        position: position,
        title: loc.duration_h,
        draggable: key === 0,
        // label:    String( key ),
        map: map,
        icon: key === 0 ? iconMoving : iconParking
      });
      return marker;
    });

    return markers;
  }
};
if (window.__ready) window.__initMap();

function SnapToRoute(map, marker, polyline) {
  this.routePixels_ = [];
  this.normalProj_ = map.getProjection();
  this.map_ = map;
  this.marker_ = marker;
  this.editable_ = Boolean(false);
  this.polyline_ = polyline;

  this.init_();
}

SnapToRoute.prototype.init_ = function () {
  this.loadLineData_();
  this.loadMapListener_();
};

SnapToRoute.prototype.updateTargets = function (marker, polyline) {
  this.marker_ = marker || this.marker_;
  this.polyline_ = polyline || this.polyline_;
  this.loadLineData_();
};

SnapToRoute.prototype.loadMapListener_ = function () {
  var me = this;

  google.maps.event.addListener(me.marker_, "dragend", function (evt) {
    console.log("dragend", evt);
    me.updateMarkerLocation_(evt.latLng);
  });

  google.maps.event.addListener(me.marker_, "drag", function (evt) {
    console.log("drag", evt);
    me.updateMarkerLocation_(evt.latLng);
  });

  google.maps.event.addListener(me.map_, "zoomend", function (evt) {
    me.loadLineData_();
  });
};

SnapToRoute.prototype.loadLineData_ = function () {
  var zoom = this.map_.getZoom();
  this.routePixels_ = [];
  var path = this.polyline_.getPath();
  for (var i = 0; i < path.getLength(); i++) {
    var Px = this.normalProj_.fromLatLngToPoint(path.getAt(i));
    this.routePixels_.push(Px);
  }
};

SnapToRoute.prototype.updateMarkerLocation_ = function (mouseLatLng) {
  var markerLatLng = this.getClosestLatLng(mouseLatLng);
  this.marker_.setPosition(markerLatLng);
};

SnapToRoute.prototype.getClosestLatLng = function (latlng) {
  var r = this.distanceToLines_(latlng);
  return this.normalProj_.fromPointToLatLng(new google.maps.Point(r.x, r.y));
};

SnapToRoute.prototype.getDistAlongRoute = function (latlng) {
  if (typeof opt_latlng === 'undefined') {
    latlng = this.marker_.getLatLng();
  }
  var r = this.distanceToLines_(latlng);
  return this.getDistToLine_(r.i, r.to);
};

SnapToRoute.prototype.distanceToLines_ = function (mouseLatLng) {
  var zoom = this.map_.getZoom();
  var mousePx = this.normalProj_.fromLatLngToPoint(mouseLatLng);
  var routePixels_ = this.routePixels_;
  return this.getClosestPointOnLines_(mousePx, routePixels_);
};

SnapToRoute.prototype.getDistToLine_ = function (line, to) {
  var routeOverlay = this.polyline_;
  var d = 0;
  for (var n = 1; n < line; n++) {
    d += google.maps.geometry.spherical.computeDistanceBetween(routeOverlay.getAt(n - 1), routeOverlay.getAt(n));
  }
  d += google.maps.geometry.spherical.computeDistanceBetween(routeOverlay.getAt(line - 1), routeOverlay.getAt(line)) * to;
  return d;
};

SnapToRoute.prototype.getClosestPointOnLines_ = function (pXy, aXys) {
  var minDist;
  var to;
  var from;
  var x;
  var y;
  var i;
  var dist;

  if (aXys.length > 1) {
    for (var n = 1; n < aXys.length; n++) {
      if (aXys[n].x !== aXys[n - 1].x) {
        var a = (aXys[n].y - aXys[n - 1].y) / (aXys[n].x - aXys[n - 1].x);
        var b = aXys[n].y - a * aXys[n].x;
        dist = Math.abs(a * pXy.x + b - pXy.y) / Math.sqrt(a * a + 1);
      } else {
        dist = Math.abs(pXy.x - aXys[n].x);
      }

      var rl2 = Math.pow(aXys[n].y - aXys[n - 1].y, 2) + Math.pow(aXys[n].x - aXys[n - 1].x, 2);
      var ln2 = Math.pow(aXys[n].y - pXy.y, 2) + Math.pow(aXys[n].x - pXy.x, 2);
      var lnm12 = Math.pow(aXys[n - 1].y - pXy.y, 2) + Math.pow(aXys[n - 1].x - pXy.x, 2);
      var dist2 = Math.pow(dist, 2);
      var calcrl2 = ln2 - dist2 + lnm12 - dist2;
      if (calcrl2 > rl2) {
        dist = Math.sqrt(Math.min(ln2, lnm12));
      }

      if (minDist == null || minDist > dist) {
        to = Math.sqrt(lnm12 - dist2) / Math.sqrt(rl2);
        from = Math.sqrt(ln2 - dist2) / Math.sqrt(rl2);
        minDist = dist;
        i = n;
      }
    }
    if (to > 1) {
      to = 1;
    }
    if (from > 1) {
      to = 0;
      from = 1;
    }
    var dx = aXys[i - 1].x - aXys[i].x;
    var dy = aXys[i - 1].y - aXys[i].y;

    x = aXys[i - 1].x - dx * to;
    y = aXys[i - 1].y - dy * to;
  }
  return {
    'x': x,
    'y': y,
    'i': i,
    'to': to,
    'from': from
  };
};