Improve Map Performance

Author: consindo

dist/photos/au-syd.JPG dist/photos/au-syd.jpgdist/photos/au-syd.JPG renamed to dist/photos/au-syd.jpg

@@ -242,7 +242,8 @@ export class stationStore extends Events {
       this.tripData = trips
       this.realtimeData = this.realtimeModifier(trips, realtime, stations, region)
       this.trigger('times', stations)
-    }).catch(() => {
+    }).catch((err) => {
+      console.error(err)
       this.trigger('error', t('station.error'))
     })
   }
@@ -329,7 +330,7 @@ export class stationStore extends Events {
     return d
   }
   realtimeModifier(tripData, rtData, stop, region) {
-    if (tripData[0].route_type === 2) {
+    if (tripData.length > 0 && tripData[0].route_type === 2) {
       const stationId = region + '|' + stop.split('+')[0]
       const station = this.StationData[stationId] || this.stationCache[stationId.split('|')[1]]
       if (typeof station === 'undefined') {

js/stores/stationStore.js

@@ -17,6 +17,15 @@ export default class RegionPopover extends React.Component {
     }
   }
   render() {
+    let dev = null
+    if (process.env.NODE_ENV !== 'production') {
+      dev = (
+        <li className="au-syd" onTouchTap={this.changeCity('au-syd')}>
+          <h2>{t('regions.au-syd-long').split(',')[0]}</h2>
+          <h1>{t('regions.au-syd-long').split(',')[1]}</h1>
+        </li>
+      )
+    }
     const className = 'region-popover ' + (this.props.visible ? 'show' : '')
     return (
       <div className={className}>
@@ -35,10 +44,7 @@ export default class RegionPopover extends React.Component {
               <h2>{t('regions.nz-wlg-long').split(',')[0]}</h2>
               <h1>{t('regions.nz-wlg-long').split(',')[1]}</h1>
             </li>
-            <li className="au-syd" onTouchTap={this.changeCity('au-syd')}>
-              <h2>{t('regions.au-syd-long').split(',')[0]}</h2>
-              <h1>{t('regions.au-syd-long').split(',')[1]}</h1>
-            </li>
+            {dev}
           </ul>
           <div className="vote">
             <p>{t('regions.vote', { appname: t('app.name') })}</p>

js/views/root/region.jsx

@@ -68,6 +68,7 @@ class Search extends React.Component {
   static propTypes = {
     history: PropTypes.object,
   }
+  myIcons = {}
   state = {
     station: '',
     stops: [],
@@ -95,17 +96,19 @@ class Search extends React.Component {
   }
   // stops requesting location when not in use
   componentWillReceiveProps() {
-    if (window.location.pathname === '/') {
-      this.setState({
-        showIcons: true,
-        currentStation: null
-      })
-    } else {
-      this.setState({
-        showIcons: false
-      })
-      CurrentLocation.stopWatch()
-    }
+    setTimeout(() => {
+      if (window.location.pathname === '/') {
+        this.setState({
+          showIcons: true,
+          currentStation: null
+        })
+      } else {
+        this.setState({
+          showIcons: false
+        })
+        CurrentLocation.stopWatch()
+      }
+    }, 300)
   }
   componentWillUnmount() {
     window.removeEventListener('online',  this.triggerRetry)
@@ -141,8 +144,11 @@ class Search extends React.Component {
   getData(lat, lon, dist) {
     fetch(`${local.endpoint}/auto/station/search?lat=${lat.toFixed(4)}&lon=${lon.toFixed(4)}&distance=${dist}`).then((response) => {
       response.json().then((data) => {
-        data.forEach(function(item) {
+        data.forEach((item) => {
           StationStore.stationCache[item.stop_id] = item
+          if (typeof(this.myIcons[item.route_type.toString()]) === 'undefined') {
+            this.myIcons[item.route_type.toString()] = IconHelper.getIcon(StationStore.currentCity, item.route_type)
+          }
         })
         this.setState({
           stops: data
@@ -201,19 +207,19 @@ class Search extends React.Component {
     }
   }
   moveEnd = (e) => {
-    var zoom = e.target.getZoom()
+    const zoom = e.target.getZoom()
     // we're basing this off screensize
     var screensize = document.body.offsetWidth
     if (document.body.offsetHeight > screensize) {
       screensize = document.body.offsetHeight
     }
-    var newPos = e.target.getCenter()
+    let newPos = e.target.getCenter()
     StationStore.getCity(newPos.lat, newPos.lng)
-    var dist = Math.ceil(0.2 * screensize)
+    let dist = Math.ceil(0.2 * screensize)
     if (zoom === 17) {
-      dist = Math.ceil(0.35 * screensize)
+      dist = Math.ceil(0.45 * screensize)
     } else if (zoom === 16) {
-      dist = Math.ceil(0.6 * screensize)
+      dist = Math.ceil(0.8 * screensize)
     } else if (zoom < 16) {
       this.setState({
         stops: []
@@ -285,13 +291,6 @@ class Search extends React.Component {
       )
     }
 
-    const myIcons = {}
-    this.state.stops.forEach((stop) => {
-      if (typeof(myIcons[stop.route_type.toString()]) === 'undefined') {
-        myIcons[stop.route_type.toString()] = IconHelper.getIcon(StationStore.currentCity, stop.route_type)
-      }
-    })
-
     let mapview
     if (this.state.loadmap) {
       mapview = (
@@ -310,7 +309,7 @@ class Search extends React.Component {
           {this.state.stops.map((stop) => {
             let icon, markericon
             icon = IconHelper.getRouteType(stop.route_type)
-            markericon = myIcons[stop.route_type.toString()]
+            markericon = this.myIcons[stop.route_type.toString()]
             if (icon === 'bus') {
               const stopSplit = stop.stop_name.split('Stop')
               const platformSplit = stop.stop_name.split('Platform')