Merge pull request #110 from opentripplanner/dev

Patch release

Author: evansiroky

example-config.yml

@@ -33,6 +33,7 @@ map:
       subdomains: 'abcd'
       attribution: 'Map tiles: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
       maxZoom: 20
+      hasRetinaSupport: true
     - name: Stamen Toner Lite
       url: http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png
       attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'

lib/components/form/settings-selector-panel.js

@@ -326,7 +326,7 @@ class SettingsSelectorPanel extends Component {
                 icons={icons}
                 mode={'MICROMOBILITY'}
                 height={36}
-                label={'eScooter Only'}
+                label={'E-scooter Only'}
                 inlineLabel
                 onClick={this._setMicromobilityOnly}
               />

lib/components/map/base-layers.js

@@ -283,25 +283,33 @@ class BaseMap extends Component {
         {/* Create the layers control, including base map layers and any
           * user-controlled overlays. */}
         <LayersControl position='topright'>
-          { /* base layers */
-            baseLayers && baseLayers.map((l, i) => (
-              <LayersControl.BaseLayer
-                name={l.name}
-                checked={i === 0}
-                key={i}>
-                <TileLayer
-                  url={l.url}
-                  attribution={l.attribution}
-                  maxZoom={l.maxZoom}
-                  detectRetina />
-              </LayersControl.BaseLayer>
-            ))
+          {/* base layers */
+            baseLayers && baseLayers.map((layer, i) => {
+              // Fix tile size/zoom offset: https://stackoverflow.com/a/37043490/915811
+              const retinaProps = L.Browser.retina && layer.hasRetinaSupport
+                ? { tileSize: 512, zoomOffset: -1 }
+                : {}
+              return (
+                <LayersControl.BaseLayer
+                  name={layer.name}
+                  checked={i === 0}
+                  key={i}>
+                  <TileLayer
+                    url={layer.url}
+                    attribution={layer.attribution}
+                    maxZoom={layer.maxZoom}
+                    {...retinaProps}
+                    detectRetina />
+                </LayersControl.BaseLayer>
+              )
+            })
           }
 
-          { /* user-controlled overlay layers (e.g., vehicle locations, stops) */
+          {/* user-controlled overlay layers (e.g., vehicle locations, stops) */
             userControlledOverlays.map((child, i) => {
               return (
-                <LayersControl.Overlay key={i}
+                <LayersControl.Overlay
+                  key={i}
                   name={child.props.name}
                   checked={child.props.visible}
                 >

lib/components/map/base-map.js

@@ -4,8 +4,9 @@ import { connect } from 'react-redux'
 import { CircleMarker, FeatureGroup, Marker, MapLayer, Popup, withLeaflet } from 'react-leaflet'
 import { divIcon } from 'leaflet'
 
-import SetFromToButtons from './set-from-to'
 import { setLocation } from '../../actions/map'
+import SetFromToButtons from './set-from-to'
+import { getCompaniesLabelFromNetworks } from '../../util/itinerary'
 
 class VehicleRentalOverlay extends MapLayer {
   static propTypes = {
@@ -50,26 +51,52 @@ class VehicleRentalOverlay extends MapLayer {
     }
   }
 
-  _renderPopupForStation = (station) => {
-    const stationName = `${station.networks.join('/')} ${station.name || station.id}`
+  /**
+   * Render some popup html for a station. This contains custom logic for
+   * displaying rental vehicles in the TriMet MOD website that might not be
+   * applicable to other regions.
+   */
+  _renderPopupForStation = (station, stationIsHub = false) => {
+    const {configCompanies, leaflet, setLocation} = this.props
+    const stationNetworks = getCompaniesLabelFromNetworks(
+      station.networks,
+      configCompanies
+    )
+    let stationName = station.name || station.id
+    if (station.isFloatingBike) {
+      stationName = `Free-floating bike: ${stationName}`
+    } else if (station.isFloatingCar) {
+      stationName = `${stationNetworks} ${stationName}`
+    } else if (station.isFloatingVehicle) {
+      // assumes that all floating vehicles are E-scooters
+      stationName = `${stationNetworks} E-scooter`
+    } else {
+      stationIsHub = true
+    }
     return (
       <Popup>
         <div className='map-overlay-popup'>
           {/* Popup title */}
-          <div className='popup-title'>
-            Floating vehicle {stationName}
-          </div>
+          <div className='popup-title'>{stationName}</div>
+
+          {/* render dock info if it is available */}
+          {stationIsHub && (
+            <div className='popup-row'>
+              <div>Available bikes: {station.bikesAvailable}</div>
+              <div>Available docks: {station.spacesAvailable}</div>
+            </div>
+          )}
 
           {/* Set as from/to toolbar */}
           <div className='popup-row'>
             <SetFromToButtons
-              map={this.props.leaflet.map}
+              map={leaflet.map}
               location={{
                 lat: station.y,
                 lon: station.x,
                 name: stationName
               }}
-              setLocation={this.props.setLocation}
+              setLocation={setLocation}
             />
           </div>
         </div>
@@ -124,38 +151,7 @@ class VehicleRentalOverlay extends MapLayer {
         key={station.id}
         position={[station.y, station.x]}
       >
-        <Popup>
-          <div className='map-overlay-popup'>
-            {/* Popup title */}
-            <div className='popup-title'>
-              {station.isFloatingBike
-                ? <span>Floating bike: {station.name}</span>
-                : <span>{station.name}</span>
-              }
-            </div>
-
-            {/* Details */}
-            {!station.isFloatingBike && (
-              <div className='popup-row'>
-                <div>Available bikes: {station.bikesAvailable}</div>
-                <div>Available docks: {station.spacesAvailable}</div>
-              </div>
-            )}
-
-            {/* Set as from/to toolbar */}
-            <div className='popup-row'>
-              <SetFromToButtons
-                map={this.props.leaflet.map}
-                location={{
-                  lat: station.y,
-                  lon: station.x,
-                  name: station.name
-                }}
-                setLocation={this.props.setLocation}
-              />
-            </div>
-          </div>
-        </Popup>
+        {this._renderPopupForStation(station, !station.isFloatingBike)}
       </Marker>
     )
   }
@@ -239,6 +235,7 @@ class VehicleRentalOverlay extends MapLayer {
 
 const mapStateToProps = (state, ownProps) => {
   return {
+    configCompanies: state.otp.config.companies,
     zoom: state.otp.config.map.initZoom
   }
 }

lib/components/map/vehicle-rental-overlay.js

@@ -354,9 +354,17 @@
   font-size: 18px;
 }
 
+.otp .line-itin .leg-body .transit-alerts .transit-alert .alert-header {
+  font-size: 14px;
+  margin-left: 30px;
+  font-weight: 600;
+}
+
 .otp .line-itin .leg-body .transit-alerts .transit-alert .alert-body {
   font-size: 12px;
   margin-left: 30px;
+  /* white space pre-wrap is required to render line breaks correctly. */
+  white-space: pre-wrap;
 }
 
 .otp .line-itin .leg-body .transit-alerts .transit-alert .effective-date {

lib/components/narrative/line-itin/itinerary.css

@@ -176,7 +176,7 @@ class RentedVehicleLeg extends PureComponent {
       let vehicleName = ''
       // TODO allow more flexibility in customizing these mode strings
       let modeString = leg.rentedVehicle
-        ? 'eScooter'
+        ? 'E-scooter'
         : leg.rentedBike
           ? 'bike'
           : 'car'
@@ -192,7 +192,7 @@ class RentedVehicleLeg extends PureComponent {
           configCompanies
         )
         rentalDescription += ` ${companiesLabel}`
-        // Only show vehicle name for car rentals. For bikes and eScooters, these
+        // Only show vehicle name for car rentals. For bikes and E-scooters, these
         // IDs/names tend to be less relevant (or entirely useless) in this context.
         if (leg.rentedCar && leg.from.name) {
           vehicleName = leg.from.name
@@ -205,7 +205,7 @@ class RentedVehicleLeg extends PureComponent {
       rentalDescription += ` ${modeString} ${vehicleName}`
     }
     // e.g., Pick up REACHNOW rented car XYZNDB OR
-    //       Pick up SPIN eScooter
+    //       Pick up SPIN E-scooter
     //       Pick up shared bike
     return (
       <div className='place-subheader'>

lib/components/narrative/line-itin/place-row.js

@@ -216,6 +216,10 @@ class AlertsBody extends Component {
             return (
               <div key={i} className='transit-alert'>
                 <div className='alert-icon'><i className='fa fa-exclamation-triangle' /></div>
+                {alert.alertHeaderText
+                  ? <div className='alert-header'>{alert.alertHeaderText}</div>
+                  : null
+                }
                 <div className='alert-body'>{alert.alertDescriptionText}</div>
                 <div className='effective-date'>{effectiveDateString}</div>
               </div>

lib/components/narrative/line-itin/transit-leg-body.js

@@ -156,7 +156,7 @@ class AccessLeg extends Component {
         leg.from.networks,
         configCompanies
       )
-      legModeLabel = `Ride ${companiesLabel} eScooter`
+      legModeLabel = `Ride ${companiesLabel} E-scooter`
     }
 
     return (

lib/components/narrative/printable/printable-itinerary.js

@@ -14,7 +14,6 @@ import SwitchButton from './components/form/switch-button'
 
 import LocationIcon from './components/icons/location-icon'
 
-import BaseLayers from './components/map/base-layers'
 import BaseMap from './components/map/base-map'
 import DefaultMap from './components/map/default-map'
 import EndpointsOverlay from './components/map/endpoints-overlay'
@@ -78,7 +77,6 @@ export {
   SwitchButton,
 
   // map components
-  BaseLayers,
   BaseMap,
   DefaultMap,
   EndpointsOverlay,

lib/index.js

@@ -423,6 +423,7 @@ function getCompanyForNetwork (networkString, companies = []) {
  */
 export function getCompaniesLabelFromNetworks (networks, companies = []) {
   return networks.map(network => getCompanyForNetwork(network, companies))
+    .filter(co => !!co)
     .map(co => co.label)
     .join('/')
 }
@@ -440,7 +441,7 @@ export function getModeForPlace (place) {
     case 'CARSHARE':
       return 'car'
     case 'VEHICLERENTAL':
-      return 'eScooter'
+      return 'E-scooter'
     // TODO: Should the type change depending on bike vertex type?
     case 'BIKESHARE':
     case 'BIKEPARK':
@@ -456,7 +457,7 @@ export function getPlaceName (place, companies) {
   if (place.address) return place.address.split(',')[0]
   if (place.networks && place.vertexType === 'VEHICLERENTAL') {
     // For vehicle rental pick up, do not use the place name. Rather, use
-    // company name + vehicle type (e.g., SPIN eScooter). Place name is often just
+    // company name + vehicle type (e.g., SPIN E-scooter). Place name is often just
     // a UUID that has no relevance to the actual vehicle. For bikeshare, however,
     // there are often hubs or bikes that have relevant names to the user.
     const company = getCompanyForNetwork(place.networks[0], companies)

lib/util/itinerary.js

@@ -388,7 +388,7 @@ const queryParams = [
   },
 
   { /* maxEScooterDistance - the maximum distance in meters the user will ride
-     * an eScooter. Not actually an OTP parameter (maxWalkDistance doubles for
+     * an E-scooter. Not actually an OTP parameter (maxWalkDistance doubles for
      * any non-transit mode except for car) but we store it separately
      * internally in order to allow different default values, options, etc.
      * Translated to 'maxWalkDistance' via the rewrite function.
@@ -398,7 +398,7 @@ const queryParams = [
     applicable: query => query.mode && hasTransit(query.mode) && hasMicromobility(query.mode),
     default: 4828, // 3 mi.
     selector: 'DROPDOWN',
-    label: 'Maximum eScooter Distance',
+    label: 'Maximum E-scooter Distance',
     options: [
       {
         text: '1/4 mile',
@@ -444,9 +444,9 @@ const queryParams = [
     routingTypes: [ 'ITINERARY', 'PROFILE' ],
     default: 250,
     selector: 'DROPDOWN',
-    label: 'eScooter Power',
-    // this configuration should only be allowed for personal eScooters as these
-    // settings will be defined by the vehicle type of an eScooter being rented
+    label: 'E-scooter Power',
+    // this configuration should only be allowed for personal E-scooters as these
+    // settings will be defined by the vehicle type of an E-scooter being rented
     applicable: query => (
       query.mode &&
         query.mode.indexOf('MICROMOBILITY') !== -1 &&
@@ -460,10 +460,10 @@ const queryParams = [
         text: 'Entry-level scooter (11mph)',
         value: 250
       }, {
-        text: 'Robust eScooter (18mph)',
+        text: 'Robust E-scooter (18mph)',
         value: 500
       }, {
-        text: 'Powerful eScooter (24mph)',
+        text: 'Powerful E-scooter (24mph)',
         value: 1500
       }
     ],