Sat, 10/20/2018 - 01:16
#1
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.
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.
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?
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);
}
}
This is using optimized waypoints, so it doesn't look like that will work. It's all set up in the 'directions options' section. :)
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.