Skip to content
Permalink
Browse files

Fix marker rotation and last update times (#179)

  • Loading branch information...
kochman authored and garoller committed Oct 30, 2018
1 parent 80623cc commit d61764b4077e5dadddfb7491387febcdcc10844a

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -11,6 +11,7 @@
},
"dependencies": {
"@types/leaflet": "^1.2.10",
"@types/leaflet-rotatedmarker": "^0.2.1",
"leaflet": "^1.3.4",
"leaflet-rotatedmarker": "^0.2.0",
"vue": "^2.5.17",
@@ -133,7 +133,7 @@ export default Vue.extend({
let legendstring = '';
this.$store.state.Routes.forEach((route: Route) => {
if (route.enabled) {
legendstring += `<li><img class="legend-icon" src=` + getMarkerString(route.color, 0) + `
legendstring += `<li><img class="legend-icon" src=` + getMarkerString(route.color) + `
width="12" height="12"> ` +
route.name;
}
@@ -45,7 +45,7 @@ const store: StoreOptions<StoreState> = {
let found = false;
for (let i = 0; i < updates.length; i++) {
if (Number(vehicle.id) === Number(updates[i].vehicle_id)) {
vehicle.lastUpdate = new Date(updates[i].date) ;
vehicle.lastUpdate = new Date(updates[i].time);
found = true;
vehicle.speed = Number(updates[i].speed);
vehicle.setRoute(undefined);
@@ -1,5 +1,5 @@
const icon: string = `<?xml version="1.0" encoding="UTF-8"?>
<svg transform="rotate(HEADING)" width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>shuttle</title>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -10,6 +10,6 @@ const icon: string = `<?xml version="1.0" encoding="UTF-8"?>
</g>
</svg>`;

export default function getMarkerString(color: string, angle: number) {
return 'data:image/svg+xml;base64,' + btoa(icon.replace('#33A7FF', color).replace('HEADING', String(angle)));
export default function getMarkerString(color: string) {
return 'data:image/svg+xml;base64,' + btoa(icon.replace('#33A7FF', color));
}
@@ -6,10 +6,8 @@ export default interface Update {
heading: number;
speed: number;
time: string;
date: string;
status: string;
created: string;
route_id: number | null;
vehicle_id: number;

}
@@ -2,6 +2,7 @@ import * as L from 'leaflet';
import Route from '@/structures/route';
import getMarkerString from '@/structures/leaflet/rotatedMarker';
import getCardinalDirection from '@/structures/cardinalDirection';
import 'leaflet-rotatedmarker';

const ShuttleIcon = require('@/assets/shuttle.svg') as string;
const maxMissedUpdatesBeforeHide = 5;
@@ -25,7 +26,7 @@ export default class Vehicle {
public shownOnMap: boolean;
public map: L.Map | undefined;
public Route: Route | undefined;
public lastUpdate: Date;
public lastUpdate: Date | undefined;

constructor(id: number, name: string, created: Date, updated: Date, enabled: boolean) {
this.id = id;
@@ -40,26 +41,29 @@ export default class Vehicle {
this.RouteID = null;
this.marker = new L.Marker([this.lat, this.lng], {
icon: L.icon({
iconUrl: getMarkerString('#FFF', this.heading),
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
iconUrl: getMarkerString('#FFF'),
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
}),
zIndexOffset: 1000,
rotationOrigin: 'center',
});
this.shownOnMap = false;
this.map = undefined;
this.Route = undefined;
this.lastUpdate = new Date();
this.lastUpdate = undefined;
}

public getMessage(): string {
const speed = Math.round(this.speed * 100) / 100;
const date = new Date(this.created);
const direction = getCardinalDirection(this.heading + 45);
return `<b>` + this.name + `</b><br>` +
`Traveling ` + direction + ` at ` + speed + ` mph<br>` +
`as of ` + date.toLocaleTimeString();
let message = `<b>${this.name}</b><br>`
+ `Traveling ${direction} at ${speed} mph`;
if (this.lastUpdate !== undefined) {
message += '<br>as of ' + this.lastUpdate.toLocaleTimeString();
}
return message;
}

public addToMap(map: L.Map) {
@@ -87,34 +91,28 @@ export default class Vehicle {

public setHeading(heading: number) {
this.heading = heading - 45;
if (this.Route) {
this.marker.setIcon(L.icon(({
iconUrl: getMarkerString(this.Route.color, this.heading),
rotationOrigin: 'center',
} as L.IconOptions)));
}
this.marker.setRotationAngle(this.heading);
this.marker.bindPopup(this.getMessage());

}

public setRoute(r: Route | undefined) {
if (r === undefined) {
this.marker.setIcon(L.icon({
iconUrl: getMarkerString('#FFF', this.heading),
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
iconUrl: getMarkerString('#FFF'),
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
}));

return;
}
this.Route = r;
this.RouteID = r.id;
this.marker.setIcon(L.icon({
iconUrl: getMarkerString(r.color, this.heading),
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
iconUrl: getMarkerString(r.color),
iconSize: [32, 32], // size of the icon
iconAnchor: [16, 16], // point of the icon which will correspond to marker's location
popupAnchor: [0, 0], // point from which the popup should open relative to the iconAnchor
}));
this.marker.bindPopup(this.getMessage());

0 comments on commit d61764b

Please sign in to comment.
You can’t perform that action at this time.