Merge pull request #746 from opentripplanner/fix-stop-marker

Fix stop marker

Author: binh-dam-ibigroup

Diff for: lib/components/map/enhanced-stop-marker.js

@@ -20,28 +20,23 @@ import { getModeFromStop, getStopName } from '../../util/viewer'
 
 const { ViewStopButton } = StopsOverlayStyled
 
-const getComplementaryColor = (color) =>
-  color.isLight() ? color.darken(30) : color.lighten(40)
-
-const caretPixels = 18
 const iconPixels = 32
 const iconPadding = 5
+const caretPixels = iconPixels / 2 + iconPadding
 const borderPixels = (props) => (props?.active ? 3 : 1)
-const caretMarginPixels = (props) =>
-  (iconPixels - caretPixels - borderPixels(props)) / 2
+const leftPixels = (props) => caretPixels / 2 - borderPixels(props) / 2
+const bottomPixels = (props) =>
+  -((caretPixels * 1.4142) / 4) - borderPixels(props) + iconPadding / 2
 
 const DEFAULT_COLOR = '#a6a6a6'
+const strokeColor = (props) => (props?.active ? props.mainColor : DEFAULT_COLOR)
 
 const BaseStopIcon = styled.div`
   background: #fff;
+  border: ${borderPixels}px solid ${strokeColor};
   border-radius: 50%;
-  border: ${borderPixels}px solid
-    ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
-  color: ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
-  fill: ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
-  font-size: ${iconPixels}px;
+  fill: ${strokeColor};
   height: ${iconPixels}px;
-  line-height: 1px;
   padding: ${iconPadding}px;
   position: relative;
   width: ${iconPixels}px;
@@ -55,19 +50,17 @@ const BaseStopIcon = styled.div`
 
   &::after {
     background: #fff;
-    border-bottom: ${borderPixels}px solid
-      ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
-    border-right: ${borderPixels}px solid
-      ${(props) => (props?.active ? props.mainColor : DEFAULT_COLOR)};
+    border-bottom: ${borderPixels}px solid ${strokeColor};
+    border-right: ${borderPixels}px solid ${strokeColor};
+    bottom: ${bottomPixels}px;
+    box-sizing: content-box;
     content: '';
     display: block;
     height: ${caretPixels}px;
+    left: ${leftPixels}px;
+    position: absolute;
     transform: rotate(45deg);
     width: ${caretPixels}px;
-
-    /* FIXME: figure out how these numbers can be calculated */
-    margin-left: ${caretMarginPixels}px;
-    margin-top: -${caretMarginPixels}px;
   }
 `
 
@@ -128,7 +121,6 @@ class EnhancedStopMarker extends Component {
 
     return (
       <MarkerWithPopup
-        markerProps={{ anchor: 'top', offset: [1, -12] }}
         popupContents={
           activeStopId !== stop.id && (
             <BaseMapStyled.MapOverlayPopup>
@@ -179,8 +171,7 @@ const mapStateToProps = (state, ownProps) => {
     activeStopId: state.otp.ui.viewedStop?.stopId,
     highlight: highlightedStop === ownProps.stop.id,
     languageConfig: state.otp.config.language,
-    modeColors,
-    stop: ownProps.stop
+    modeColors
   }
 }
 

Diff for: lib/components/map/map.css

@@ -127,3 +127,18 @@
 .otp .map-overlay-popup .popup-row {
   margin-top: 6px;
 }
+
+/* 
+  HACK: maplibre has a tendency to place the marker for the active stop in the stop viewer
+  at the bottom of the map (i.e. first). This change puts the active stop on top so it is easier to see.
+ */
+.maplibregl-marker:first-of-type,
+.mapboxgl-marker:first-of-type {
+  z-index: 100;
+}
+
+/* Make sure popups stay on top of markers above. */
+.maplibregl-popup,
+.mapboxgl-popup {
+  z-index: 101;
+}