mapbox / mapbox-gl-compare

Swipe and sync between two maps
ISC License
147 stars 42 forks source link

Cannot set properties of undefined (setting 'options') #43

Closed SourceCipher closed 2 years ago

SourceCipher commented 2 years ago

Been trying to add the comparison for our mapBox map, but seems like there is always an issue and cant make it work around it.

Libraries: "mapbox-gl": "^2.6.1", "mapbox-gl-compare": "^0.4.0",

Code: We have the default map which is this.webGLMap but then when we enable the comparison, I am creating another map as its shown in the tutorials.

 const afterMap = new mapboxgl.Map({
      container: 'webGLMapAfter', // container ID
      style: process.env.REACT_APP_MAP_BOX_STYLE,
      zoom: 8,
      center: [5.94976, 50.3152322]
    })

    // A selector or reference to HTML element
    const container = '#comparison-container'

    MapboxCompare(this.webGLMap, afterMap, container, {
      mousemove: true, // Optional. Set to true to enable swiping during cursor movement.
      orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
    })

The html is setup like this:

 <div
    style={{
      height: '100%',
      display: 'flex'
    }}
   id='comparison-container'
 >
  <div id='webGLMapBefore' />
  <div id='webGLMapAfter' />
</div>

Every time I am enabling the comparison, the page crashes with the Cannot set properties of undefined (setting 'options') error.

Also debugging the library seems like this is undefined

image

I have tried using new mapboxgl.Compare but that crashes as well with module not found error

SourceCipher commented 2 years ago

Ok I solved the issue. Not sure why its not working using the new mapboxgl.Compare, but adding separate library from mapbox-gl-compare seems to work. The main problem was I didn't called the constructor with new

So it should be like this: import MapboxCompare from 'mapbox-gl-compare'

new MapboxCompare(this.webGLMap, afterMap, container, {
      mousemove: true, // Optional. Set to true to enable swiping during cursor movement.
      orientation: 'vertical' // Optional. Sets the orientation of swiper to horizontal or vertical, defaults to vertical
    })

As previously I just called MapboxCompare and not new MapboxCompare