Merge pull request #577 from ibi-group/mapbox-tile-update

Mapbox tile update

lib/common/components/MapModal.js

@@ -1,10 +1,10 @@
 // @flow
 
 import React, {Component} from 'react'
-import { Modal, Button } from 'react-bootstrap'
-import { Map, Marker, TileLayer } from 'react-leaflet'
+import {Modal, Button} from 'react-bootstrap'
+import {Map, Marker, TileLayer} from 'react-leaflet'
 
-import {defaultTileURL} from '../util/maps'
+import {defaultTileLayerProps} from '../util/maps'
 
 import type {LatLng} from '../../types'
 
@@ -93,7 +93,6 @@ export default class MapModal extends Component<Props, State> {
         position={[this.state.marker.lat, this.state.marker.lng]}
         key={Math.random()} />
       : null
-    const MAPBOX_ATTRIBUTION = process.env.MAPBOX_ATTRIBUTION
     return (
       <Modal show={this.state.showModal} onHide={this.close}>
         <Header>
@@ -106,9 +105,7 @@ export default class MapModal extends Component<Props, State> {
             bounds={bounds}
             style={mapStyle}
             onClick={this.clickHandler}>
-            <TileLayer
-              url={defaultTileURL()}
-              attribution={MAPBOX_ATTRIBUTION} />
+            <TileLayer {...defaultTileLayerProps()} />
             {marker}
           </Map>
         </Body>

lib/common/components/Sidebar.js

@@ -2,11 +2,10 @@
 
 import moment from 'moment'
 import React, {PureComponent, type Node} from 'react'
-import {Navbar, Checkbox} from 'react-bootstrap'
+import {Navbar} from 'react-bootstrap'
 import {Link} from 'react-router'
 
 import * as statusActions from '../../manager/actions/status'
-import * as uiActions from '../../manager/actions/ui'
 import * as userActions from '../../manager/actions/user'
 import JobMonitor from './JobMonitor'
 import SidebarNavItem from './SidebarNavItem'
@@ -39,8 +38,6 @@ type Props = ContainerProps & {
   removeRetiredJob: typeof statusActions.removeRetiredJob,
   revokeToken: typeof userActions.revokeToken,
   setJobMonitorVisible: typeof statusActions.setJobMonitorVisible,
-  setSidebarExpanded: typeof uiActions.setSidebarExpanded,
-  setTutorialHidden: typeof uiActions.setTutorialHidden,
   startJobMonitor: typeof statusActions.startJobMonitor,
   user: ManagerUserState
 }
@@ -85,16 +82,11 @@ export default class Sidebar extends PureComponent<Props, State> {
   _select = (key: ?$Values<typeof POPOVER>) =>
     this.setState({visiblePopover: (key === this.state.visiblePopover) ? null : key})
 
-  _toggleLabels = () => this.props.setSidebarExpanded(!this.props.expanded)
-
-  _toggleTutorial = () => this.props.setTutorialHidden(!this.props.hideTutorial)
-
   render () {
     const {
       appInfo,
       children,
       expanded,
-      hideTutorial,
       jobMonitor,
       removeRetiredJob,
       user
@@ -170,18 +162,6 @@ export default class Sidebar extends PureComponent<Props, State> {
           width={300}
         >
           <div>
-            <Checkbox
-              ref='showLabelsCheckbox'
-              checked={expanded}
-              onChange={this._toggleLabels}>
-              Show Sidebar Labels
-            </Checkbox>
-            <Checkbox
-              ref='showTutorialCheckbox'
-              checked={hideTutorial}
-              onChange={this._toggleTutorial}>
-              Hide editor tutorial
-            </Checkbox>
             <div className='app-info'>
               <h5>About this app</h5>
               <table>

lib/common/containers/ActiveSidebar.js

@@ -10,7 +10,6 @@ import {
   startJobMonitor,
   setJobMonitorVisible
 } from '../../manager/actions/status'
-import {setSidebarExpanded, setTutorialHidden} from '../../manager/actions/ui'
 
 import type {AppState} from '../../types/reducers'
 
@@ -32,8 +31,6 @@ const mapDispatchToProps = {
   removeRetiredJob,
   revokeToken,
   setJobMonitorVisible,
-  setSidebarExpanded,
-  setTutorialHidden,
   startJobMonitor
 }
 

lib/common/user/Auth0Manager.js

@@ -283,7 +283,6 @@ class Auth0Manager {
 
         const accessToken = getAccessToken()
         if (!accessToken) return logout(userIsLoggedIn)
-
         // try to get the profile from localStorage
         return this._getProfileFromToken(accessToken)
           .then((profile) => {

lib/common/util/maps.js

@@ -2,11 +2,53 @@
 
 import { Browser } from 'leaflet'
 
-export function defaultTileURL (mapId: ?string): string {
-  const MAPBOX_MAP_ID = mapId || process.env.MAPBOX_MAP_ID
+import type {TileLayerProps, MapLayer} from '../../types'
+
+const DEFAULT_MAP_ID = 'mapbox/outdoors-v11'
+
+/**
+ * Default map layers for the GTFS editor. (Note: this is defined in the common
+ * util file in order to keep all refs to mapbox IDs in a single file.)
+ */
+export const EDITOR_MAP_LAYERS: Array<MapLayer> = [
+  {
+    name: 'Streets',
+    id: DEFAULT_MAP_ID
+  },
+  {
+    name: 'Light',
+    id: 'mapbox/light-v10'
+  },
+  {
+    name: 'Dark',
+    id: 'mapbox/dark-v10'
+  },
+  {
+    name: 'Satellite',
+    id: 'mapbox/satellite-streets-v11'
+  }
+]
+
+/**
+ * Get the default Mapbox tile URL used for use in a leaflet map. Optionally
+ * takes a map ID (e.g., mapbox/outdoors-v11).
+ */
+export function defaultTileLayerProps (mapId: ?string): TileLayerProps {
+  // If no mapId is provided, default to id defined in env.yml or, ultimately,
+  // fall back on default value.
+  const id = mapId || process.env.MAPBOX_MAP_ID || DEFAULT_MAP_ID
+  const attribution = process.env.MAPBOX_ATTRIBUTION || `<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox &copy; OpenStreetMap</a> <a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>`
   const MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN
-  if (!MAPBOX_MAP_ID || !MAPBOX_ACCESS_TOKEN) {
-    throw new Error('Mapbox ID and token not defined')
+  if (!MAPBOX_ACCESS_TOKEN) {
+    throw new Error('Mapbox token not defined')
+  }
+  const url = `https://api.mapbox.com/styles/v1/${id}/tiles/{z}/{x}/{y}${Browser.retina ? '@2x' : ''}?access_token=${MAPBOX_ACCESS_TOKEN}`
+  const retinaProps = Browser.retina
+    ? {tileSize: 512, zoomOffset: -1}
+    : {}
+  return {
+    attribution,
+    ...retinaProps,
+    url
   }
-  return `https://api.tiles.mapbox.com/v4/${MAPBOX_MAP_ID}/{z}/{x}/{y}${Browser.retina ? '@2x' : ''}.png?access_token=${MAPBOX_ACCESS_TOKEN}`
 }

lib/editor/components/EditorHelpModal.js

@@ -7,7 +7,6 @@ import {LinkContainer} from 'react-router-bootstrap'
 
 import * as snapshotActions from '../actions/snapshots'
 import {getConfigProperty} from '../../common/util/config'
-import * as uiActions from '../../manager/actions/ui'
 
 import type {Feed} from '../../types'
 import type {EditorStatus} from '../../types/reducers'
@@ -19,7 +18,6 @@ type Props = {
   isNewFeed: boolean,
   loadFeedVersionForEditing: typeof snapshotActions.loadFeedVersionForEditing,
   refreshEditor: () => void,
-  setTutorialHidden: typeof uiActions.setTutorialHidden,
   show: boolean,
   status: EditorStatus
 }
@@ -60,9 +58,6 @@ export default class EditorHelpModal extends Component<Props, State> {
   }
 
   close = () => {
-    if (this.state.hideTutorial !== this.props.hideTutorial) {
-      this.props.setTutorialHidden(!this.props.hideTutorial)
-    }
     this.setState({ showModal: false })
   }
 

lib/editor/components/GtfsEditor.js

@@ -13,7 +13,6 @@ import CurrentStatusMessage from '../../common/containers/CurrentStatusMessage'
 import ConfirmModal from '../../common/components/ConfirmModal'
 import Title from '../../common/components/Title'
 import CurrentStatusModal from '../../common/containers/CurrentStatusModal'
-import * as uiActions from '../../manager/actions/ui'
 import * as userActions from '../../manager/actions/user'
 import EditorMap from './map/EditorMap'
 import EditorHelpModal from './EditorHelpModal'
@@ -102,7 +101,6 @@ type Props = ContainerProps & {
   setActiveGtfsEntity: typeof activeActions.setActiveGtfsEntity,
   setActivePatternSegment: typeof tripPatternActions.setActivePatternSegment,
   setActiveStop: typeof tripPatternActions.setActiveStop,
-  setTutorialHidden: typeof uiActions.setTutorialHidden,
   showConfirmModal: ({body: string, onConfirm: () => void, title: string}) => void,
   sidebarExpanded: boolean,
   status: EditorStatus,
@@ -117,7 +115,7 @@ type Props = ContainerProps & {
   updateEditSetting: typeof activeActions.updateEditSetting,
   updateMapSetting: typeof mapActions.updateMapSetting,
   updatePatternStops: typeof tripPatternActions.updatePatternStops,
-  updateUserMetadata: typeof userActions.updateUserMetadata,
+  updateUserData: typeof userActions.updateUserData,
   uploadBrandingAsset: typeof editorActions.uploadBrandingAsset,
   user: ManagerUserState,
   validationErrors: Array<EditorValidationIssue>,
@@ -292,7 +290,6 @@ export default class GtfsEditor extends Component<Props, State> {
       loadFeedVersionForEditing,
       mapState,
       routeParams,
-      setTutorialHidden,
       sidebarExpanded,
       status,
       subSubComponent,
@@ -348,7 +345,6 @@ export default class GtfsEditor extends Component<Props, State> {
             loadFeedVersionForEditing={loadFeedVersionForEditing}
             isNewFeed
             refreshEditor={this._refreshEditor}
-            setTutorialHidden={setTutorialHidden}
             show
             status={status} />
           : null

lib/editor/components/map/EditorMap.js

@@ -9,7 +9,7 @@ import * as editorActions from '../../actions/editor'
 import * as mapActions from '../../actions/map'
 import * as stopStrategiesActions from '../../actions/map/stopStrategies'
 import * as tripPatternActions from '../../actions/tripPattern'
-import * as userActions from '../../../manager/actions/user'
+import {EDITOR_MAP_LAYERS} from '../../../common/util/maps'
 import AddableStopsLayer from './AddableStopsLayer'
 import EditorMapLayersControl from './EditorMapLayersControl'
 import ControlPointsLayer from './ControlPointsLayer'
@@ -18,7 +18,7 @@ import PatternDebugLines from './pattern-debug-lines'
 import PatternsLayer from './PatternsLayer'
 import PatternStopsLayer from './PatternStopsLayer'
 import StopsLayer from './StopsLayer'
-import {MAP_LAYERS, constructStop, clickToLatLng, getFeedBounds} from '../../util/map'
+import {constructStop, clickToLatLng, getFeedBounds} from '../../util/map'
 import {entityIsNew} from '../../util/objects'
 
 import type {
@@ -80,7 +80,6 @@ type Props = {
   updateEditSetting: typeof activeActions.updateEditSetting,
   updateMapSetting: typeof mapActions.updateMapSetting,
   updatePatternStops: typeof tripPatternActions.updatePatternStops,
-  updateUserMetadata: typeof userActions.updateUserMetadata,
   user: ManagerUserState,
   zoomToTarget: ?number
 }
@@ -181,9 +180,11 @@ export default class EditorMap extends Component<Props, State> {
   }
 
   _mapBaseLayerChanged = (e: any) => {
-    const layer = MAP_LAYERS.find(l => l.name === e.name)
-    if (!layer) return console.warn(`Could not locate map layer with name=${e.name}`, MAP_LAYERS)
-    this.props.updateUserMetadata(this.props.user.profile, {editor: {map_id: layer.id}})
+    const layer = EDITOR_MAP_LAYERS.find(l => l.name === e.name)
+    if (!layer) return console.warn(`Could not locate map layer with name=${e.name}`, EDITOR_MAP_LAYERS)
+    // FIXME: Once we refactor users to be stored in MongoDB we may want to add
+    // back a way to store the preferred map layer.
+    // this.props.updateUserMetadata(this.props.user.profile, {editor: {map_id: layer.id}})
   }
 
   /**

lib/editor/components/map/EditorMapLayersControl.js

@@ -12,12 +12,11 @@ import {
 
 import {getUserMetadataProperty} from '../../../common/util/user'
 import {isExtensionEnabled} from '../../../common/util/config'
+import {defaultTileLayerProps, EDITOR_MAP_LAYERS} from '../../../common/util/maps'
 import StopLayer from '../../../scenario-editor/components/StopLayer'
-import {MAP_LAYERS} from '../../util/map'
 
-import type {GtfsStop} from '../../../types'
+import type {GtfsStop, MapLayer} from '../../../types'
 import type {ManagerUserState} from '../../../types/reducers'
-import type {MapLayer} from '../../util/map'
 
 type Props = {
   stops: Array<GtfsStop>,
@@ -61,23 +60,17 @@ export default class EditorMapLayersControl extends Component<Props> {
         component: <StopLayer key='stop-layer' stops={stops} />
       }
     ]
-    const activeMapLayerIndex: number = MAP_LAYERS.findIndex(
+    const activeMapLayerIndex: number = EDITOR_MAP_LAYERS.findIndex(
       (l: MapLayer) => l.id === getUserMetadataProperty(user.profile, 'editor.map_id')
     )
-    const MAPBOX_ACCESS_TOKEN: string = process.env.MAPBOX_ACCESS_TOKEN
-      ? process.env.MAPBOX_ACCESS_TOKEN
-      : 'NO_TOKEN_FOUND'
-    const MAPBOX_ATTRIBUTION: ?string = process.env.MAPBOX_ATTRIBUTION
     return (
       <LayersControl position='topleft'>
-        {MAP_LAYERS.map((layer: MapLayer, index: number) => (
+        {EDITOR_MAP_LAYERS.map((layer: MapLayer, index: number) => (
           <BaseLayer
             name={layer.name}
             key={layer.id}
             checked={activeMapLayerIndex !== -1 ? index === activeMapLayerIndex : index === 0}>
-            <TileLayer
-              url={`https://api.tiles.mapbox.com/v4/${layer.id}/{z}/{x}/{y}${Browser.retina ? '@2x' : ''}.png?access_token=${MAPBOX_ACCESS_TOKEN}`}
-              attribution={MAPBOX_ATTRIBUTION} />
+            <TileLayer {...defaultTileLayerProps(layer.id)} />
           </BaseLayer>
         ))}
         {isExtensionEnabled('nysdot') &&

lib/editor/containers/ActiveGtfsEditor.js

@@ -45,9 +45,7 @@ import {
   uploadBrandingAsset
 } from '../actions/editor'
 import {createSnapshot, loadFeedVersionForEditing} from '../actions/snapshots'
-import {updateUserMetadata} from '../../manager/actions/user'
 import {findProjectByFeedSource} from '../../manager/util'
-import {setTutorialHidden} from '../../manager/actions/ui'
 import {getActivePatternStops, getControlPoints, getValidationErrors} from '../selectors'
 import {getTableById, getIdsFromParams} from '../util/gtfs'
 
@@ -165,13 +163,11 @@ const mapDispatchToProps = {
   setActiveGtfsEntity,
   setActivePatternSegment,
   setActiveStop,
-  setTutorialHidden,
   undoActiveTripPatternEdits,
   updateActiveGtfsEntity,
   updateEditSetting,
   updateMapSetting,
   updatePatternStops,
-  updateUserMetadata,
   uploadBrandingAsset
 }
 

lib/editor/util/map.js

@@ -34,11 +34,6 @@ import type {
   StopTime
 } from '../../types'
 
-export type MapLayer = {
-  id: string,
-  name: string
-}
-
 type R5Response = {
   data: {
     features: Array<GeoJsonLinestring & {properties: {toVertex: number}}>
@@ -73,25 +68,6 @@ export const getStopIcon = (
     iconSize: [24, 24]
   })
 
-export const MAP_LAYERS: Array<MapLayer> = [
-  {
-    name: 'Streets',
-    id: 'mapbox.streets'
-  },
-  {
-    name: 'Light',
-    id: 'mapbox.light'
-  },
-  {
-    name: 'Dark',
-    id: 'mapbox.dark'
-  },
-  {
-    name: 'Satellite',
-    id: 'mapbox.streets-satellite'
-  }
-]
-
 export function clickToLatLng (
   latlng: LatLng
 ): {stop_lat: number, stop_lon: number} {