Click on popup to scroll

Maps SDK for Web (JavaScript)
#1

I’m currently making an application in React, and i’m trying to scroll down the page, once I click a popup from a shape I made on the map. Might sound confusing, but i’ll show you an example:

image
image1442×889 94.2 KB

So basically i’m trying to press the shape popup which says 52724743, and once i click that, it should scroll down to the menu with the corresponding code as you see below. However this doesn’t work. I’ll show you what I currently made:

this.popup = new tt.Popup({
            closeButton: false,
            closeOnClick: false,
            className: 'tt-popup -black',
            anchor: 'top'
        })
            .setLngLat(calculatePopupPosition(coordinates))
            .setHTML(ReactDOMServer.renderToString(
                <>
                <a onClick={() => {
                    const element = document.getElementById(id);
                    element.scrollIntoView({behavior: 'smooth'})
                }}>{id}</a>
                </>
            ))
            .addTo(map);

I’ve also tried the following, which for some reason also doesn’t seem to work:

this.popup = new tt.Popup({
            closeButton: false,
            closeOnClick: false,
            className: 'tt-popup -black',
            anchor: 'top'
        })
            .setLngLat(calculatePopupPosition(coordinates))
            .setHTML(ReactDOMServer.renderToString(
                <>
                <a href={"#" + id}></a>
                </>
            ))
            .addTo(map);

This is the id it should scroll to:

<>
        <div className="row m-3 p-4 block rounded" id={id}>
            <div className="col m-3 p-4">
                <h1>{id}</h1>
                <h3>Gebiedsgrootte: {GebiedsGrootte}</h3>
                <h3>Geselecteerde locaties: {puntenlengte}</h3>
                <h3>Geselecteerde containers: {containerteller}</h3>

                <div id={"Reistijd" + id}>
                {Reistijden.map(x => (
                  <h3 key={x.wagensoort + x.traveltime}>Reistijd {x.wagensoort}: {x.traveltime}</h3>
            ))}
              </div>
                <select className="form-select" name="wagen" id={"wagen" + id} onChange={this.functie} ref={selectRef}>
                  <option value={"Kies een optie"}>Kies een optie</option>
                  {wagenpark.map(x => (
                    <>
                    <option key={x.wagensoort} id={x.wagensoort} value={x.wagensoort}>{x.wagensoort}</option>
                    </>
                  ))}
                </select>
                <br></br>

                  <div className="row">
                    <div className="col">
                    <select className="form-select" name="xPerWeek" id={"xPerWeek" + id} onChange={() => this.xPerWeek("xpw")} ref={this.xpWeek}>
                  <option value={0}>X Keer per week</option>
                  <option value={1}>1</option>
                  <option value={2}>2</option>
                  <option value={3}>3</option>
                  <option value={4}>4</option>
                  <option value={5}>5</option>
                  <option value={6}>6</option>
                  <option value={7}>7</option>
                </select>
                </div>
                <div className="col">
                <select className="form-select" name="inXWeken" id={"inXWeken" + id} onChange={() => this.xPerWeek("ixw")} ref={this.iXWeek}>
                  <option value={0}>Per X Weken</option>
                  <option value={1}>1</option>
                  <option value={2}>2</option>
                  <option value={3}>3</option>
                  <option value={4}>4</option>
                  <option value={5}>5</option>
                </select>
                </div>
                <div className="col">
                <select className="form-select" name="Dagen" id={"Dagen" + id} onChange={()=> this.xPerWeek("dag")} ref={this.dagen}>
                  <option value={0}>Op dag x</option>
                  <option value={"Maandag"}>Maandag</option>
                  <option value={"Dinsdag"}>Dinsdag</option>
                  <option value={"Woensdag"}>Woensdag</option>
                  <option value={"Donderdag"}>Donderdag</option>
                  <option value={"Vrijdag"}>Vrijdag</option>
                  <option value={"Zaterdag"}>Zaterdag</option>
                  <option value={"Zondag"}>Zondag</option>
                </select>
                </div>
                </div>
                <div className="row">
                  <button className="btn btn-warning" onClick={this.reset}>Reset</button>
                </div>

                <h3>{tekst}</h3>
                <h3>Afstand: {kilometers}</h3>

                <div className="dropdown">
                <button onClick={this.myFunction} className="dropbtn">Adressen</button>
                <div id={"myDropdown" + id} className="dropdown-content">
                    <input type="text" placeholder="Search.." id={"myInput" + id} className="myInput" ref={input} onKeyUp={this.filterFunction}/>
                    {punten.map(element => (
                    <h4 key={element.id} className="blockformenu">{element.straat} {element.huisnummer}, {element.postcode.split(",")[0]} {element.plaats}</h4>
                    ))}
                </div>
                </div>
                </div>

            <div className="col m-3 p-4">
            <input placeholder="Naam" ref={myRef}></input>
            <button className="btn btn-primary" onClick={this.submit}>Klik hier om op te slaan</button>
            </div>
            </div>
        </>

Can somebody help me out with what i’m doing wrong?

#2

I was actually able to do something similar with:

<div id='one'>One</div>

html = '<a href="#one">"one"</a>'
var popup = new tt.Popup({offset: 30}).setHTML(html);

Do you have this application publicly available? or a full code?

#3

I don’t have a public available application, but i have tried the code you sent, but this gives away the same problem, which is likely because of the lack of compatibility between React and InnerHTML, which is used within popups (or so it seems). I’ll attach a screenshot of what happens if I click the link now:

image
image1758×867 132 KB

And once i clicked it:

image
image1907×857 17.6 KB

it sends me back to my homepage for some reason…

#4

Here is my full code of the page to be seen, with my key blurred out:


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

import * as React from "react";
import { useState, useEffect, useRef} from "react";
import * as ReactDOMServer from 'react-dom/server';

import "../../Style/maps.css";
import * as tt from "@tomtom-international/web-sdk-maps";
import DrawingTools from '@tomtom-international/web-sdk-plugin-drawingtools';
import '@tomtom-international/web-sdk-plugin-drawingtools/dist/DrawingTools.css';

import * as turf from "@turf/turf"
import ListOfPoints from "../Parts/PPRCreator/ListOfPoints";
import { Link, useLocation, useNavigate} from "react-router-dom";


function PPRCreator() {

    const [isLoaded, setIsLoaded] = useState(false)
    const [wagensOver, setWagensOver] = useState("")
    const [markersOver, setMarkersOver] = useState("")
    const [containersOver, setContainersOver] = useState("")
    const [TestList, setTestList] = useState([])
    const [Waagens, setWaagens] = useState([])
    let [counter, setCounter] = useState(0)
    const [listTeller, setListTeller] = useState(0)
    const navigate = useNavigate()
    var shapes = [];
    var shapeList = []
    let teller = 0;
    var markers = []
    let containers = 0
    let switchKey = false;
    var currentDrawingTool = useRef();
    const zoek = useRef()
    const state = useLocation();
    let key = "";
    if(state.state === null){
        navigate("/")
    }
    else{
        key = state.state.key
    }
    // let split = document.URL.split("=")
    // let key = split[1]
    // if(split[1].includes("&")){
    // key = split[1].split("&")[0]
    // }

    function switchTheKey(){
        if(switchKey === false){
            switchKey = true
        }
        else{
            switchKey = false
        }
    }


    //Functie van TomTom API
    function createMarker(icon, lat, long, popup, color, containersj) {
          var markerElement = document.createElement('div');
          markerElement.className = 'marker';
          var markerContentElement = document.createElement('div');
          markerContentElement.className = 'marker-content';

          markerContentElement.style.backgroundColor = color
          markerElement.appendChild(markerContentElement);
          var iconElement = document.createElement('div');
          iconElement.className = 'marker-icon';
          iconElement.style.backgroundImage = "url(../../Assets/" + icon + ")";

          containers += containersj
          setContainersOver("Nog "+containers+" containers over")
          markerContentElement.appendChild(iconElement);
          // add marker to map
          var ll = new tt.LngLat(long, lat); 
          return new tt.Marker({element: markerElement, anchor: 'bottom'})
              .setLngLat(ll)
              .setPopup(popup)
          
    }


    //Kleurcode's toevoegen
    function decideColor(name){
        
        if(name === "GFT"){
            return "#00FF00"
        }
        if(name === "PAPIER"){
            return "#0000FF"
        }
        if(name === "REST"){
            return "#666666"
        }
        if(name === "PLASTIC"){
            return 	"#FFA500"
        }
        if(name === "HOME"){
            return "#FF0000"
        }
        return "#FFFFFF"
    }

    // function getDrawingTools(){
    //     return new DrawingTools({ttMapsSdk: tt, controls: {select: true, ellipse: false, polygon: false, pen: false, rectangle: false}})
    // }

    //Maakt van feature (tekening op de kaart) een vorm, met hierbij horende coordinaten, id en andere punten
    function addFeatures(features, map) {
        // if(!(shapes.length === Waagens.length)){
        features.forEach(function(feature) {
            shapes.push(new Shape(
                feature.id,
                feature.geometry.coordinates[0],
                map
            ));
        });
        // updateAndShowTotalArea();
        
        if(shapes.length + 1 > Waagens.length){
            // alert("U heeft uw maximum aantal gebieden bereikt. Probeer andere gebieden te verschuiven, of verwijder een gebied")
            // map.removeControl(currentDrawingTool.current)
            // sleep(1000)
            // let ttDrawingTools = getDrawingTools()

            // currentDrawingTool.current = ttDrawingTools
            // map.addControl(ttDrawingTools, 'top-left');
            // ttDrawingTools.on('tomtom.drawingtools.created', function(event) {
            //     addFeatures(event.data.features, map, ttDrawingTools);
            // });
    
            // ttDrawingTools.on('tomtom.drawingtools.deleted', function(event) {
            //     deleteFeatures(event.data.features, map);
            // });
    
            // ttDrawingTools.on('tomtom.drawingtools.changed', function(event) {
            //     updateFeatures(event.data.features);
            // });
    
            // ttDrawingTools.on('tomtom.drawingtools.dragged', function(event) {
            //     // area also needs to be updated because it changes while dragging
            //     // the reason is the way how spherical earth is reproduced on flat surface
            //     updateFeatures(event.data.features);
            // });
        }
    //     }
    // else{
    //     alert("U heeft uw maximum aantal gebieden bereikt. Probeer andere gebieden te verschuiven, of verwijder een gebied")
    // }
}

    //Verwijderd features
    function deleteFeatures(features, map) {
        features.forEach(function(feature) {
            shapes = shapes.filter(function(shape) {
                if (feature.id === shape.id) {
                    var object = null; 
                    shapeList.forEach(element => {
                        if(element.id === shape.id){
                            object = element;
                        }
                    });
                    shapeList[object.teller].HTMLText = ""
                    let punten = shapeList[object.teller].punten
                    punten.forEach(punt => {
                        filterAddMarker(punt, map)
                    });
                    shape.popup.remove();
                    setMarkersOver("Nog "+ markers.length +" locaties over")

                    
                    return false;
                } else {
                    return true;
                }
            });
        });
        // updateAndShowTotalArea();
    }

    //Update features
    function updateFeatures(features) {
        features.forEach(function(feature) {
            for (var i = 0; i < shapes.length; i++) {
                if (shapes[i].id === feature.id) {
                    shapes[i].update(feature.geometry.coordinates[0]);
                    break;
                }
            }
        });
        // updateAndShowTotalArea();
    }

    //HTML voor het aanmaken van een detailblokje (InnerHTML)
    function getAutoHTML(id, punten, Gebiedsgrootte){
        const newPunten = punten.filter(x => x.fractie !== "HOME")
        const newPuntenLengte = newPunten.length
        if(newPuntenLengte > 0){
        return ReactDOMServer.renderToString(
                    // <ListOfPoints id={id} punten={newPunten} puntenlengte = {newPuntenLengte} gebiedsGrootte={Gebiedsgrootte} button="no"></ListOfPoints>
        )}
        else{
            return ReactDOMServer.renderToString(
                <>
                <div className="row m-3 p-4 block rounded">
                    <div className="col m-3 p-4">
                        <h1>{id}</h1>
                        <h3>Gebiedsgroeotte: {Gebiedsgrootte}</h3>
                        <h3>Geselecteerde locaties: {newPuntenLengte}</h3>
                        {punten.forEach(element => {
                            <>{element}</>
                        })}
                        </div>
    
                    <div className="col m-3 p-4">
                    </div>
                    </div>
                </>
            )
        }
    }

    //Verwijderd marker van de kaart nadat deze geselecteerd is
    function filterRemoveMarker(punt){

        let selMarker = markers.filter(marker => marker._lngLat.lat === punt.latitude & marker._lngLat.lng === punt.longitude)

        let newMarkerList = markers.filter(marker => marker._lngLat.lat !== punt.latitude & marker._lngLat.lng !== punt.longitude)



        markers = newMarkerList;
        if(selMarker[0] !== null){
            selMarker.forEach(element => {
                element.remove();
                let markerLET = arrayvanlnglat2.filter(x => x.latitude === element._lngLat.lat & x.longitude === element._lngLat.lng)
                containers = containers - markerLET[0].hoeveelContainers
            });
        
        }
        setContainersOver("Nog "+containers+" containers over")
    }

    //Voegt marker toe nadat deze gedeselecteerd is
    function filterAddMarker(punt, map){
        let selMarker = arrayvanlnglat2.filter(marker => marker.latitude === punt.latitude)
        let selMarker1 = selMarker.filter(marker => marker.fractie === punt.fractie)
        let selMarker2 = selMarker1.filter(marker => marker.longitude === punt.longitude)
        var mark = selMarker2[0]


        var popupHTML = "<div class='block rounded p-1'>"+mark.fractie + "<br>"+ mark.hoeveelContainers + " containers</div><div class='blockformenu p-1'>" + mark.straat + " " + mark.huisnummer + "<br>" + mark.postcode.split(",")[0] + "<br>" + mark.plaats +  "</div>"
            if(mark.fractie === "HOME"){
                popupHTML = "<div class='block rounded p-1'>"+mark.fractie + "</div><div class='blockformenu p-1'>" + mark.straat + " " + mark.huisnummer + "<br>" + mark.postcode.split(",")[0] + "<br>" + mark.plaats +  "</div>"
            }
        //let marker = new tt.Marker().setLngLat(new tt.LngLat(selMarker2[0].longitude, selMarker2[0].latitude)).setPopup(new tt.Popup({offset: 30}).setHTML("<div class='block'>"+selMarker2[0].fractie + "</div><br><div class='block'>"+ selMarker2[0].hoeveelContainers + " containers</div>")).addTo(map)
        let marker = createMarker("", mark.latitude, mark.longitude, new tt.Popup({offset: 30}).setHTML(popupHTML), decideColor(mark.fractie), mark.hoeveelContainers).addTo(map)
        
        if(markers.filter(markerFromList => markerFromList._lngLat === marker._lngLat).length < 1){
            if(mark.fractie !== "HOME"){
            markers.push(marker)
            }
        }
        


    }
    

    

    

    //Aanmaken van shape class. Deze word ook gebruikt om punten te zoeken die binnen dit gebied valt, 
    function Shape(id, coordinates, map) {
        let punten = pointCheck(coordinates)
        this.id = id;
        this.area = calcAreaFromCoordinates(coordinates);
        this.coordinates = coordinates
        const html = ReactDOMServer.renderToString(
            <>
            <a href={"#" + id}>{id}</a>
            </>
        )
        this.popup = new tt.Popup({
            closeButton: false,
            closeOnClick: false,
            className: 'tt-popup -black',
            anchor: 'top'
        })
            .setLngLat(calculatePopupPosition(coordinates))
            .setHTML(html)
            .addTo(map);
        let HTMLText = getAutoHTML(this.id, punten, areaToString(this.area))

        // let tussenlijst = TestList;
        // var lijst = getTestList();
        // lijst.push({id: this.id, Punten: punten, PuntenLengte: puntenlengte, AreaString: areaToString(this.area)})
        // setTestList(lijst)
        setCounter(counter + 1)
        switchTheKey()
        punten.forEach(punt => {
            filterRemoveMarker(punt)
        });

        shapeList.push({id, HTMLText, teller, punten})
        setMarkersOver("Nog "+ markers.length +" locaties over")
        teller++;

        //Indien de shape word geupdate
        this.update = function(coordinates) {
            let punten = pointCheck(coordinates)
            this.area = calcAreaFromCoordinates(coordinates);
            this.popup.setLngLat(calculatePopupPosition(coordinates));
            this.popup.setHTML(id);
            let HTMLText = getAutoHTML(this.id, punten, areaToString(this.area))
            let tussenlijst = []

            tussenlijst = TestList.filter(x => x.id !== this.id )
            // TestList.forEach(element => {
            //     if(element.id !== this.id){
            //         tussenlijst.push(element)
            //     }
            // });
            
            tussenlijst.push({id: this.id, punten: punten, puntenlengte: punten.length, AreaString: areaToString(this.area)})
            tussenlijst = listContainsNonEXT(tussenlijst)
            tussenlijst = listDoesntContainEXT(tussenlijst)
            tussenlijst.forEach(x => {
                x.punten = x.punten.filter(y => y.fractie !== "HOME")
                x.puntenlengte = x.punten.length
            })
            setTestList(tussenlijst)
            // TestList.push({id: this.id, Punten: punten, PuntenLengte: puntenlengte, AreaString: areaToString(this.area)})
            var object = null;
            shapeList.forEach(element => {
                if(element.id === this.id){
                    object = element;
                }
            });
            shapeList[object.teller].HTMLText = HTMLText
            shapeList[object.teller].punten.forEach(punt => {
                filterAddMarker(punt, map)
            });
            punten.forEach(punt => {
                filterRemoveMarker(punt)
            });
            shapeList[object.teller].punten = punten
            setMarkersOver("Nog "+ markers.length +" locaties over")
        };
    }

    //Kijken welke punten binnen de shape vallen
    function pointCheck(coordinates){
        let lijstMetGeselecteerdePunten = [];
        var polygon = turf.polygon([coordinates]);
        arrayvanlnglat2.forEach(element => {
            let markercheck = markers.filter(marker => marker._lngLat.lng === element.longitude & marker._lngLat.lat === element.lat)
            if(markercheck[0] !== null){
                var coordinate = turf.point([element.longitude, element.latitude])
                var check = turf.booleanContains(polygon, coordinate)
                if(check){
                    lijstMetGeselecteerdePunten.push(element)
                }
            }

        });
        return lijstMetGeselecteerdePunten;
    }
    
    //Positie van popup berekenen
    function calculatePopupPosition(coordinates) {
        var features = turf.points(coordinates);
        var center = turf.center(features);
        var bottom = coordinates.reduce(function(acc, current) {
            if (acc[1] < current[1]) {
                return acc; 
            } else {
                return current;
            }
        });
        return [center.geometry.coordinates[0], bottom[1]];
    }

    //Rekent o.b.v. de coordinaten van alle hoeken van de vorm uit hoe groot het gebied is
    function calcAreaFromCoordinates(coordinates) {
        var polygon = turf.polygon([coordinates]);
        return turf.area(polygon);
    }

    //Zet de gebiedsgrootte om in een leesbare eenheid
    function areaToString(area) {
        if (area < 500000) {
            return area.toFixed(0) + ' ㎡';
        } else {
            return (area / 1000000).toFixed(2) + ' ㎢';
        }
    }


//Aanmaken van mapelementen
  const mapElement = useRef();
  const [,setMap] = useState({})
  let arrayvanlnglat2 = []


  function getTestList(){
    return TestList
  }

  //Punten ophalen uit de database
  async function FetchPunten(){
    if(state.state.body !== undefined){
        let url = "https://localhost:7155/api/TomTom/Fractie?key=" + key
        var result = await fetch(url, {
            method: "POST",
            headers: {
                'Content-type': 'application/json',
                mode: 'cors'
            },
            body: JSON.stringify(state.state.body)
        })
    }
    else{
        let url = "https://localhost:7155/api/TomTom?key=" + key
        result = await fetch(url, {
        method: "GET",
        headers: {
        'Content-type': 'application/json',
        mode: 'cors'
        },
    })
    }
    
    if(result.status !== 200){
        var statustext = await result.text()
        alert("Foutmelding bij ophalen gegevens, U word teruggestuurd naar de hoofdpagina. Foutcode: " + result.status + ": " + statustext)
      navigate("/Chooseplan", {state: {key: key}});
  }
    var json = await result.json();
        arrayvanlnglat2 = json
    if(arrayvanlnglat2.length < 2 && arrayvanlnglat2.length > 0){
        if(arrayvanlnglat2[0].fractie === "HOME"){
            alert("Foutmelding bij ophalen gegevens: Opgegeven selectie bevat geen locaties, U word teruggestuurd naar de selectiepagina");
            navigate("/Chooseplan", {state: {key: key}})
        }
    }
    setIsLoaded(true)
    return json  
  }

  //Haalt maximum wagencapaciteit op uit de database
  async function FetchWagenpark(){
    await fetch("https://localhost:7155/api/Wagenpark?key=" + key) 
        .then(x => x.json())
        .then ((result) => {
                setWagensOver(result.length + " wagens ter beschikking")
                setWaagens(result)
        })

        // setWagensOver(Waagens.length+ " wagens tot je beschikking");
  }

  //Voegt een item toe aan de lijst die details terug geeft
  function addList(features){
    features.forEach(feature => {
        let id = feature.id;
        let coordinates = feature.geometry.coordinates[0]
        let punten = pointCheck(coordinates)
        let puntenlengte = punten.length
        let lijst = TestList;
        
        lijst = listContainsNonEXT(lijst)
        
        lijst = listDoesntContainEXT(lijst)
        let area = calcAreaFromCoordinates(coordinates)
        lijst.push({id: id, punten: punten, puntenlengte: puntenlengte, gebiedsGrootte: areaToString(area)})
        lijst.forEach(element => {
            element.punten = element.punten.filter(x => x.fractie !== "HOME")
            element.puntenlengte = element.punten.length
        })
        setTestList(lijst)
        setListTeller(listTeller => listTeller + 1)
        
    })
  }

  //Kijken of de lijst, een item bevat die al eerder verwijderd had moeten worden
  function listContainsNonEXT(lijst){
    lijst.forEach(x => {
        const notContained = shapes.every(obj =>{
            return obj.id !== x.id
        })
        if(notContained){
            lijst = lijst.filter(y => y.id !== x.id)
        }
    })
    return lijst
  }

  //Kijken of de lijst een item bevat die niet weergeven word
  function listDoesntContainEXT(lijst){
    shapes.forEach(x => {
        const notContained = lijst.every(obj => {
            return obj.id !== x.id
        })
        if(notContained){
            const id = x.id;
            const punten = pointCheck(x.coordinates)
            const puntenlengte = punten.length
            const gebiedsGrootte = areaToString(x.area)
            lijst.push({id: id, punten: punten, puntenlengte: puntenlengte, gebiedsGrootte: gebiedsGrootte})
        }
    })
    return lijst
  }

  //Verwijderen uit de lijst
  function deleteList(features){
    var list2 = []
    features.forEach(feature => {
    
    var list = TestList.filter(x => x.id  === feature.id)
    

    list.forEach(listElement => {
        TestList.forEach(Testlistelement => {
            if(listElement === Testlistelement){
                if(list2[0] === undefined){
                    list2 = TestList.filter(x => x.id !== listElement.id)
                }
                else{
                    list2 = list2.filter(x => x.id !== listElement.id)
                }
            }
        })
    });
    
});

list2.forEach(element => {
    element.punten = element.punten.filter(x => x.fractie !== "HOME")
    element.puntenlengte = element.punten.length
});
list2 = listContainsNonEXT(list2)
list2 = listDoesntContainEXT(list2)
setTestList(list2)
const minZoveel = list2.length - TestList.length
if(listTeller + minZoveel < 0){
    setListTeller(0)
}
else{setListTeller(list2.length)}



  }

  function testm(){
    const element = document.getElementById(zoek.current.value)
    console.log(element)
    if(element){
        console.log("Kaas")
        element.scrollIntoView()
    }
    else{
        alert("ID '" + zoek.current.value + "' niet gevonden")
    }
}
function ChangeStateKeyUp(){
    console.log(zoek.current.value)
}

//Functie die elke keer word aangeroepen zodra de pagina herladen word
  useEffect(() => {
    
    let lnglat = {lng: 0,lat: 0}
    const Middelpunt = {lng: 5.646622,lat: 52.101217,}
    let map = tt.map({
      key: "NO",
      container: mapElement.current,
      center: Middelpunt,
      zoom: 6.5,
    });



    const tussenstap = async () => {
        setWagensOver("")
        setMarkersOver("")
        setContainersOver("")
        setTestList([])  
        setWaagens([])
        setCounter(0)
        await FetchPunten()
        await FetchWagenpark()
        if(isLoaded){}
        // eslint-disable-next-line
        markers = []
        // eslint-disable-next-line
        containers = 0
        arrayvanlnglat2.forEach(element => {
            lnglat = new tt.LngLat(element.longitude, element.latitude);
        
            var popupHTML = "<div class='block rounded p-1'>"+element.fractie + "<br>"+ element.hoeveelContainers + " containers</div><div class='blockformenu p-1'>" + element.straat + " " + element.huisnummer + "<br>" + element.postcode.split(",")[0] + "<br>" + element.plaats +  "</div>"
            if(element.fractie === "HOME"){
                popupHTML = "<div class='block rounded p-1'>"+element.fractie + "</div><div class='blockformenu p-1'>" + element.straat + " " + element.huisnummer + "<br>" + element.postcode.split(",")[0] + "<br>" + element.plaats +  "</div>"
            }
            //var marker = new tt.Marker().setLngLat(lnglat).setPopup(new tt.Popup({offset: 30}).setHTML("<div class='block'>"+element.fractie + "</div><br><div class='block'>"+ element.hoeveelContainers + " containers</div>"))
            var marker = createMarker("", lnglat.lat, lnglat.lng, new tt.Popup({offset: 30}).setHTML(popupHTML), decideColor(element.fractie), element.hoeveelContainers)
            if(element.fractie !== "HOME"){
                markers.push(marker)
                }
            if(arrayvanlnglat2.filter(x => x.fractie === "HOME")[0] !== undefined){
            }
            setMarkersOver("Nog "+ markers.length +" locaties over")
            marker.addTo(map)
            
        });
        map.addControl(new tt.FullscreenControl());
        map.addControl(new tt.NavigationControl());

        var ttDrawingTools = new DrawingTools({ttMapsSdk: tt, controls: {line: false}})
        currentDrawingTool.current = ttDrawingTools
        map.addControl(ttDrawingTools, 'top-left'); 

        ttDrawingTools.on('tomtom.drawingtools.created', function(event) {
            addList(event.data.features)
            addFeatures(event.data.features, map, ttDrawingTools);
        });

        ttDrawingTools.on('tomtom.drawingtools.deleted', function(event) {
            deleteFeatures(event.data.features, map);
            deleteList(event.data.features)
        });

        ttDrawingTools.on('tomtom.drawingtools.changed', function(event) {
            
            updateFeatures(event.data.features);
        });

        ttDrawingTools.on('tomtom.drawingtools.dragged', function(event) {
            // area also needs to be updated because it changes while dragging
            // the reason is the way how spherical earth is reproduced on flat surface
            updateFeatures(event.data.features);
        });
        
            
    }


    map.on('load', tussenstap)
    setMap(map);


    
    setIsLoaded(true)
    // return () => map.remove();
    // eslint-disable-next-line
  }, [zoek]);

//   useEffect(() => {

//   })
  return (<>
    <div className="App container-fluid">
        <div className="row m-1 block rounded">
            <div className="col m-2 p-4">
      <div className="mapContainerTwo ">
            <div ref={mapElement} className="mapDivTwo" />
            </div>
      </div>
      </div>
    </div>
    <div className="container">
        <div className="row">
            <div className="col">
            <div id="markersOver" >
                <h1>{markersOver}</h1>
            </div>
            </div>
            <div className="col">
            <div id="containersOver">
                <h1>{containersOver}</h1>
            </div>
            </div>
            <div className="col">
            <div id="wagens">
                <h1>{wagensOver}</h1>
            </div>
            </div>
            <div className="col">
            <h1>Geselecteerd: {listTeller}</h1>
            </div>
        </div>
    
    
    
    <div id="Link">
    <Link to={"/test"} state={{list: getTestList(), key: key}}>
    <button className="btn btn-primary rounded" >Klik hier om alles op te slaan</button>
    </Link>
    </div>
    <div id="listOfSelected">
    </div>
    <h1> Lijst met Geselecteerde</h1>
    <div className="row">
    <div className="col">
        <div className="row">
            <div className="col">
                <input type={"text"} className="form-control col" id="zoek" placeholder="id" ref={zoek} onKeyUp={ChangeStateKeyUp} onKeyDown={ChangeStateKeyUp}></input>
            </div>
            <div className="col">
                <button className="btn btn-dark" onClick={testm}>Zoek</button>
            </div>
        </div>
    
    </div>
    
    
    </div>
    <div id="TestList">
        {TestList.filter(x => x.id).map(item => (
<ListOfPoints key={item.id} keys={key} id={item.id} punten={item.punten.filter(x => x.fractie !==  "HOME")} puntenlengte = {item.puntenlengte} gebiedsGrootte={item.gebiedsGrootte} button={true}></ListOfPoints>
        ))}
        
    </div>
    </div>
    </>
  );

}

export default PPRCreator;

it’s quite the bit of code, i’m sorry :sweat_smile:

#5

ah, yes. My bad. Didn’t take React into account.

#6

Does that mean there currently isn’t a solution available?

#7

This looks like a React related.
Is the element that you want to scroll to already rendered when clicking?
We would need some complete minimal set of code to reproduce this. For instance on stackblitz

#8

It has already rendered. The component it is trying to scroll to, is the grey box with “52724743” at the top in this example

I had a clue this would be react related, however, I dont know if there was a tomtom supported answer.

I tried to make a stackblitz page, however I got yet another error…

Error in /turbo_modules/@tomtom-international/web-sdk-plugin-drawingtools@1.1.5/dist/DrawingTools.js (1:21651)

Automatic publicPath is not supported in this browser

Is there an alternative option to be able to work out this problem?