Skip to content

Commit

Permalink
Merge branch 'master' into Jaden's-Branch
Browse files Browse the repository at this point in the history
  • Loading branch information
r8btx authored Nov 22, 2023
2 parents e115b22 + 331516d commit 28d5454
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 50 deletions.
14 changes: 7 additions & 7 deletions front-end/src/css/mapPage.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
.map{
@apply flex h-full w-full bg-lightTone opacity-60 border-solid drop-shadow-2xl border-2 border-darkTone rounded-3xl;
.map {
@apply flex h-full w-full bg-lightTone border-solid drop-shadow-2xl border-2 border-darkTone rounded-3xl;
}

.map-container{
@apply flex p-5 pb-28 h-screen w-full bg-lightTone rounded shadow-lg;
.map-container {
@apply flex p-5 pb-28 h-screen w-full bg-lightTone rounded shadow-lg;
}

.dark .map-container{
@apply bg-darkMode-darkTone;
}
.dark .map-container {
@apply bg-darkMode-darkTone;
}
69 changes: 26 additions & 43 deletions front-end/src/utils/transportMarker.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
const MAX_ANIMATION_DURATION = 7000;

const busIcons = ['A', 'B', 'C', 'E', 'F', 'G', 'W', 'Cobble Hill'];



export function updateTransportMarkers(transportData, markerRef, map) {
if (!transportData) {
return;
Expand Down Expand Up @@ -34,33 +30,22 @@ export function updateTransportMarkers(transportData, markerRef, map) {
markerRef.current[transport].setIcon(newIcon);
} else {
// Create a new marker
let route = transportData[transport][0].route; // get last char of route
let routeChar = route.slice(-1);
if (route === 'Ferry Route') { routeChar = 'Ferry_Route'; }
else if (route === 'Cobble Hill') { routeChar = 'Cobble_Hill'; }
let transportMarker = createTransportMarker(newPosition, transportData[transport][0], map, routeChar);
let transportMarker = createTransportMarker(newPosition, transportInfo, map, newIcon);
markerRef.current[transport] = transportMarker;
}
});
}

function createTransportMarker(position, transportInfo, map, route) {
if(route === 'Ferry_Route'){ console.log('ferry'); }

function createTransportMarker(position, transportInfo, map) {
let transportMarker = new window.google.maps.Marker({
position,
map,
title: String(transportInfo.busId),
icon: {
url: 'busIcons/busIcon_route'+route+'.png',
scaledSize: new window.google.maps.Size(30, 30),
},
icon: generateTransportMarkerIcon(transportInfo.color || '#000', transportInfo.calculatedCourse || 0),
});

let infowindow = new window.google.maps.InfoWindow({
content: `<div><strong>No.${transportInfo.busId}</strong><br>Line: ${transportInfo.route}<br>Passengers: ${transportInfo.paxLoad}</div>`,
icon: generateTransportMarkerIcon(transportInfo.color || '#000', transportInfo.calculatedCourse || 0),
content: `<div><strong>No.${transportInfo.busId}</strong><br>Line: ${transportInfo.route}</div>`,
});

transportMarker.addListener('click', () => {
Expand All @@ -71,31 +56,6 @@ function createTransportMarker(position, transportInfo, map) {
return transportMarker;
}

}

// Generate custom transport marker icon (currently only support buses)
// Original source of bus svg path: www.svgrepo.com
function generateTransportMarkerIcon(color, direction) {
const svg = `<?xml version="1.0" encoding="utf-8"?>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<g class="layer" transform="rotate(${direction}, 12, 12)">
<path d="M10,11 L14,11 Q12,5 10,11 z" fill="${color}" transform="translate(0, -7)"/>
</g>
<g class="layer">
<g class="layer">
<circle cx="12" cy="12" fill="${color}" r="9"/>
<circle cx="12" cy="12" fill="#fff" r="8"/>
<path clip-rule="evenodd" d="M7.5 16.63c0 .2.17.37.38.37h.81a.38.38 0 0 0 .36-.32l.2-1.18h5.5l.2 1.18a.38.38 0 0 0 .36.32h.82a.38.38 0 0 0 .37-.37V11l.39-.39a.38.38 0 0 0 .11-.27v-.97a.38.38 0 0 0-.37-.37h-.13v-.5c0-.58-.41-1.09-.98-1.19C14.65 7.17 13.32 7 12 7c-1.32 0-2.65.17-3.52.32-.58.09-.98.6-.98 1.18V9h-.13a.38.38 0 0 0-.37.38v.97c0 .1.04.19.11.26l.39.39v5.63zm2.5-3.38a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm4.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM8.5 8.57v2.93h7V8.57a.37.37 0 0 0-.32-.36A26.46 26.46 0 0 0 12 7.99c-1.3 0-2.6.14-3.18.22a.36.36 0 0 0-.32.36z" fill="${color}" fill-rule="evenodd"/>
</g>
</g>
</svg>`;
const icon = {
url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg),
scaledSize: new window.google.maps.Size(40, 40),
};
return icon;
}

function animateMarker(marker, startPosition, endPosition, minBusQueryInterval) {
const distanceThreshold = { min: 10, max: 300 };
const dynamicDuration = minBusQueryInterval + 2000;
Expand Down Expand Up @@ -131,4 +91,27 @@ function animateMarker(marker, startPosition, endPosition, minBusQueryInterval)
}
}

// Generate custom transport marker icon (currently only support buses)
// Original source of bus svg path: www.svgrepo.com
function generateTransportMarkerIcon(color, direction) {
const svg = `<?xml version="1.0" encoding="utf-8"?>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<g class="layer" transform="rotate(${direction}, 12, 12)">
<path d="M10,11 L14,11 Q12,5 10,11 z" fill="${color}" transform="translate(0, -7)"/>
</g>
<g class="layer">
<g class="layer">
<circle cx="12" cy="12" fill="${color}" r="9"/>
<circle cx="12" cy="12" fill="#fff" r="8"/>
<path clip-rule="evenodd" d="M7.5 16.63c0 .2.17.37.38.37h.81a.38.38 0 0 0 .36-.32l.2-1.18h5.5l.2 1.18a.38.38 0 0 0 .36.32h.82a.38.38 0 0 0 .37-.37V11l.39-.39a.38.38 0 0 0 .11-.27v-.97a.38.38 0 0 0-.37-.37h-.13v-.5c0-.58-.41-1.09-.98-1.19C14.65 7.17 13.32 7 12 7c-1.32 0-2.65.17-3.52.32-.58.09-.98.6-.98 1.18V9h-.13a.38.38 0 0 0-.37.38v.97c0 .1.04.19.11.26l.39.39v5.63zm2.5-3.38a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm4.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5zM8.5 8.57v2.93h7V8.57a.37.37 0 0 0-.32-.36A26.46 26.46 0 0 0 12 7.99c-1.3 0-2.6.14-3.18.22a.36.36 0 0 0-.32.36z" fill="${color}" fill-rule="evenodd"/>
</g>
</g>
</svg>`;
const icon = {
url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg),
scaledSize: new window.google.maps.Size(40, 40),
};
return icon;
}

export default updateTransportMarkers;

0 comments on commit 28d5454

Please sign in to comment.