CODEWITHSUNDEEP
mapsleaflet
dbrosier
dbrosier

Reputation: 330

Drive Time and Distance from Leaflet Routing Machine

I’m building embedded content for a CRM using JQuery Datatables, Leaflet with OSM tiles, and Leaflet Routing Machine. Markers on the map and the rows of the table are based on the SAME JSON data, and I’m building interactions (using SHARED JavaScript functions) between the two libraries. For example, when a Datatable row is clicked, the row is highlighted, a popup is opened over the corresponding map marker, and a route is calculated using LRM which places the route line on the map. Conversely, when a map marker is clicked, all the same events happen because I'm calling the SAME function.

By default, the Itinerary LRM creates is hidden on the map, but I would like to parse out the Drive Time and Distance, and insert them in the popup opened by the shared function. I have spent four days pouring over the API documentation and searching the internet looking for clear instructions or code samples on how to access these values from the Itinerary object, but with no success. I have inspected every object I can figure out how to log to the console, but the data I need is in properties that come up ‘undefined’ when I try to access them.

Please, from start to finish, how do I access the Itinerary Summary?

When I init the map, I also init the Routing Control with null waypoints:

ctrl = L.Routing.control({ 
            waypoints: null, 
            units: 'imperial', 
            show: false, 
            createMarker: function() { return null; }
        }).addTo(map);

When a marker/row is clicked, I call this function:

function clickEffects(id, latlon) {

// set waypoints for routing control
ctrl.setWaypoints([ ctr, latlon])    

// scroll the table to the row for the clicked marker
table.$('tr.selected').removeClass('selected');         
var idx = table.row("#" + id).index()
table.row(idx).show().draw(false);
table.row(idx).nodes().to$().addClass('selected');


// create and open a popup
var popup = L.popup()
    .setLatLng(latlon)
    .setContent("Dan was here!!!")
    .openOn(map);
}

Upvotes: 0

Views: 1717

Answers (1)

dbrosier
dbrosier

Reputation: 330

Figured it out:

  1. Declared popup in global scope
  2. Bound default "Loading..." content when creating marker
  3. In shared function, set div's with target id's in new popup content (in addition to freshly retrieved ajax content.
  4. In "routesfound" event listener, used JQuery to insert formatted drive time and distance on target divs.

Works like a charm. Just need to expand on ajax data now...

Upvotes: 1

Related Questions