getting started with leaflet

6 posts / 0 new
Last post
getting started with leaflet

I am just getting started trying out the leaflet plugins, and had two questions.

One, using the routing, can I customize markers? 

Two, in the code below, I am putting the dir to console so I can see what is returned. But it appears to be calling this two times and I was wondering how to prevent that.

var map,

map ='map', {
layers: MQ.mapLayer(),
center: [ 42.346353, -71.415958 ],
zoom: 9

var dir = MQ.routing.directions().on('success',function(e){
var route = e.route;

locations: [
{latLng: {lat: 26.6125, lng: -80.0575}},
{latLng: {lat: 25.7786, lng: -80.2734}},
{latLng: {lat: 26.2176, lng: -80.2527}},
{latLng: {lat: 26.2405, lng: -80.2552}},
{latLng: {lat: 26.4086, lng: -80.2017}},
{latLng: {lat: 26.3193, lng: -80.1103}}
generalize: 0,
options: {
shapeFormat: 'raw'

directions: dir,
fitBounds: true

Nice timing, I've been
Nice timing, I've been messing around with the routing plugin a lot today.   First, yes, you can customize the route icons like the Route customization with clickable POI markers sample in the routing user guide.   Second, there is a route request and a route shape request that both fire the success event. You can check for the objects you need in the route response and only fire the code if those objects exist. This may be a bit unintuitive and I just walked back from talking to that team about more streamlined ways to approach that method - so it might change somewhere down the road in the next version. But for the time being, check for the existence of, I suspect, the narrative objects and only use the response if they exist.

Thanks for that info about

Thanks for that info about the multiple success calls.

For the markers, I am planning on having another object that contains my locations, but with extra needed properties - business name, database id, order, etc., and need to keep that synced with the markers. In the old javascript api, I just created the POIs with extra fields. What would be the best way in the leafletjs?

Unless you absolutely need
Unless you absolutely need draggable routes, I would skip the plugin and go to the directions api directly. That way you can more easily control the display of pois and the route highlight.   If you need draggable routes, use the same sample but use the stopnumber index to refer to the original location list. If using an optimized route you can refer to the location sequence.

So, get the directions object

So, get the directions object, and build eveything based on that? I don't need or even want draggable routes.

If I already have all the info for the markers (lat/lng, etc.) all I really need from the directions is the ribbon and narrative, and if optimizing the route, the locationSequence? 


for the location sequence array, is the key or the value the original position? 


Yup, I hit the directions api
Yup, I hit the directions api directly via jQuery ajax or a very stripped down document.body.appendChild(script) function all the time. You can get the shape (set generalize and shapeFormat parameters) and use the route, optimizedroute, or routematrix. The locationSequence is an array with the order of the original location array rearranged. The first, 0, and last, N, will always be the first and last. Everything between can be rearranged. So if locationSequence is 0,2,1,3 then the middle two locations were switched.