Encountering an error when adding drawing tools in React

Hi,

I am attempting to add the DrawingTools plugin to my map in React but am encountering the error: “Uncaught TypeError: document.querySelector(…) is null”. I have followed the tutorial at Adding TomTom Maps to a Modern React App | TomTom Developer Portal and have been able to add a map with FullscreenControl and NavigationControl, but can’t figure out why trying to add the DrawingTools plugin is causing an error.

I have installed all the necessary packages detailed at https://www.npmjs.com/package/@tomtom-international/web-sdk-plugin-drawingtools and used the code listed there but am still getting the error.

Here is the part of my code:

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

const ttDrawingTools = new DrawingTools({
    ttMapsSdk: tt
});

useEffect(() => {
    let map = tt.map({
      key: '<my API key>',
      container: mapElement.current,
      center: [mapLongitude, mapLatitude],
      zoom: mapZoom
    });
    setMap(map);
    map.addControl(new tt.FullscreenControl());
    map.addControl(new tt.NavigationControl());  //these two controls work
    map.addControl(ttDrawingTools, 'top-left');  //this line causes the error
    return () => map.remove();
}, []);

I have tried this code in Ionic with React and it works as expected.
Which version of React are you using?

1 Like

I’m using React 18.0.0. I’ve also tried cloning GitHub - rpeden/tomtom-maps-react and adding the DrawingTools to that, but I still get the same error.

OK, so our engineers investigated this and found a bug.
The plugin expects the div with a map to have an id set to ‘map’.
So for now a workaround for this is just to add id={‘map’} for a container for a map.