Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to make a draggable point in Angular using Mapbox. I am getting an error that the Angular cannot read the properties of undefined(reading style) at map.OnMove function. In my map.OnMove function, the error is related to canvas.style, where I am getting Canvas as undefined despite initializing it. However, when I console.log that element then that element does exist and does have style property.

I am using this example: mapbox draggable point

Here's my code:

ngAfterViewInit() {
this.map = this.InitializeMap();
this.resizeMap();
this.canvas = this.map.getCanvasContainer();
this.addDraggablePoint();
onMove(e: any) {
const coords = e.lngLat;
console.log('coords are ' + coords);
// Set a UI indicator for dragging.
this.canvas.style.cursor = 'grabbing'; //It throws an error here stating that cannot read properties style of undefined
// Update the Point feature in `geojson` coordinates
// and call setData to the source layer `point` on it.
this.geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
const source: mapboxgl.GeoJSONSource = this.map.getSource(
  'point',
) as mapboxgl.GeoJSONSource;
source.setData(this.geojson);
addDraggablePoint() {
this.map.on('load', () => {
  this.map.addSource('point', {
    type: 'geojson',
    data: this.geojson,
  this.map.addLayer({
    id: 'point',
    type: 'circle',
    source: 'point',
    paint: {
      'circle-radius': 10,
      'circle-color': '#F84C4C', // red color
  // When the cursor enters a feature in
  // the point layer, prepare for dragging.
  this.map.on('mouseenter', 'point', () => {
    this.map.setPaintProperty('point', 'circle-color', '#3bb2d0');
    this.canvas.style.cursor = 'move';
    console.log(this.canvas);
Any help would be appreciated. Thanks!
EDIT: The pointer is being displayed on the map. The coordinates are changing as well. But, when I drag the pointer then I get this error.
EDIT: The issue has been resolved.
I resolved this issue. The error was due to the fact that this keyword was not working inside the onMove function. So, I changed it to arrow function in order to preserve this keyword.
onMove = (e) => {
 //code
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.