Mapbox Driving Directions and jQuery

Question

I am working with the Mapbox driving directions plugin, doing my own geocoding from within a rails app and using jQuery to set the value of the #mapbox-directions-origin-input and #mapbox-directions-destination-input form inputs with either addresses or coordinates. When I set the values, nothing happens.

$(document).ready(function(){

  $('#mapbox-directions-origin-input').val($('#current_coordinates').text());

  $('.leaflet-marker-icon').click(function(){
    if($('.leaflet-popup').length > 0){
      $('#mapbox-directions-destination-input').val($('.marker-description').text());
    }

  })

})

However, when I copy and paste the exact same values in, the directions appear. Manually adding a space to the form inputs also helps the plugin retrieve the directions.

I presume there is some sort of keypress event I could trigger to mimic this behavior and get the values to pass through correctly, but I’m having a hard time seeing it in the code. I’m primarily looking here but coming up short: https://github.com/mapbox/mapbox-directions.js/blob/121427f30e096e6e839652b8baa2d7ac6660fad3/src/input_control.js

Does anyone have experience with this?

Andy Weiss Andy Weiss · Accepted Answer · 2015-08-21T16:36:08

Thanks for offering to help @kmandov!

I was able to get this working by doing an end run around the jQuery piece.

var directions = L.mapbox.directions();

var directionsLayer = L.mapbox.directions.layer(directions).addTo(map);

var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions).addTo(map);

var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions).addTo(map);

var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map);

var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions).addTo(map);

var destination = {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [<%= @direction.business.longitude %>, <%= @direction.business.latitude %>]
    },
    "properties": {
      "title": '<%= link_to @direction.business.name, business_url(@direction.business) %>',
      "description": '<%= @direction.business.full_street_address %>',
      "marker-color": "#3ca0d3",
      "marker-size": "large",
      "marker-symbol": "star"
    }
  };

  var origin = {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [<%= @current_location.longitude %>, <%= @current_location.latitude %>]
    },
    "properties": {
      "title": 'You',
      "description": '',
      "marker-color": "#ff0000",
      "marker-size": "large",
      "marker-symbol": "heart"
    }
  };

directions.setOrigin(origin).setDestination(destination).query();

Also thanks to the Mapbox team for answering my email!

Mapbox Driving Directions and jQuery

1 Answers