React: TomTom API Not showing markers

Maps SDK for Web (JavaScript)
#1

It’s kind of a strange problem im running into. My application requires a LOT of waypoints. I load all my locations in via a self-constructed API. My application sometimes shows them seemingly popping up, before dissapearing once again. I’m kind of new to the tomtom api, which makes this extra difficult. Here is my code:


import "../../Style/bootstrap/css/bootstrap.min.css";

import * as React from "react";
import { useState, useEffect, useRef } from "react";

import "@tomtom-international/web-sdk-maps/dist/maps.css";
import * as tt from "@tomtom-international/web-sdk-maps";

function NaviFrame() {
  const mapElement = useRef();
  const [map, setMap] = useState({});
  let arrayvanpunten = []
  let latitude = 0;
  let longitude = 0;
  let lnglat = {lng: 0, lat: 0}
  let arrayvanlnglat = [{lng: Number, lat: Number}]
  let arrayvanlnglat2 = [{latitude, longitude}]

  async function FetchPunten(){
    var kaas = await fetch("https://localhost:7155/api/RouteAanvraag", {
        method: "POST",
        headers: {
        'Content-type': 'application/json',
        mode: 'cors'
        },
        body: JSON.stringify({"optimaleRoute": true, "wayPoints": true,"routeNr": 4})
    })
    var json = await kaas.json();
    var nogeenverder = await json.route.supportingPoints;
    var nogeentjedan = await json.wayPoints;

    nogeentjedan.forEach(element => {
        arrayvanlnglat2.push({latitude: element.latitude, longitude: element.longitude})
    });
    nogeenverder.forEach(element => {
        arrayvanlnglat2.push({latitude: element.latitude, longitude: element.longitude})
    });
    
    return json  
  }

  useEffect(() => {
    const MyLocation = *Dont bother about this, this one works
    let map = tt.map({
      key: My Key,
      container: mapElement.current,
      center: MyLocation
      zoom: 14
    });

    const tussenstap = async () => {
        await FetchPunten()
        arrayvanlnglat2.forEach(element => {
        });
        //  arrayvanpunten = await FetchPunten();
        
        arrayvanlnglat2.forEach(element => {
            lnglat = {lng: element.longitude, lat: element.latitude};
            console.log(lnglat)
            let lengte = arrayvanlnglat.push(lnglat);
            console.log(lengte);
            
            
            map.on('load', () => {
                var marker = new tt.Marker().setLngLat(arrayvanlnglat[lengte]).addTo(map)
                
            })
            setMap(map);
            
        });
    }
    tussenstap()

    setMap(map);
    

    return () => map.remove();
  }, []);

  return (
    <div className="App">
      <div className="mapContainer">
            <div ref={mapElement} className="mapDiv" />
      </div>
    </div>
  );
}

export default NaviFrame;

Is there somebody here to help me out?

#2

map.on() sets event listener.
So if you run it in a loop - it is overwritten by the last one.
And I assume that it takes longer to get data, so probably load event was already fired when this listener is set.

So I would just remove

map.on('load'...

and leave

console.log(lengte);
var marker =...

then just put tussenstap() in map.on(‘load’)

map.on('load', tussenstap);
#3

By what you are assuming, you mean the following:

 const tussenstap = async () => {
        await FetchPunten()
        //  arrayvanpunten = await FetchPunten();
        
        arrayvanlnglat2.forEach(element => {
            lnglat = {lng: element.longitude, lat: element.latitude};
            console.log(lnglat)
            let lengte = arrayvanlnglat.push(lnglat);
            console.log(lengte);
            var marker = new tt.Marker().setLngLat(arrayvanlnglat[lengte])
            marker.addTo(map)
            
        });
    }
    map.on('load', tussenstap)
    setMap(map);

However, even when i use this implementation, there are no markers showing up. I dont know if there is a limit on how many markers could be in the website, but do you have any other implementation that could work?

#4

image
image632×621 37.3 KB

Also, i dont know if any of these warnings have got to do anything with it, but these also just started showing up

#5

Are there no entries in console caused by console.log() from this code?

#6

There were a lot of console logs in there, however once i changed the code to what you suggested, these all started to disappear. I dont know if this has got to do anything with it, but the console.logs were mostly to check if the points were acutally formatted the correct way, which they are.

#8 
let lengte = arrayvanlnglat.push(lnglat);
...
var marker = new tt.Marker().setLngLat(arrayvanlnglat[lengte])

isn’t arrayvanlnglat[lengte] undefined?
shouldn’t it be lengte-1?

#9

Actually, this morning i found the solution. It had to do with the loading of the entire page. Now it all works, but thanks for your help!