fix: #118

* remove not loading pokemon spots map
* fallback to ip geolcation when device geolocation fails

src/views/map/index.js

@@ -1,9 +1,10 @@
-import { defer } from 'lodash'
+import axios from 'axios'
 
 import React, { Component } from 'react'
 import GoogleMap from 'google-map-react'
 import { observable, action, toJS } from 'mobx'
 import { observer } from 'mobx-react'
+import Alert from 'react-s-alert'
 
 import userLocation from '../../models/user-location.js'
 import settings from '../../models/settings.js'
@@ -17,8 +18,6 @@ import TotalDistance from './total-distance.js'
 import Autopilot from './autopilot.js'
 import Pokeball from './pokeball.js'
 
-const isLoading = observable(true)
-
 @observer
 class Map extends Component {
 
@@ -34,63 +33,64 @@ class Map extends Component {
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(
         this.handleGeolocationSuccess,
-        (error) => console.warn(error),
+        this.handleGeolocationFail,
         { enableHighAccuracy: true, maximumAge: 0 }
       )
     }
   }
 
-  @action handleGeolocationSuccess({ coords: { latitude, longitude } }) {
-    userLocation.replace([ latitude, longitude ])
-  }
-
-  @action handleDragMap = ({ zoom: newZoom }) => {
-    if (newZoom !== settings.zoom.get()) {
-      settings.zoom.set(newZoom)
-
-      // reset zoom if it has been changed by loading `pokemontSpots.kml`
-      if (isLoading.get() && newZoom === 3) {
-        defer(() => {
-          settings.zoom.set(17)
-          isLoading.set(false)
-        })
-      }
+  // geolocation API might be down, use http://ipinfo.io
+  // source: http://stackoverflow.com/a/32338735
+  handleGeolocationFail = async (geolocationErr) => {
+    Alert.warning(`
+      <strong>Error getting your geolocation, using IP location</strong>
+      <div class='stack'>${geolocationErr.message}</div>
+    `, { timeout: 3000 })
+
+    try {
+      const { data: { loc } } = await axios({ url: 'http://ipinfo.io/' })
+      const [ latitude, longitude ] = loc.split(',').map(coord => parseFloat(coord))
+      this.handleGeolocationSuccess({ coords: { latitude, longitude } })
+    } catch (xhrErr) {
+      Alert.error(`
+        <strong>Could not use IP location</strong>
+        <div>Try to restart app, report issue to github</div>
+        <div class='stack'>${xhrErr}</div>
+      `)
     }
   }
 
-  /* eslint max-len: 0 */
-  /* eslint no-new: 0 */
-  @action handleGoogleMapLoaded = (({ map }) => {
-    this.map = map
-    const lastLocation = toJS(userLocation)
-
-    // load pokemon spots map
-    isLoading.set(true)
-    const { KmlLayer } = window.google.maps
-    const url = 'https://gist.githubusercontent.com/iam4x/95e6ab058f1b6dd4fe696d597c2c7e1e/raw/0d2a7356345eccd4e7d397ff535de3ec004ca293/pokemonSpots.kml'
-    new KmlLayer({ url, map })
-
-    userLocation.replace(lastLocation)
-  })
+  @action handleGeolocationSuccess({ coords: { latitude, longitude } }) {
+    userLocation.replace([ latitude, longitude ])
+  }
 
   @action toggleMapDrag = () => {
     this.mapOptions.draggable = !this.mapOptions.draggable
     this.map.setOptions(toJS(this.mapOptions))
   }
 
   render() {
+    const [ latitude, longitude ] = userLocation
+
     return (
       <div className='google-map-container'>
-        <GoogleMap
-          ref='map'
-          zoom={ settings.zoom.get() }
-          center={ toJS(userLocation) }
-          onChange={ this.handleDragMap }
-          options={ () => this.mapOptions }
-          onGoogleApiLoaded={ this.handleGoogleMapLoaded }
-          yesIWantToUseGoogleMapApiInternals={ true }>
-          <Pokeball lat={ userLocation[0] } lng={ userLocation[1] } />
-        </GoogleMap>
+        { /* only display google map when user geolocated */ }
+        { (latitude && longitude) ?
+          <GoogleMap
+            ref='map'
+            zoom={ settings.zoom.get() }
+            center={ [ latitude, longitude ] }
+            onChange={ this.handleDragMap }
+            options={ () => this.mapOptions }
+            onGoogleApiLoaded={ this.handleGoogleMapLoaded }
+            yesIWantToUseGoogleMapApiInternals={ true }>
+            <Pokeball lat={ userLocation[0] } lng={ userLocation[1] } />
+          </GoogleMap> :
+          <div
+            style={ { position: 'absolute', top: '50%', left: '50%' } }
+            className='alert alert-info'>
+            <i className='fa fa-spin fa-2x fa-refresh' />
+          </div> }
 
         <div className='btn btn-drag-map'>
           { this.mapOptions.draggable ?