seanknox/index.html

## index.html

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]> ><! <![endif]-->
<html class='no-js' lang='en'>
  <!-- <![endif] -->
  <head>
    <meta charset='utf-8'>
    <meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'>
    <title>MapboxMq</title>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'>
    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet'>
    <link href='/stylesheets/main.css' rel='stylesheet'>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
      <!--[if lt IE 7]>
        <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
        <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
      <![endif]-->
    </script>
    <script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
    <script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
    <script src= "http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-map.js?key=Fmjtd%7Cluub2508nq%2C8w%3Do5-9u8wgr"></script>
    <script src= "http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-routing.js?key=Fmjtd%7Cluub2508nq%2C8w%3Do5-9u8wgr"></script>
    <script src='map.js'></script>
    <script src='route.js'></script>
  </head>
  <body class='application'>
    <div class='container-fluid'>
      <div class='fluid-row'>
        <nav class='navbar navbar-default' role='navigation'>
          <a class='navbar-brand' href='#'>Mapbox + Mapquest Open</a>
        </nav>
        <div class='container'>
          <div class='col-md-8'>
            <div id='map'></div>
          </div>
          <div class='col-md-4'>
            <div class='container'>
              <p></p>
              <div class='row'>
                <button class='btn btn-success btn-lg btn-block' id='geolocate' type='button'>
                  <span class='glyphicon glyphicon-map-marker'>Geolocate</span>
                </button>
                <form role='form'>
                  <div class='form-group'>
                    <div class='input-group'>
                      <label for='origin'></label>
                      <input class='form-control input-lg' id='orig' placeholder='Enter starting location' type='text'>
                      <span class='input-group-addon'><img src='/images/compass.png'></span>
                    </div>
                  </div>
                  <div class='form-group'>
                    <div class='input-group'>
                      <label for='destination1'></label>
                      <input class='form-control input-lg' id='dest' placeholder='Enter destination' type='text'>
                      <span class='input-group-addon'><img src='/images/map_marker.png'></span>
                    </div>
                  </div>
                </form>
                <div class='col-md-11 col-md-offset-1'>
                  <div class='btn-group btn-group-justified'>
                    <div class='btn btn-default' id='bicycle'>
                      <img src='/images/cycling.png' style='vertical-align: super;'>
                    </div>
                    <div class='btn btn-default' id='fastest'>
                      <img src='/images/car.png' style='vertical-align: super;'>
                    </div>
                    <div class='btn btn-default' id='pedestrian'>
                      <img src='/images/walk.png' style='vertical-align: super;'>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <p>
                  <div class='alert alert-warning' id='error' style='display: none'></div>
                </p>
                <div id='directionsPanel'>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script>
          $(document).ready(function() {
            leaflet_init();
          });
        </script>
      </div>
    </div>
  </body>
</html>

## main.css
#pane {
  position:fixed;
  top:0px;
  bottom:0px;
  right:0px;
  width:66.6666%;
}

#map {
  width: 100%;
  height: 550px;
  padding-bottom: 10px;
  transition:opacity 250ms;
  -moz-transition:opacity 250ms;
  -webkit-transition:opacity 250ms;
}

#directionsPanel {
  margin-top: 10px;
  position: relative;
  height: 320px;
  overflow: scroll;
}

#geolocate {
    /* position: absolute; */
    /* top: 2%; */
    /* left: 85%; */
    /* width: 158px; */
    /* margin-left: -80px; */
    /* z-index: 1000; */
    margin-bottom: 10px;
}

## map.js
var map,
    geolocate

function leaflet_init() {
  "use strict"

  var mapquest = MQ.mapLayer() // Need this initialized to use routing service

  /* Using my own hosted Mapbox Streets Map for base layer */
  var baseMap = L.mapbox.tileLayer('smk.map-0ek7rfrq')
  map = L.mapbox.map('map', baseMap, {
    center: [37.7688, -122.435],
    zoom: 12
  })

  map.addLayer(baseMap)

  geolocate = document.getElementById('geolocate')

  if (!navigator.geolocation) {
      geolocate.innerHTML = 'geolocation is not available'
  } else {
      geolocate.onclick = function (e) {
          e.preventDefault()
          e.stopPropagation()
          map.locate()
      }
      placeGeoMarker()
  }

  $('.btn-group').find('.btn').on('click', function(e) {
    var start = $('form input:text#orig').val(),
        destination = $('form input:text#dest').val(),
        mode = this.id

    route( start, destination, mode )
  })

}

function placeGeoMarker() {
  "use strict"

  // Once we've got a position, zoom and center the map
  // on it, and add a single marker.
  map.on('locationfound', function(e) {
      map.fitBounds(e.bounds)

      map.markerLayer.setGeoJSON({
          type: "Feature",
          geometry: {
              type: "Point",
              coordinates: [e.latlng.lng, e.latlng.lat]
          },
          properties: {
              'marker-color': '#000',
              'marker-symbol': 'star-stroked'
          }
      })

      $('form input:text#orig').val(e.latlng.lng + ', ' + e.latlng.lat)

      // And hide the geolocation button
      // geolocate.parentNode.removeChild(geolocate);
  })

  // If the user chooses not to allow their location
  // to be shared, display an error message.
  map.on('locationerror', function() {
      geolocate.innerHTML = 'geolocation disabled or position not found'
      geolocate.setAttribute("disabled", "disabled")
  })
}

## route.js
var routeLayer

function resetMap() {
  "use strict"

  $('#error').hide()
  map.markerLayer.setGeoJSON([]) // Clear the old marker
  document.getElementById('directionsPanel').innerHTML = "" // Clear directions panel

  /* Remove route layer if it exists */
  if ( routeLayer && routeLayer._leaflet_id ) {
    map.removeLayer(routeLayer)
  }
}

function parseLocation(loc) {
  var re = /[-]?\d+(?:\.\d+)?,\s[-]?\d+(?:\.\d+)?/

  if (re.test(loc)) {
    // it's a lat/lng pair if matches
    var latlng = loc.split(", ");
    loc = { latLng: { lat: latlng[1], lng: latlng[0] }};
  }

  return loc
}

function route(origin, destination, mode) {
  "use strict"

  var start = parseLocation(origin),
      dest = parseLocation(destination)

  resetMap() // clear the map

  var dir = MQ.routing.directions()
      .on('success', function(data) {
          var legs = data.route.legs,
              locations = data.route.locations,
              html = '',
              maneuvers

          if (legs && legs.length) {
            // html += '<table><tbody>';
            for (var i=0; i<legs.length; i++) {
              maneuvers = legs[i].maneuvers
              // html += '<tr>';
              // html += '<td>';
                for (var m=0; m<maneuvers.length; m++) {
                    var maneuver = maneuvers[m]
                    if (maneuver.iconUrl) {
                      html += '<img src="' + maneuver.iconUrl + '"> '
                    }

                    for (var k = 0; k < maneuver.signs.length; k++) {
                      var sign = maneuver.signs[k]
                      if (sign && sign.url) {
                        html += '<img src="' + sign.url + '"> '
                      }
                    }
                    // html += (m+1) + '. ';
                    html += maneuver.narrative + '<br />'
                    // html += '</td><td>' + maneuver.narrative + '</td>';
                    // html += '</tr>';
                }
              // html += '<hr>';
            }

              html += '</tbody></table>'
              // L.DomUtil.get('directionsPanel').innerHTML = html;
              document.getElementById('directionsPanel').innerHTML = html
          }
      })

  dir.route({
    locations: [
        start,
        dest
        // '1225 W Virginia Ave, Denver, CO',
        // '630 E 6th Ave, Denver, CO 80203',
        // '5670 E Evans Ave, Denver, CO 80222'
    ],
    options: {  destinationManeuverDisplay: true,
                narrativeType: 'microformat',
                enhancedNarrative: true,
                routeType: mode,
                ambiguities: "ignore"
    }
  })

  var CustomRouteLayer = MQ.Routing.RouteLayer.extend({
    createStopMarker: function(location, stopNumber) {
        var custom_icon,
            address,
            marker,
            addressPopup

        custom_icon = L.icon({
            iconUrl: 'http://a.tiles.mapbox.com/v3/marker/pin-m+CC0033.png',
            // iconSize: [20, 29],
            iconAnchor: [10, 29],
            popupAnchor: [0, -29]
        })

        addressPopup = location.street + '</br>' + location.adminArea5 + ', ' + location.adminArea3

        marker = L.marker(location.latLng, { icon: custom_icon })
            .bindPopup(addressPopup)
            .openPopup()
            .addTo(map)

        return marker
    }
  })

  routeLayer = new CustomRouteLayer({
      directions: dir,
      fitBounds: true,
      ribbonOptions: {
        draggable: false,
        ribbonDisplay: { color: '#FF8C00', opacity: 0.6 },
        widths: [ 15, 15, 15, 15, 14, 13, 12, 12, 12, 11, 11, 11, 11, 12, 13, 14, 15 ]
    }
  })

  map.addLayer(routeLayer)

}

function dr(){ // make a directions request with two addresses.  the MapQuest Open Directions Service uses Nominatum in the background to geocode the addresses.
  script=document.createElement('script');
  script.type='text/javascript';
  script.src="http://open.mapquestapi.com/directions/v1/route?callback=sr&ambiguities=ignore&narrativeType=text&shapeFormat=raw&generalize=5&routeType="+"fastest"+"&from="+document.getElementById("orig").value+"&to="+document.getElementById("dest").value;
  document.body.appendChild(script);
}


function sr(data){ // create a nice elevation chart.
  console.log("called")
  try{map.removeLayer(polyline)}catch(e){};
  var lls=new Array();
  document.getElementById("directionsPanel").innerHTML="<img id=\"eleimg\" src=\"http://open.mapquestapi.com/elevation/v1/chart?shapeFormat=raw&height=250&width=400&latLngCollection="+data.route.shape.shapePoints+"\" />";
  for(idx=0; idx<data.route.shape.shapePoints.length/2; idx++)
    lls.push(new L.LatLng(data.route.shape.shapePoints[idx*2],data.route.shape.shapePoints[idx*2+1]));
    map.addLayer(polyline=new L.Polyline(lls,{color:"red"}));
    map.fitBounds(new L.LatLngBounds(lls));
    for(man in data.route.legs[0].maneuvers)
      map.addLayer(new L.Marker(new L.LatLng(data.route.legs[0].maneuvers[man].startPoint.lat,data.route.legs[0].maneuvers[man].startPoint.lng),              {title:data.route.legs[0].maneuvers[man].narrative}));
}

	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
	<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
	<!--[if gt IE 8]> ><! <![endif]-->
	<html class='no-js' lang='en'>
	<!-- <![endif] -->
	<head>
	<meta charset='utf-8'>
	<meta content='IE=edge, chrome=1' http-equiv='X-UA-Compatible'>
	<title>MapboxMq</title>
	<meta content='width=device-width, initial-scale=1.0' name='viewport'>
	<link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet'>
	<link href='/stylesheets/main.css' rel='stylesheet'>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
	<!--[if lt IE 7]>
	<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
	<script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
	<![endif]-->
	</script>
	<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js'></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
	<script src= "http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-map.js?key=Fmjtd%7Cluub2508nq%2C8w%3Do5-9u8wgr"></script>
	<script src= "http://beta.mapquestapi.com/sdk/leaflet/v0.1/mq-routing.js?key=Fmjtd%7Cluub2508nq%2C8w%3Do5-9u8wgr"></script>
	<script src='map.js'></script>
	<script src='route.js'></script>
	</head>
	<body class='application'>
	<div class='container-fluid'>
	<div class='fluid-row'>
	<nav class='navbar navbar-default' role='navigation'>
	<a class='navbar-brand' href='#'>Mapbox + Mapquest Open</a>
	</nav>
	<div class='container'>
	<div class='col-md-8'>
	<div id='map'></div>
	</div>
	<div class='col-md-4'>
	<div class='container'>
	<p></p>
	<div class='row'>
	<button class='btn btn-success btn-lg btn-block' id='geolocate' type='button'>
	<span class='glyphicon glyphicon-map-marker'>Geolocate</span>
	</button>
	<form role='form'>
	<div class='form-group'>
	<div class='input-group'>
	<label for='origin'></label>
	<input class='form-control input-lg' id='orig' placeholder='Enter starting location' type='text'>
	<span class='input-group-addon'><img src='/images/compass.png'></span>
	</div>
	</div>
	<div class='form-group'>
	<div class='input-group'>
	<label for='destination1'></label>
	<input class='form-control input-lg' id='dest' placeholder='Enter destination' type='text'>
	<span class='input-group-addon'><img src='/images/map_marker.png'></span>
	</div>
	</div>
	</form>
	<div class='col-md-11 col-md-offset-1'>
	<div class='btn-group btn-group-justified'>
	<div class='btn btn-default' id='bicycle'>
	<img src='/images/cycling.png' style='vertical-align: super;'>
	</div>
	<div class='btn btn-default' id='fastest'>
	<img src='/images/car.png' style='vertical-align: super;'>
	</div>
	<div class='btn btn-default' id='pedestrian'>
	<img src='/images/walk.png' style='vertical-align: super;'>
	</div>
	</div>
	</div>
	</div>
	<div class='row'>
	<p>
	<div class='alert alert-warning' id='error' style='display: none'></div>
	</p>
	<div id='directionsPanel'>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	$(document).ready(function() {
	leaflet_init();
	});
	</script>
	</div>
	</div>
	</body>
	</html>
	#pane {
	position:fixed;
	top:0px;
	bottom:0px;
	right:0px;
	width:66.6666%;
	}

	#map {
	width: 100%;
	height: 550px;
	padding-bottom: 10px;
	transition:opacity 250ms;
	-moz-transition:opacity 250ms;
	-webkit-transition:opacity 250ms;
	}

	#directionsPanel {
	margin-top: 10px;
	position: relative;
	height: 320px;
	overflow: scroll;
	}

	#geolocate {
	/* position: absolute; */
	/* top: 2%; */
	/* left: 85%; */
	/* width: 158px; */
	/* margin-left: -80px; */
	/* z-index: 1000; */
	margin-bottom: 10px;
	}
	var map,
	geolocate

	function leaflet_init() {
	"use strict"

	var mapquest = MQ.mapLayer() // Need this initialized to use routing service

	/* Using my own hosted Mapbox Streets Map for base layer */
	var baseMap = L.mapbox.tileLayer('smk.map-0ek7rfrq')
	map = L.mapbox.map('map', baseMap, {
	center: [37.7688, -122.435],
	zoom: 12
	})

	map.addLayer(baseMap)

	geolocate = document.getElementById('geolocate')

	if (!navigator.geolocation) {
	geolocate.innerHTML = 'geolocation is not available'
	} else {
	geolocate.onclick = function (e) {
	e.preventDefault()
	e.stopPropagation()
	map.locate()
	}
	placeGeoMarker()
	}

	$('.btn-group').find('.btn').on('click', function(e) {
	var start = $('form input:text#orig').val(),
	destination = $('form input:text#dest').val(),
	mode = this.id

	route( start, destination, mode )
	})

	}

	function placeGeoMarker() {
	"use strict"

	// Once we've got a position, zoom and center the map
	// on it, and add a single marker.
	map.on('locationfound', function(e) {
	map.fitBounds(e.bounds)

	map.markerLayer.setGeoJSON({
	type: "Feature",
	geometry: {
	type: "Point",
	coordinates: [e.latlng.lng, e.latlng.lat]
	},
	properties: {
	'marker-color': '#000',
	'marker-symbol': 'star-stroked'
	}
	})

	$('form input:text#orig').val(e.latlng.lng + ', ' + e.latlng.lat)

	// And hide the geolocation button
	// geolocate.parentNode.removeChild(geolocate);
	})

	// If the user chooses not to allow their location
	// to be shared, display an error message.
	map.on('locationerror', function() {
	geolocate.innerHTML = 'geolocation disabled or position not found'
	geolocate.setAttribute("disabled", "disabled")
	})
	}
	var routeLayer

	function resetMap() {
	"use strict"

	$('#error').hide()
	map.markerLayer.setGeoJSON([]) // Clear the old marker
	document.getElementById('directionsPanel').innerHTML = "" // Clear directions panel

	/* Remove route layer if it exists */
	if ( routeLayer && routeLayer._leaflet_id ) {
	map.removeLayer(routeLayer)
	}
	}

	function parseLocation(loc) {
	var re = /[-]?\d+(?:\.\d+)?,\s[-]?\d+(?:\.\d+)?/

	if (re.test(loc)) {
	// it's a lat/lng pair if matches
	var latlng = loc.split(", ");
	loc = { latLng: { lat: latlng[1], lng: latlng[0] }};
	}

	return loc
	}

	function route(origin, destination, mode) {
	"use strict"

	var start = parseLocation(origin),
	dest = parseLocation(destination)

	resetMap() // clear the map

	var dir = MQ.routing.directions()
	.on('success', function(data) {
	var legs = data.route.legs,
	locations = data.route.locations,
	html = '',
	maneuvers

	if (legs && legs.length) {
	// html += '<table><tbody>';
	for (var i=0; i<legs.length; i++) {
	maneuvers = legs[i].maneuvers
	// html += '<tr>';
	// html += '<td>';
	for (var m=0; m<maneuvers.length; m++) {
	var maneuver = maneuvers[m]
	if (maneuver.iconUrl) {
	html += '<img src="' + maneuver.iconUrl + '"> '
	}

	for (var k = 0; k < maneuver.signs.length; k++) {
	var sign = maneuver.signs[k]
	if (sign && sign.url) {
	html += '<img src="' + sign.url + '"> '
	}
	}
	// html += (m+1) + '. ';
	html += maneuver.narrative + '<br />'
	// html += '</td><td>' + maneuver.narrative + '</td>';
	// html += '</tr>';
	}
	// html += '<hr>';
	}

	html += '</tbody></table>'
	// L.DomUtil.get('directionsPanel').innerHTML = html;
	document.getElementById('directionsPanel').innerHTML = html
	}
	})

	dir.route({
	locations: [
	start,
	dest
	// '1225 W Virginia Ave, Denver, CO',
	// '630 E 6th Ave, Denver, CO 80203',
	// '5670 E Evans Ave, Denver, CO 80222'
	],
	options: { destinationManeuverDisplay: true,
	narrativeType: 'microformat',
	enhancedNarrative: true,
	routeType: mode,
	ambiguities: "ignore"
	}
	})

	var CustomRouteLayer = MQ.Routing.RouteLayer.extend({
	createStopMarker: function(location, stopNumber) {
	var custom_icon,
	address,
	marker,
	addressPopup

	custom_icon = L.icon({
	iconUrl: 'http://a.tiles.mapbox.com/v3/marker/pin-m+CC0033.png',
	// iconSize: [20, 29],
	iconAnchor: [10, 29],
	popupAnchor: [0, -29]
	})

	addressPopup = location.street + '</br>' + location.adminArea5 + ', ' + location.adminArea3

	marker = L.marker(location.latLng, { icon: custom_icon })
	.bindPopup(addressPopup)
	.openPopup()
	.addTo(map)

	return marker
	}
	})

	routeLayer = new CustomRouteLayer({
	directions: dir,
	fitBounds: true,
	ribbonOptions: {
	draggable: false,
	ribbonDisplay: { color: '#FF8C00', opacity: 0.6 },
	widths: [ 15, 15, 15, 15, 14, 13, 12, 12, 12, 11, 11, 11, 11, 12, 13, 14, 15 ]
	}
	})

	map.addLayer(routeLayer)

	}

	function dr(){ // make a directions request with two addresses. the MapQuest Open Directions Service uses Nominatum in the background to geocode the addresses.
	script=document.createElement('script');
	script.type='text/javascript';
	script.src="http://open.mapquestapi.com/directions/v1/route?callback=sr&ambiguities=ignore&narrativeType=text&shapeFormat=raw&generalize=5&routeType="+"fastest"+"&from="+document.getElementById("orig").value+"&to="+document.getElementById("dest").value;
	document.body.appendChild(script);
	}


	function sr(data){ // create a nice elevation chart.
	console.log("called")
	try{map.removeLayer(polyline)}catch(e){};
	var lls=new Array();
	document.getElementById("directionsPanel").innerHTML="<img id=\"eleimg\" src=\"http://open.mapquestapi.com/elevation/v1/chart?shapeFormat=raw&height=250&width=400&latLngCollection="+data.route.shape.shapePoints+"\" />";
	for(idx=0; idx<data.route.shape.shapePoints.length/2; idx++)
	lls.push(new L.LatLng(data.route.shape.shapePoints[idx2],data.route.shape.shapePoints[idx2+1]));
	map.addLayer(polyline=new L.Polyline(lls,{color:"red"}));
	map.fitBounds(new L.LatLngBounds(lls));
	for(man in data.route.legs[0].maneuvers)
	map.addLayer(new L.Marker(new L.LatLng(data.route.legs[0].maneuvers[man].startPoint.lat,data.route.legs[0].maneuvers[man].startPoint.lng), {title:data.route.legs[0].maneuvers[man].narrative}));
	}