First steps are always the hardest

I started using the Tomtom SDK yesterday and I must admit it’s been a hard slog to get to where I am now. Things that I have learnt that might help other beginners.

I cobbled together “parts” of the following examples - most of it was pretty straight forward

display-vector-map
taxi-cars-dispatcher
creating-real-time-construction-fleet-planning-app-tomtom-maps-apis

I got stuck in the construction example

I could not get it to create a path until I found from the browser developer tools an error that indicated that the vehicle load type was incorrect, all you need to do to resolve this is set it to “vehicleLoadType”: “USHazmatClass3”, and the path will generate. That cost me hours and hours and tears and swearing.

I had a marker that I created and I wanted to dynamically move it and the map was not moving with my marker after some more hours tears and swearing, I found the answer in one of the many tomtom utube vids - I could not find this information in any of the samples or forum posts.

In the sample below you click on a button, it runs a function, the function moves the markers latitude by .0001, the pic marches across the map and the map re-centers on the markers lat lon.

A useful resource https://www.youtube.com/c/TomTomDevelopers/videos

The sample code from the above videos would be nice to have somewhere.

Documentation for all of the sdk features would be nice to have, if somebody could tell me where that is I would be grateful.

  //  the following code assumes that there is a button named ".control-panel__btn2"

  // create some variables
  var vlat = 153.3139;
  var vlon = -28.01395;     
  var vstart = [vlat,vlon];

  // draw a marker on the screen 
  var marker2 = new tt.Marker().setLngLat(vstart).addTo(map);
    marker2.getElement().innerHTML = "<img src='img/mycar.png'>";

   // on a button press run function mytest
   document.querySelector(".control-panel__btn2")
   .addEventListener("click",  mytest );

  //  modify the marker image position  and the map position
   function mytest(){
        var varposn = [vlat,vlon];
        marker2.getElement().innerHTML =  "<img src='img/mycar.png'>";   
        marker2.setLngLat(varposn);
        //marker2.anchor();
        // center the map on to the markers lat lon      
        map.easeTo({
           center: marker2.getLngLat(),
           zoom:18
           });
          // preventDefault stops the screen from refreshing 
          event.preventDefault();  
          vlat = vlat + .0001;
 
   } 
1 Like