directions

by abenrob

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/superhero/bootstrap.min.css">
<div class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <div class="navbar-brand">
                VéloIsère
            </div>
            
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <form class="navbar-form navbar-right">
              <button id="get_position" type="button" class="form-group btn btn-primary">Get position</button>
              <div class="form-group">
                <input id="address_search" type="text" class="form-control" placeholder="Search" disabled>
              </div>
              <button id="get_address" class="btn btn-success" onclick="return false;" disabled>get address</button>
            </form>
        </div>
    </div>
</div>

<div id="map"></div>

CSS

body { 
  margin:0; 
  padding:0; 
}
.navbar {
  z-index: 2000;
}
#map { 
  position:absolute; 
  top:41px; 
  bottom:0; 
  width:100%; 
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiYWJlbnJvYiIsImEiOiJEYmh3WWNJIn0.fus8CLBKPBHDvSxiayhJyg';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([45.186502, 5.736339], 13);
var pos = [], posMarker, addressMarker;
function closeNav(){
	var navMain = $(".navHeaderCollapse");
  navMain.collapse('hide');
};

function geo_success(position) {
  pos = [position.coords.latitude, position.coords.longitude];
  console.log(pos);
  map.panTo(pos);
  if (posMarker){map.removeLayer(posMarker)};
  posMarker = L.marker(pos,{
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'bicycle',
        'marker-color': '#fa0'
    })
  }).addTo(map);
  $("#get_address").prop('disabled',false);
  $("#address_search").prop('disabled', false);
  closeNav();
}

function geo_error(err) {
  console.log(err,"Sorry, no position available.");
}

var geo_options = {
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
};

function getUserLocation(){
  if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options);
  } else {
    console.log('No geolocation available');
  }
}

$("#get_position").click(function() {
  getUserLocation();
});

$("#get_address").click(function() {
  var search = $("#address_search").val();
  // https://adresse.data.gouv.fr/api/
  var uri = "https://api-adresse.data.gouv.fr/search/?q=" + search;
  if (pos.length > 0) {
  	uri = uri + "&lat=" + pos[0] + "&lon=" + pos[1];
  }
  $.getJSON(uri , function( data ) {
    if (addressMarker){map.removeLayer(addressMarker)};
    var coords = data.features[0].geometry.coordinates;
    var addressPos = [coords[1],coords[0]];
    console.log(addressPos);
    addressMarker = L.marker(addressPos, {
      icon: L.mapbox.marker.icon({
          'marker-size': 'large',
          'marker-symbol': 'rocket',
          'marker-color': '#66ccff'
      })
    }).addTo(map);
    var group = new...