made some configurations of routes colors

openmove · Apr 19, 2023 · e27751a · e27751a
1 parent 647e83f
commit e27751a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/journey/config.yml b/journey/config.yml
@@ -505,6 +505,16 @@ transit:
     stroke: '#095980'
     stroke_width: 2
     background: '#095980'
+    modes:
+      WALK: "#87cefa"
+      BICYCLE: "red"
+      SUBWAY: "#f00"
+      RAIL: "#095980"
+      BUS: "#095980"
+      TRAM: "#800"
+      FERRY: "#095980"
+      CAR: "#444"
+      MICROMOBILITY: "#f5a729"
     places:
       fill:
         bikeshare_station: "#f00"

diff --git a/journey/src/components/map/connected-route-viewer-overlay.js b/journey/src/components/map/connected-route-viewer-overlay.js
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 const mapStateToProps = (state, ownProps) => {
   const viewedRoute = state.otp.ui.viewedRoute
   return {
+    style:state.otp.config.transit.style,
     routeData: viewedRoute && state.otp.transitIndex.routes
       ? state.otp.transitIndex.routes[viewedRoute.routeId]
       : null

diff --git a/journey/src/otp-ui/overlay-route-viewer/index.js b/journey/src/otp-ui/overlay-route-viewer/index.js
@@ -56,17 +56,17 @@ class RouteViewerOverlay extends MapLayer {
   updateLeafletElement() {}
 
   render() {
-    const { path, routeData } = this.props;
+    const { path, routeData, style } = this.props;
 
     if (!routeData || !routeData.patterns) return <FeatureGroup />;
 
     let routeColor
     if(routeData.color){
       routeColor = `#${routeData.color}`
     }else if( routeData.mode){
-      routeColor = getMapColor(routeData.mode)
+      routeColor =style.modes[routeData.mode]
     }
-    routeColor = routeColor || path.color;
+    routeColor =  routeColor || style.fill || path.color;
 
     const text = routeData.longName !== routeData.shortName ? routeData.longName : null
         , desc = routeData?.desc
@@ -86,6 +86,7 @@ class RouteViewerOverlay extends MapLayer {
           /* eslint-disable-next-line react/jsx-props-no-spreading */
           {...path}
           color={routeColor}
+          // className="is-walk"
           key={pattern.id}
           positions={pts}
         >

diff --git a/journey/src/themes/default/otp-ui/_itinerary-body.scss b/journey/src/themes/default/otp-ui/_itinerary-body.scss
@@ -194,7 +194,7 @@
     text-align: left;
     padding-left: 0;
     padding-right: 0;
-    
+
     svg {
       width: 34px;
       height: 34px;
@@ -411,29 +411,29 @@
 
   &__iconContainer {
     height: 34px;
-    width: 34px;    
+    width: 34px;
     margin-right: 6px;
   }
 
-  &__shortName {    
+  &__shortName {
     background-color: #095980;
     border-radius: 30px;
     border: 2px solid white;
     box-shadow: 0 0 0.5em #000;
-    color: white;    
+    color: white;
     font-weight: 500;
     height: 30px;
     width: 30px;
     font-size: $font-size-xxsmall;
     line-height: 250%;
     margin-right: 6px;
-    overflow: hidden;    
-    text-align: center;    
+    overflow: hidden;
+    text-align: center;
     white-space: nowrap;
   }
 
   &__longName {
-    font-size: 13px;    
+    font-size: 13px;
     line-height: 16px;
   }
 }
@@ -470,6 +470,9 @@
     margin-right: 5px;
   }
 }
+.is-walk {
+
+}
 
 .otp-ui-lineColumnContent {
   &__line {