fix(leaflet): leaflet 1.0 fixes

Author: landonreed

lib/editor/components/FeedInfoPanel.js

@@ -49,6 +49,7 @@ export default class FeedInfoPanel extends Component {
       position: 'absolute',
       right: this.state.right,
       bottom: 20,
+      zIndex: 500,
       borderRadius: '5px',
       // height: panelHeight,
       width: `${panelWidth}px`

lib/editor/components/GtfsEditor.js

@@ -14,6 +14,8 @@ import ActiveTimetableEditor from '../containers/ActiveTimetableEditor'
 import ActiveFeedInfoPanel from '../containers/ActiveFeedInfoPanel'
 
 import { getConfigProperty } from '../../common/util/config'
+import { getEntityName } from '../util/gtfs'
+import { gtfsIcons } from '../util/ui'
 
 export default class GtfsEditor extends Component {
   static propTypes = {
@@ -100,6 +102,15 @@ export default class GtfsEditor extends Component {
   showConfirmModal (props) {
     this.refs.confirmModal.open(props)
   }
+  getEditorTitle () {
+    let title = `${getConfigProperty('application.title')} - GTFS Editor`
+    if (this.props.activeEntity) {
+      title += ` - ${getEntityName(this.props.activeComponent, this.props.activeEntity)}`
+    } else if (this.props.activeComponent) {
+      title += ` - ${gtfsIcons.find(i => i.id === this.props.activeComponent).label}`
+    }
+    return title
+  }
   getMapOffset (activeComponent, dWidth, activeEntityId, lWidth) {
     return activeComponent === 'feedinfo'
       ? dWidth
@@ -161,7 +172,7 @@ export default class GtfsEditor extends Component {
       : null
     return (
       <div>
-        <Title>{`${getConfigProperty('application.title')} - GTFS Editor`}</Title>
+        <Title>{this.getEditorTitle()}</Title>
         <EditorSidebar
           activeComponent={activeComponent}
           expanded={sidebarExpanded}

lib/editor/components/map/EditorMap.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Map, ZoomControl, GeoJson, FeatureGroup } from 'react-leaflet'
+import { Map, ZoomControl, GeoJSON, FeatureGroup } from 'react-leaflet'
 import { shallowEqual } from 'react-pure-render'
 
 import EditorMapLayersControl from './EditorMapLayersControl'
@@ -278,7 +278,7 @@ export default class EditorMap extends Component {
           stops={tableData.stop} />
         {!hidden && this.getMapComponents(activeComponent, activeEntity, subEntityId, activePattern, tableData.stop, editSettings, mapState)}
         {mapState.routesGeojson &&
-          <GeoJson
+          <GeoJSON
             key={mapState.routesGeojson.key}
             data={mapState.routesGeojson} />
         }

lib/editor/components/map/RouteLayer.js

@@ -4,17 +4,17 @@ a layer for drawing route alignments, adapted from StopLayer
 
 const MIN_ZOOM = 1 // don't draw stops below this zoom
 
-import { BaseTileLayer } from 'react-leaflet'
-import { TileLayer } from 'leaflet'
+import { GridLayer } from 'react-leaflet'
+import { Canvas } from 'leaflet'
 
-export default class StopLayer extends BaseTileLayer {
+export default class RouteLayer extends GridLayer {
   static defaultProps = {
     minZoom: MIN_ZOOM
   }
 
   componentWillMount () {
     super.componentWillMount()
-    this.leafletElement = new TileLayer.Canvas({
+    this.leafletElement = new Canvas({
       // retina: '@2x',
       detectRetina: true
     })

lib/gtfs/components/GtfsMap.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { shallowEqual } from 'react-pure-render'
 import { Browser } from 'leaflet'
-import { Map, Marker, TileLayer, GeoJson, FeatureGroup, Rectangle } from 'react-leaflet'
+import { Map, Marker, TileLayer, GeoJSON, FeatureGroup, Rectangle } from 'react-leaflet'
 
 import { getFeedId } from '../../common/util/modules'
 import PatternGeoJson from './PatternGeoJson'
@@ -116,7 +116,7 @@ export default class GtfsMap extends Component {
       comps = this.props.version.isochrones.features.map((iso, index) => {
         if (iso.properties.time !== bandTime) return null
         return (
-          <GeoJson
+          <GeoJSON
             key={Math.random()}
             data={{type: 'MultiPolygon', coordinates: iso.geometry.coordinates}}
             color={'blue'}

lib/gtfs/components/PatternGeoJson.js

@@ -1,14 +1,14 @@
 import Icon from '@conveyal/woonerf/components/icon'
 import React, {PropTypes} from 'react'
-import { GeoJson, Popup } from 'react-leaflet'
+import { GeoJSON, Popup } from 'react-leaflet'
 import { Button } from 'react-bootstrap'
 
 import { getRouteName } from '../../editor/util/gtfs'
 import { getFeed } from '../../common/util/modules'
 
 const COLORS = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a']
 
-export default class PatternGeoJson extends GeoJson {
+export default class PatternGeoJson extends GeoJSON {
   static propTypes = {
     pattern: PropTypes.object,
     index: PropTypes.number,
@@ -54,7 +54,7 @@ export default class PatternGeoJson extends GeoJson {
       </Popup>
     )
     return (
-      <GeoJson
+      <GeoJSON
         color={COLORS[index % (COLORS.length - 1)]}
         key={pattern.pattern_id}
         data={pattern.geometry}
@@ -64,7 +64,7 @@ export default class PatternGeoJson extends GeoJson {
         }}
       >
         {popup}
-      </GeoJson>
+      </GeoJSON>
     )
   }
 }

lib/gtfs/components/gtfsmapsearch.js

@@ -61,14 +61,16 @@ export default class GtfsMapSearch extends Component {
     }
     return (
       <div>
-        <GtfsSearch
-          ref='mapSearch'
-          feeds={this.props.feeds}
-          limit={100}
-          placeholder={this.props.placeholder}
-          onChange={(input) => this.handleSelection(input)}
-          entities={this.state.searching}
-        />
+        <div className='gtfs-map-select'>
+          <GtfsSearch
+            ref='mapSearch'
+            feeds={this.props.feeds}
+            limit={100}
+            placeholder={this.props.placeholder}
+            onChange={(input) => this.handleSelection(input)}
+            entities={this.state.searching}
+          />
+        </div>
         <ul style={{marginBottom: 0}} className='list-inline'>
           <li style={{width: '50%'}} className='text-left'>
             <Button

lib/index.css

@@ -1,7 +1,6 @@
 
 @import url(node_modules/font-awesome/css/font-awesome.css);
 @import url(node_modules/leaflet/dist/leaflet.css);
-@import url(node_modules/leaflet-draw/dist/leaflet.draw.css);
 
 @import url(node_modules/bootstrap/dist/css/bootstrap.min.css);
 @import url(node_modules/react-bootstrap-table/dist/react-bootstrap-table.min.css);
@@ -14,5 +13,4 @@
 @import url(node_modules/rc-slider/assets/index.css);
 @import url(node_modules/react-toggle/style.css);
 
-@import url(lib/common/style.css);
-@import url(lib/alerts/style.css);
+@import url(lib/style.css);

lib/style.css

@@ -104,7 +104,7 @@
   font-weight: bold;
   text-align: center;
   line-height: 120%;
-  background-image: url(../assets/application_icon.png);
+  background-image: url(assets/application_icon.png);
   background-size: contain;
 }
 
@@ -123,3 +123,8 @@
 .react-bs-table-tool-bar {
   margin: 0px;
 }
+
+
+.gtfs-map-select > .Select > .Select-menu-outer {
+	z-index: 2000;
+}