How to identify markers

Maps SDK for Web (JavaScript)
#1

I’m using the v5 of Maps SDK for Web and I need a way to identify a marker. I’m storing them in an array, but I have no way to identify them. In v4, I identified using the title property, but I didn’t find anything related to that in v5.

This is the snippet to identify a marker in v4

this.markers.findIndex(marker => m.options.title === title)

I wanted to keep using v5 but I’m having trouble to show markers and I’m using the same code that I used before in a previous project.

So, I just need to solve one of those problems

#2

One way is to use WeakMap - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

1 Like
#3

ok, that could work! Thanks!
Just another thing, would you mind helping me with the other problem.
I have no idea what I’m doing wrong, but the markers are not showing in v4. Here is the code. BTW, I’m using react.

  componentDidMount() {
    const script = document.createElement("script");
    this.markers = [];
    script.src = process.env.PUBLIC_URL + "/sdk/tomtom.min.js";
    document.body.appendChild(script);
    script.async = true;
    script.onload = () => {
      console.log(
        "TCL: TomTomMap -> componentDidMount -> window.tomtom",
        window.tomtom
      );
      this.tomtom = window.tomtom;
      const map = this.tomtom.L.map("map", {
        source: "vector",
        key: "**************",
        basePath: "/sdk",
        zoom: 15
      }).setView([52.373154, 4.890659], 14);
      const marker = this.tomtom.L.marker([52.373154, 4.890659], {
        draggable: true
      })
        .bindPopup("Amsterdam")
        .addTo(map);
    };
  }
#4

Try to put markers code in

map.on('load',function() {
...
}
1 Like
#5

I also had this issue, we used to use Google Maps and just tagged the marker with the id. I got round this in TomTom using the following:

    var ele = document.createElement("img");
    ele.src = iconURL;
    $(ele).css("cursor", "pointer");
    var markerOptions = {
        element: ele,
        anchor: "left",
        offset: [-15, -8]
    };
    location_marker = new tt.Marker(markerOptions).setLngLat(lngLat).addTo(map)
    location_marker.driverId = trackingInfo.l; // EXTRA DATA ATTACHED TO THE MARKER
    location_marker.vehicleId = trackingInfo.v;
    location_marker.lastUpdateDate = currDate;
    $(ele).attr("type", "driver");
    $(ele).data("marker", location_marker); // REFERENCE BACK TO THE MARKER FROM THE ELEMENT
    trackingMarkerArray[trackingInfo.l] = location_marker;