Skip to content

feat: add flp marker and implement legend #275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
regeter merged 2 commits into from
Jan 21, 2026
Merged

feat: add flp marker and implement legend #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0685010
fix: Small increase in width to better fit seconds
regeter Jan 21, 2026
dcb3c6a
feat(map): add flp marker and implement legend
regeter Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions src/LegendContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
export const LEGEND_HTML = `
<div style="margin-top: 5px; margin-right: 0px; padding: 0; font-family: Roboto, Arial, sans-serif; color: #333; font-size: 16px; font-weight: 600; display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: column; gap: 4px;">
<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<span style="width: 6px; height: 6px; border-radius: 50%; display: inline-block; justify-self: center; background-color: #FF0000;"></span> Raw Location
</div>
<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<span style="width: 6px; height: 6px; border-radius: 50%; display: inline-block; justify-self: center; background-color: #4285F4;"></span> FLP Location
</div>
<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<span style="width: 9px; height: 9px; border-radius: 50%; display: inline-block; justify-self: center; background-color: #C71585;"></span> FLP = Raw Location
</div>
</div>

<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<svg style="display: block; justify-self: center; margin-right: 0;" viewBox="0 0 24 24" width="24" height="24">
<path d="M12 8 L5 16 L19 16 L12 8 Z" fill="#0dcaf0" stroke="black" stroke-width="1" stroke-linejoin="round"/>
</svg>
Pickup
</div>

<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<svg style="display: block; justify-self: center; margin-right: 0;" viewBox="0 0 24 24" width="24" height="24">
<path d="M12 5 L5 13 L19 13 L12 5 Z" fill="#0dcaf0" stroke="black" stroke-width="1" stroke-linejoin="round"/>
<path d="M12 10 L5 18 L19 18 L12 10 Z" fill="#0dcaf0" stroke="black" stroke-width="1" stroke-linejoin="round"/>
</svg>
Actual Pickup
</div>

<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<svg style="display: block; justify-self: center; margin-right: 0;" viewBox="0 0 24 24" width="24" height="24">
<path d="M12 16 L5 8 L19 8 L12 16 Z" fill="#0dcaf0" stroke="black" stroke-width="1" stroke-linejoin="round"/>
</svg>
Dropoff
</div>

<div style="display: grid; grid-template-columns: 24px 1fr; align-items: center; font-size: 12px; color: #333; text-shadow: 0 0 2px rgba(255, 255, 255, 0.8); background: transparent; padding: 2px 0; margin-bottom: 2px;">
<svg style="display: block; justify-self: center; margin-right: 0;" viewBox="0 0 24 24" width="24" height="24">
<path d="M12 18 L5 10 L19 10 L12 18 Z" fill="#0dcaf0" stroke="black" stroke-width="1" stroke-linejoin="round"/>
<path d="M12 13 L5 5 L19 5 L12 13 Z" fill="#0dcaf0" stroke="black" stroke-width="1" stroke-linejoin="round"/>
</svg>
Actual Dropoff
</div>
</div>
`;
2 changes: 1 addition & 1 deletion src/LogTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ function LogTable(props) {
}, [props.logData.tripLogs, minTime, maxTime, props.filters]);
const columnShortWidth = 50;
const columnRegularWidth = 120;
const columnLargeWidth = 150;
const columnLargeWidth = 152;
const columns = React.useMemo(() => {
const stdColumns = _.filter(
[
Expand Down
103 changes: 89 additions & 14 deletions src/Map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { decode } from "s2polyline-ts";
import TrafficPolyline from "./TrafficPolyline";
import { TripObjects } from "./TripObjects";
import { getToggleHandlers } from "./MapToggles.js";
import { LEGEND_HTML } from "./LegendContent.js";

function MapComponent({
logData,
Expand Down Expand Up @@ -109,6 +110,7 @@ function MapComponent({
element: mapDivRef.current,
locationProviders: [locationProviderRef.current],
mapOptions: { mapId, mapTypeControl: true, streetViewControl: true, maxZoom: 22 },
automaticViewportMode: "NONE",
});
const map = jsMapView.map;
mapRef.current = map;
Expand Down Expand Up @@ -213,6 +215,36 @@ function MapComponent({
bottomControlsWrapper.appendChild(toggleContainer);
map.controls[window.google.maps.ControlPosition.LEFT_BOTTOM].push(bottomControlsWrapper);

// Legend Controls
const legendToggleContainer = document.createElement("div");
legendToggleContainer.className = "map-toggle-container";
legendToggleContainer.style.marginTop = "10px";
legendToggleContainer.style.marginRight = "10px";
legendToggleContainer.style.marginBottom = "0px";

const legendBtn = document.createElement("button");
legendBtn.textContent = "Legend";
legendBtn.className = "map-toggle-button";
legendToggleContainer.appendChild(legendBtn);

const legendContentDiv = document.createElement("div");
legendContentDiv.style.display = "none";
legendContentDiv.innerHTML = LEGEND_HTML;

legendBtn.onclick = () => {
const isHidden = legendContentDiv.style.display === "none";
if (isHidden) {
legendContentDiv.style.display = "block";
legendBtn.classList.add("active");
} else {
legendContentDiv.style.display = "none";
legendBtn.classList.remove("active");
}
};

map.controls[window.google.maps.ControlPosition.TOP_RIGHT].push(legendToggleContainer);
map.controls[window.google.maps.ControlPosition.TOP_RIGHT].push(legendContentDiv);

const centerListener = map.addListener(
"center_changed",
_.debounce(() => {
Expand Down Expand Up @@ -441,30 +473,73 @@ function MapComponent({
}

const rawLocation = _.get(locationObj, "rawlocation");
if (rawLocation?.latitude && rawLocation?.longitude) {
const rawPos = { lat: rawLocation.latitude, lng: rawLocation.longitude };
if (vehicleMarkersRef.current.rawLocation) {
vehicleMarkersRef.current.rawLocation.setPosition(rawPos);
if (!vehicleMarkersRef.current.rawLocation.getMap()) {
vehicleMarkersRef.current.rawLocation.setMap(map);
const flpLocation = _.get(locationObj, "flplocation");

const rawLat = rawLocation?.latitude;
const rawLng = rawLocation?.longitude;
const flpLat = flpLocation?.latitude;
const flpLng = flpLocation?.longitude;

const hasRaw = rawLat !== undefined && rawLng !== undefined;
const hasFlp = flpLat !== undefined && flpLng !== undefined;
const isMatch = hasRaw && hasFlp && rawLat === flpLat && rawLng === flpLng;

const updateMarker = (markerRefName, position, color, zIndex, scale = 2) => {
if (!position) {
if (vehicleMarkersRef.current[markerRefName]) {
vehicleMarkersRef.current[markerRefName].setMap(null);
}
return;
}

const pos = { lat: position.latitude, lng: position.longitude };
if (vehicleMarkersRef.current[markerRefName]) {
vehicleMarkersRef.current[markerRefName].setPosition(pos);
if (!vehicleMarkersRef.current[markerRefName].getMap()) {
vehicleMarkersRef.current[markerRefName].setMap(map);
}
const icon = vehicleMarkersRef.current[markerRefName].getIcon();
if (icon.fillColor !== color || icon.scale !== scale) {
icon.fillColor = color;
icon.strokeColor = color;
icon.scale = scale;
vehicleMarkersRef.current[markerRefName].setIcon(icon);
}
} else {
vehicleMarkersRef.current.rawLocation = new window.google.maps.Marker({
position: rawPos,
vehicleMarkersRef.current[markerRefName] = new window.google.maps.Marker({
position: pos,
map,
icon: {
path: window.google.maps.SymbolPath.CIRCLE,
fillColor: "#FF0000",
fillColor: color,
fillOpacity: 1,
scale: 2,
strokeColor: "#FF0000",
scale: scale,
strokeColor: color,
strokeWeight: 1,
},
zIndex: 8,
zIndex: zIndex,
});
}
} else if (vehicleMarkersRef.current.rawLocation) {
vehicleMarkersRef.current.rawLocation.setMap(null);
};

if (isMatch) {
updateMarker("matchLocation", rawLocation, "#C71585", 8, 3);
updateMarker("rawLocation", null);
updateMarker("flpLocation", null);
} else {
updateMarker("matchLocation", null);

if (hasRaw) {
updateMarker("rawLocation", rawLocation, "#FF0000", 8, 2);
} else {
updateMarker("rawLocation", null);
}

if (hasFlp) {
updateMarker("flpLocation", flpLocation, "#4285F4", 8, 2);
} else {
updateMarker("flpLocation", null);
}
}

if (isFollowingVehicle) {
Expand Down
Loading