CODEWITHSUNDEEP
javascriptleaflettomtom
stackg91
stackg91

Reputation: 594

TomTom MapKit + Leaflet displayroute Marker

Hey guys I got a problem currently I am using the tomtom api with leaflet to generate a route on a map from Point A to Point B. Now this is working perfectly, the problem is I havent found a way to interact with the Markers automaticly generated from the displayroute call.

Basicly this is my Routecall

Tommap.displayRoute([[Ls.Get('latitude'), Ls.Get('longitude')], [cusLat, cusLng]], function (response) {
                //Tommap.removeLayer(Tommap.endMarker);
                console.log(response)
                $scope.values = response
                $scope.instructions = response.instructions
                console.log(Tommap)

            });

Now either the TomTom Api or Leaflet is generating 2 Markers (StartMarker and Endmarker), now I need to open a popup if the User clicks on either of those markers to show information about the Location.

What i tried so far:

Creating a popup on the same location the marker gets created, which is working but not onclick 1 popup just opens when the map loads.

var popup = L.popup()
    .setLatLng([Ls.Get('latitude'), Ls.Get('longitude')])
    .setContent("I am a standalone popup.")
    .openOn(map);

I tried getting the Start and Endmarker from the Map Object and doing a bind on that. Which didnt work

Tommap.endMarker.bindPopup("Hello world!");

I wanted to try to get the marker with the markermanager but couldnt find the id of the start and end markers... So I can bind a popup after that.

var marker = markerManager.getMarkerById("start / endmarkerId");

Then I was kinda desperate and though if I could remove the Routemarkers by using map.removeLayer(map.removeLayer(marker));

And then creating my own markers on the start and end Point

var marker = new tomtom.Marker([Ls.Get('latitude'), Ls.Get('longitude')]);
Tommap.addLayer(marker);

But now I have the 2 markers generated from the display route and the self added markers...

Then I looked in the tomtom.map.js where I found this

tomtom.Map.MARKER_OPTIONS_ROUTE_END={iconUrl:"marker_customer.svg",iconSize:[43,49],iconAnchor:[11,40],popupAnchor:[0,0]}

I could probably set the Icon size to 0,0 or use a transparent Icon and then create my own markers but that cant be the solution right?

The simple goal is to click on the start marker -> open a popup and show information,l some goes for the endmarker

Any help appreciated

Kind Regards, Christopher

Upvotes: 2

Views: 788

Answers (1)

lightwaver
lightwaver

Reputation: 41

You could use Extended DivIcon to create a custom marker and give an ID to it. With the ID you could bind a Popup onto it.

Upvotes: 0

Related Questions