Merge pull request #108 from opentripplanner/alert+map-fixes

Properly render service alert body and fix retina tile display
opentripplanner · Sep 11, 2019 · e37a7df · e37a7df
2 parents 7a8eca2 + 56c3086
commit e37a7df
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 60 deletions.
diff --git a/example-config.yml b/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>.'

diff --git a/lib/components/map/base-layers.js b/lib/components/map/base-layers.js
diff --git a/lib/components/map/base-map.js b/lib/components/map/base-map.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}
                 >

diff --git a/lib/components/narrative/line-itin/itinerary.css b/lib/components/narrative/line-itin/itinerary.css
@@ -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 {

diff --git a/lib/components/narrative/line-itin/transit-leg-body.js b/lib/components/narrative/line-itin/transit-leg-body.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>

diff --git a/lib/index.js b/lib/index.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,