Custom Popup on each direction waypoint

11 posts / 0 new
Last post
treboralmasy
Custom Popup on each direction waypoint

Is there a way to add a popup for each waypoint?
So for example on waypoint 1 you could click and it would say something like "This is the first stop."
On waypoint 2: "This is the second stop, it is ADDRESS"
 On waypoint 3: "This is the 3rd stop."

Etc.


Thomas.Horacek
See the Extending
See the Extending DirectionsLayer section of https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest... createStartMarker createWaypointMarker createEndMarker Inside these functions you will need to bind popups to the markers and use a lookup table to set your desired text. https://leafletjs.com/reference-1.3.4.html#popup  

treboralmasy
Thanks for the help. My only

Thanks for the help. My only other issue now though, is with the markers it no longer shows the 'stop number' in the bubble (just a generic dark marker).
Is that something that is possible using the marker information?

I have to say the documentation for this is not especially good or intuitive. 
 


Thomas.Horacek
See https://developer

treboralmasy
Awesome that helps a lot.

Awesome that helps a lot. Thanks for the info. I do have one final question / issue though.
It seems as though the 'text' is no longer appearing after using the example under 'Extending DirectionsLayer'. Is it not possible to show the waypoint location with the directions layer?


Thomas.Horacek
Thats a combination marker
Thats a combination marker with text and icons, you will have to use at Text Marker https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest... Then format the text you want to display from the given location object.  

treboralmasy
Thanks again. I've Got it

Thanks again. I've Got it almost working like I needed. But I am having one other issue.

I am trying to pass info from the waypoint to the popup.
So for example, the user can input:
Name: Joe's House
Address: 123 main street
Note: Won't be home until 9:30

 

The issue I seem to be having is when the directions are returned, they are often different. So it may show up as:
123 E. Main St. 
So I can't really look it up in a table or anything as it wouldn't match what the user input (and this is information that is changed dynamically and has 10 or so waypoints at a time).

Is there a way to see what the input was the user put in as well as the response returned for when the directions are generated?

For reference the code I am using:

['123 Main st','987 east 15th st'];

directionsOptions = {

start : 'CURRENTLOCATION' , 

waypoints: waypoints ,

optimizeWaypoints: true,

}

 

L.mapquest.key = 'KEY';

 

var directions = L.mapquest.directions();

directions.route(directionsOptions, createMap);

 

var mapQuest_map;

var directionsLayer;

function createMap(err, response) {

$('routeDistance').html( response['route']['distance']);

    if ( response && response.route ) {

if( mapQuest_map == null){

console.log('mapquestnull');

mapQuest_map = L.mapquest.map('custom-directionsLayer-map', {

center: L.mapquest.util.getCenterFromBoundingBox(response.route.boundingBox),

layers: L.mapquest.tileLayer('map'),

zoom: L.mapquest.util.getZoomFromBoundingBox(response.route.boundingBox)

});

// mapQuest_map.addLayer(L.mapquest.trafficLayer());

 

}

 

if( directionsLayer == null ){

}else{

mapQuest_map.removeLayer(directionsLayer);

}

  

  

  

var DirectionsLayerWithCustomMarkers = L.mapquest.DirectionsLayer.extend({

 

 

 

createStartMarker: function(location, stopNumber) {

console.log('location');

console.log(location);

return L.marker(location.latLng, {

icon: L.mapquest.icons.flag({

primaryColor: '#FFFFFF',

secondaryColor: '#84DB65',

shadow: true,

size: 'sm',

symbol: 'Start'

  })

  

  }).bindPopup('<a href="hi">'+location['street']+'</a>');

},

 

 

 

 

 

 

createWaypointMarker: function( location, stopNumber ) {

  return L.mapquest.textMarker( location.latLng, {

draggable: false,

text: location['street']+' ('+location['sideOfStreet']+')',

type: 'marker',

icon: {

primaryColor: '#22407F',

secondaryColor: '#3B5998',

size: 'sm',

shadow: true,

symbol: stopNumber - 1

}

  }).bindPopup('<a href="hi">'+location['street']+'</a>');

},

 

 

 

 

 

createEndMarker: function(location, stopNumber) {

return L.marker(location.latLng, {

 

icon: L.mapquest.icons.flag({

primaryColor: '#FFFFFF',

secondaryColor: '#FF5757',

shadow: true,

size: 'sm',

symbol: 'End'

  })

  

  }).bindPopup('<a href="hi">'+location['street']+'</a>');

}

 

 

});

 

directionsLayer = new DirectionsLayerWithCustomMarkers({

directionsResponse: response

}).addTo(mapQuest_map);

 

}

}

 

 


MQBrianCoakley
Since you're using a route,
Since you're using a route, rather than an optimized route, the locations will stay in the same order as provided. So result location 1 is input location 1, result location 7 is input location 7. The code can refer back to an input array and pull those values from that array rather than the returned array.  

treboralmasy
This is using optimized

This is using optimized waypoints, so it doesn't look like that will work. It's all set up in the 'directions options' section. :)


treboralmasy
Looking around a bit, I

Looking around a bit, I assume the 'location sequence' is the order input and then reorganized? If so it should be relatively easy to use that.


MQBrianCoakley
Yup, looks like you're
Yup, looks like you're already on the right track.