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();
}, []);