<script type="text/javascript">
  $(document).ready(function() {
    console.log("location")
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          window.location.replace(
            '<%= city_by_location_path %>?' +
              'latitude=' + pos.coords.latitude + '&' +
              'longitude=' + pos.coords.longitude)
        },
        (err) => {
          console.log(err)
          window.location.replace('<%= cities_path %>')
        }
      )
    } else {
      console.log("no location")
      window.location.replace('<%= cities_path %>')
    }
  })
</script>

<script type="text/javascript">
  $(document).ready(function() {

    $("#progress").hide()

    if (navigator.geolocation) {
      $("#progress").show()
      navigator.geolocation.getCurrentPosition(
        (pos) => {
          window.location.replace(
            '<%= city_by_location_path %>?' +
              'latitude=' + pos.coords.latitude + '&' +
              'longitude=' + pos.coords.longitude)
        },
        (err) => {
          console.log(err)
          window.location.replace('<%= cities_path %>')
        }
      )
    } else {
      window.location.replace('<%= cities_path %>')
    }
  })
</script>

<div id="progress" class="full-window centerable">
  <div class="centered">
    <h2>Detecting your location...</h2>
    <img src="https://s-media-cache-ak0.pinimg.com/originals/25/d7/83/25d78319891c914ec8e9aec6e04dc4a2.gif">
  </div>
</div>

Add a progress indicator to the root stub page.
Add a progress indicator to the root stub page.

If the user has to wait a few seconds while their location is detected,
they will see a spinning recyling symbol and a message, rather than an
empty page.
