Closed SourceCipher closed 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
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.The html is setup like this:
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 undefinedI have tried using
new mapboxgl.Compare
but that crashes as well with module not found error