3

Hi I am trying to add custom markers using leaflet and drawing the route using Routing.control. I need to add a variable to markers to, as I need to update one of the marker positions from time to time. I will only ever have 3 marker or waypoints, a start, a 2nd and 3rd. I will probably need to move only the start marker.

The code to add the route which draws the route and adds the default markers is

var route = L.Routing.control({
     waypoints: [
    L.latLng(my_lat, my_lng),
    L.latLng(job_p_lat, job_p_lng),
    L.latLng(job_d_lat, job_d_lng)
 ],show: false, units: 'imperial',
 router: L.Routing.mapbox('API KEY HERE')
}).addTo(map);

I have tried q few things not worth showing as did totally nothing. Any advice would be great, thanks

kboul
  • 13,836
  • 5
  • 42
  • 53
larry chambers
  • 473
  • 1
  • 6
  • 19
  • Do you want to change the marker's icon? can you explain the term 'custom marker' ? – kboul Dec 28 '18 at 20:00
  • Yes, I would like to add a different color marker for each point and be able to update the marker named start – larry chambers Dec 28 '18 at 20:04
  • Update the marker named start? What does that mean? – kboul Dec 28 '18 at 20:10
  • define marker as start so I can update start markers coords – larry chambers Dec 28 '18 at 20:20
  • I am not sure I fully understand this. You can store a marker to a variable and then update the coordinates accordingly. I can help you regarding the marker different icon though – kboul Dec 28 '18 at 20:22
  • I have tried all sort like createMarker(34.07381780761041, -118.44177995896911,"This was a marker made from our function!") etc but no joy and thanks for your help – larry chambers Dec 28 '18 at 20:25

2 Answers2

10

If you look at this issue you will see that you question regarding the different marker icons has already been answered.

The createMarker option function for L.Routing.control can be used like:

// source: https://github.com/pointhi/leaflet-color-markers
var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),    // startmarker
    L.latLng(57.6792, 11.949) // endmarker
  ],
  createMarker: function(i, wp, nWps) {
    if (i === 0 || i === nWps - 1) {
      // here change the starting and ending icons
      return L.marker(wp.latLng, {
        icon: greenIcon // here pass the custom marker icon instance
      });
    } else {
      // here change all the others
      return L.marker(wp.latLng, {
        icon: yourOtherCustomIconInstance
      });
    }
  }
}).addTo(map);

Demo - open it in a incognito window as there is a request limitation to the API.

You should see something like this:

Update: to change the route dynamically you have to do sth like this:

store your routing control instance to a variable: var control = L.Routing.control({...})

and then change the marker position like this:

// this is the starting marker latitude
control.getRouter().options.waypoints[0].lat = L.latLng(59.74, 11.94);

// similarly for longitude and for ending marker to change the position dynamically

and then refresh the route graph:

control.route();
kboul
  • 13,836
  • 5
  • 42
  • 53
  • It doesnt seem to do anything, I will add it to my code and see what happens, also where in there where can I add var startmarker= and endmarker= etc? – larry chambers Dec 28 '18 at 20:49
  • I corrected the issue link, included an image and added some comments. – kboul Dec 28 '18 at 20:59
  • Super, I have it working thanks, so where you say // here change the starting and ending icons // how do I change the icons for the 3 points and define them as startmarker, middlemarker and endmarker? – larry chambers Dec 28 '18 at 21:01
  • You just pass the instance of your newly created custom marker with the custom icon and return it. What is not clear? In the above case greenIcon is the variable holding the newly created icon instance. yourOtherCustomIconInstance is another one – kboul Dec 28 '18 at 21:07
  • I hear you, so I create varredIcon = new L.Icon({ etc where do I add this? And name it endmarker? Sorry with the questions I am just not getting this at all! thanks – larry chambers Dec 28 '18 at 21:10
  • and I have added another icon: yourOtherCustomIconInstance and it still loads as the green marker? – larry chambers Dec 28 '18 at 21:20
  • Ok it adds a different color marker if I add a 3rd waypoint. But not clear why it doesnt when just 2 added? – larry chambers Dec 28 '18 at 21:24
  • It works with 2 marker if I change i === 0 || i === nWps + 1, also what about adding a popup? – larry chambers Dec 28 '18 at 21:26
1
createMarker: function(i, waypoints, n) {
                    var startIcon = L.icon({
                        iconUrl: '/maps/green.png',
                        iconSize: [30, 48]
                    });
                    var sampahIcon = L.icon({
                        iconUrl: '/maps/yellow.png',
                        iconSize: [30, 48]
                    });
                    var destinationIcon = L.icon({
                        iconUrl: '/maps/red.png',
                        iconSize: [30, 48]
                    });
                    if (i == 0) {
                        marker_icon = startIcon
                    } else if (i > 0 && i < n - 1) {
                        marker_icon = sampahIcon
                    } else if (i == n - 1) {
                        marker_icon = destinationIcon
                    }
                    var marker = L.marker(waypoints.latLng, {
                        draggable: false,
                        bounceOnAdd: false,
                        bounceOnAddOptions: {
                            duration: 1000,
                            height: 800,
                            function() {
                                (bindPopup(myPopup).openOn(mymap))
                            }
                        },
                        icon: marker_icon
                    }).bindPopup('<h4>' + mylocs[i].nama_tps + '</h4><br>' +
                        mylocs[i].mylat + '<br>' + mylocs[i].mylong)
                    return marker
                }
Yudhistira Muslim
  • 123
  • 1
  • 5