Adding a Point on the map as a waypoint?

[habib-farhan]

I have a bunch of poi's loaded on the map form external source and i am trying to add them as waypoint, so in the popup with each marker i bind a button to add that poi as a waypoint, but as soon as click on it, another marker is put on the map which is expected, but the problem is, the point that appears, is located 5-10 pixels away from the poi, even when they have the same co-ordinates. Why is that? And how can i not put a new marker on the map rather just use the poi and route through it without having to have an additional marker on the map. Looking for some help!

[perliedman]

Hard to tell without seeing the actual implementation, but my guess is that your POI marker's icon doesn't have its anchor point set properly. This means the icon's tip will not point at the markers coordinate. From your screenshot, it does actually look like the anchor point is (0, 0), the icon image's top left corner.

So, set the icon's iconAnchor properly.

[habib-farhan]

Yep, that was exactly the problem. thanks a lot. I had another problem which is, i dont want to put a new pin on the map when i say add it as a waypoint, but instead i just want to use the same poi as a waypoint and route through it. Here is my code:

`  success: function(data) {
    var markers = [];
    var poiData = jQuery.parseJSON(data);
    var customOptions = {
      'className': 'poiPopup'
    }
    var marker;
    $.each(poiData, function(i, item) {
      var customPopup = document.createElement('div');
      customPopup.innerHTML = '<span></span>'
      var addPointBtn = document.createElement('button');
      addPointBtn.className = 'btn btn-primary';
      addPointBtn.innerHTML = '<span>Add as a waypoint</span>';
      addPointBtn.addEventListener('click', function(e){
      var waypoint = new  L.Routing.Waypoint();
          waypoint.latLng = {};
          waypoint.latLng.lat = item.Lat;
          waypoint.latLng.lng = item.Lon;
          Routing.spliceWaypoints(1,0, waypoint.latLng);
          map.closePopup();
      });
      customPopup.appendChild(addPointBtn);
      marker = new L.marker([item.Lat, item.Lon], {
        icon: poiIcon
      });
      marker.bindPopup(customPopup, customOptions).addTo(map);
      markers.push(marker);
    });
     markersObj[pid] = markers;
  }`

here is make a waypoint object while looping through my data and call Routing.spliceWaypoint(); , which adds a waypoint. I want to add the point by keeping the same icon and not putting another one.

[perliedman]

There's an option for the router called createMarker, which overrides how the waypoint markers are created - you pass it a function that takes the waypoint index and the waypoint itself as arguments. If you do not want a marker for the waypoint, simply return null from this function.

[habib-farhan]

I have a followup question to this issue. The problem that i find create marker is that it overrides everything and every other marker that has been created. I have Defined my function like this.

    createMarker: function(i, wp, nWps) {
                    if (i === 0  ) {
                      var myStartIcon = L.icon({
                        iconUrl: 'assets/img/2.png',
                        iconAnchor: [13,20]
                      });
                      return L.marker(wp.latLng, {icon: myStartIcon });
                    }
                   else if(i === nWps - 1){
                      var myEndIcon = L.icon({
                        iconUrl: 'assets/img/end_16.png'
                      });
                      return L.marker(wp.latLng, {icon: myEndIcon });
                    }
                    else if(poiFlag) {
                        var poiMarker = L.icon({
                          iconUrl: 'assets/img/2.png'
                        });
                          poiFlag = false;
                          return L.marker(wp.latLng, {icon: poiMarker});
                    }
                    else {                        
                        poiNumber++;
                        return L.marker(wp.latLng, {icon: new L.NumberedDivIcon({number: poiNumber})});
                    }
   }, 

Now to check if a waypoint is added i have a set poiFlag, and for the via points i am adding numbers. The problem is when i add a via point, the number on all existing markers increases by one, which mean it creates every marker every time or i am missing something?

[perliedman]

Yes, it will recreate markers on updates. I don't think you should worry about that, creating markers is cheap. Or is there anything in particular about this that causes trouble for you?

[Sofiane23i]

Hello,

i tried to follow these comments and use the createmaker function on a list of L.lanLang affected to waypoints to show markers with popup. the markers are presented on the map but the popup didnt work. here my code

    split_route = [];
split_route.push(L.latLng(<?php echo $rowAr222['longuitude']; ?>,<?php echo $rowAr222['latitude'];?>));          

    var route = L.Routing.control({
      createMarker: function(i, wp, nWps) {
        return L.marker(wp.latLng).bindPopup('Hello' + i).openPopup();
    },
      router: L.Routing.mapbox('pk.eyJ1Ijoic2FmZXJkeiIsImEiO'),
     waypoints: split_route,

    addWaypoints: false,
    draggableWaypoints : false,
    routeWhileDragging: false,
   show: false,
     }).addTo(mymap); 

[Beto-kopong]

can i ask for your coding

[Sofiane23i]

yes, of course