<- Back

Find stations nearby the user location

Get the user location and get a list of stations, closeby to the user. Attention: This will not work if not served via https. (Because of current browser privacy restrictions)

Demo

Code excerpt

          
            jQuery(function($){
  const mobilitybox_access_token = '---LOGIN_OR_REGISTER_FOR_FREE_TO_INSERT_API_KEY_HERE---';
  const mobilitybox = new Mobilitybox(mobilitybox_access_token);
  mobilitybox.get_attributions().then((attributions)=>{
    $(".attributions").html(attributions.html);
  })
  HeaderHTML().appendTo($(".stations"));

  function get_stations_nearby(position){
    mobilitybox.find_stations_by_position({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude
    }).then((stations)=>{
      stations.map((station)=>{
        StationHTML(station).appendTo($(".stations"));
      });
    });
  }

  function print_error_message(error){
    alert(error.message);
  }

  // This will only work if served via https
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(get_stations_nearby, print_error_message);
  } else {
    alert("Geolocation is not supported by this browser.");
  }


});

function HeaderHTML(){
  return jQuery(
    '<a href="#" class="list-group-item list-group-item-action active">'+
        '<div class="d-flex w-100 justify-content-between">'+
          '<h5 class="mb-1">Stations nearby</h5>'+
        '</div>'+
      '</a>'
  )
}

function StationHTML(station){
  return jQuery(
    '<a href="#" class="station list-group-item list-group-item-action" data-station-id="'+station.id+'">'+
        '<div class="d-flex w-100 justify-content-between">'+
          '<h5 class="mb-1">'+station.name+'</h5>'+
        '</div>'+
      '</a>'
  )
}

Full HTML-Code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Find stations nearby the user location</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/mobilitybox/dist/mobilitybox.min.js"></script>

    <style>
      body {
          background-color: silver;
        }
      
        .attributions {
          border-radius: 0 3px 0 0;
          background-color: white;
          border-left: 0;
          border-bottom: 0;
          padding: 5px;
          font-size: 10px;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <br />
          <div class="list-group stations"></div>
        </div>
      </div>
    </div>
    <span class="fixed-bottom">
      <span class="attributions border text-muted font-weight-light"></span>
    </span>

    <script type="text/javascript">
      jQuery(function($){
        const mobilitybox_access_token = '---LOGIN_OR_REGISTER_FOR_FREE_TO_INSERT_API_KEY_HERE---';
        const mobilitybox = new Mobilitybox(mobilitybox_access_token);
        mobilitybox.get_attributions().then((attributions)=>{
          $(".attributions").html(attributions.html);
        })
        HeaderHTML().appendTo($(".stations"));
      
        function get_stations_nearby(position){
          mobilitybox.find_stations_by_position({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
          }).then((stations)=>{
            stations.map((station)=>{
              StationHTML(station).appendTo($(".stations"));
            });
          });
        }
      
        function print_error_message(error){
          alert(error.message);
        }
      
        // This will only work if served via https
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(get_stations_nearby, print_error_message);
        } else {
          alert("Geolocation is not supported by this browser.");
        }
      
      
      });
      
      function HeaderHTML(){
        return jQuery(
          '<a href="#" class="list-group-item list-group-item-action active">'+
              '<div class="d-flex w-100 justify-content-between">'+
                '<h5 class="mb-1">Stations nearby</h5>'+
              '</div>'+
            '</a>'
        )
      }
      
      function StationHTML(station){
        return jQuery(
          '<a href="#" class="station list-group-item list-group-item-action" data-station-id="'+station.id+'">'+
              '<div class="d-flex w-100 justify-content-between">'+
                '<h5 class="mb-1">'+station.name+'</h5>'+
              '</div>'+
            '</a>'
        )
      }
    </script>
  </body>
</html>