mapbox/mapbox-gl-compare

Swipe and sync between two maps

mapbox-gl-compare's Issues

v0.3.0 is not available via CDN

v0.3.0 is not available via Mapbox CDN, this example still uses v0.1.0

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.3.0/mapbox-gl-compare.js
https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.3.0/mapbox-gl-compare.css

Fails import into sveltejs application

Trying to import 'mapbox-gl-compare' to an svelte app, I get the following error "Could not find a declaration file for module 'mapbox-gl-compare' ...." (See attached image).

What is wrong?

I've tried the command npm i --save-dev @types/mapbox-gl-compare but it still doesn't work.

Thanks in advance.

Slider position was wrong with mouse moving after the "margin-left" css of map was added

I tried to add the two maps with comparison inside a DIV. It worked in the beginning. But after adding the "margin-left" css to the DIV and expending the width of the maps, the slider position was wrong with mouse moving. There was an offset between the mouse position and the slider. The offset value is just the value of "margin-left". Do you have any thoughts to fix the issue? Thanks.

Issues using ES6

@tristen I'm trying to use your mapbox-gl-compare tool using ES6.

Would be really nice if the end result would something like this:

import mapboxgl from 'mapbox-gl'
import Compare from 'mapbox-gl-compare'

// before & after Map objects //

mapboxgl.Compare(before, after)

Uncaught ReferenceError: mapboxgl is not defined | index.js:5

However, the end result looks like this "hack" looking code.

import mapboxgl from 'mapbox-gl'
window.mapboxgl = mapboxgl
import Compare from 'mapbox-gl-compare'

// before & after Map objects //

mapboxgl.Compare = Compare
mapboxgl.Compare(before, after)

Even after doing that, I'm still catching some errors.

Uncaught TypeError: this._setPosition is not a function | index.js:20

Remove Compare from map

Hi,
Is there any way to remove the compare from the map when I change the layers?
I tried to search in the API but I didn't find anything helpful.

any ideas?

Thanks

mapbox-compare is duplicated

I have this code in a react component,

const mapLeftRef = useRef<any>(null);
  const mapLeft = useRef<any>(null);

  const mapRightRef = useRef<any>(null);
  const mapRight = useRef<any>(null);

  useEffect(() => {
    mapLeft.current = new mapboxgl.Map({
      container: mapLeftRef.current, // Container ID
      style: "mapbox://styles/mapbox/light-v10",
    });

    mapRight.current = new mapboxgl.Map({
      container: mapRightRef.current, // Container ID
      style: "mapbox://styles/mapbox/dark-v10",
    });

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

    const compare = new MapboxCompare(
      mapLeft.current,
      mapRight.current,
      container,
      {}
    );
  });

return (
    <div id="comparison-container">
      <div className="map" ref={mapLeftRef} />
      <div className="map" ref={mapRightRef} />
    </div>
  );

the code produces mapboxgl-compare div many times, so it's duplicated and not only one.

"mapbox-gl-compare": "^0.4.1",

Cannot set properties of undefined (setting 'options')

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

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

User location over compare maps

Would love to see the ability to request a user's location using mapboxgl.GeolocateControl to somehow overlay a user's location onto both comparison maps. Ideally a single location call to display the user's blue dot onto both maps, synchronized.

New to git & Mapbox so forgive me if I'm going about this all wrong.

peerDependency on mapbox-gl out of date

mapbox-gl is now up to version 0.42.

To avoid requiring a change to the peer dependency on every mabpox-gl release, maybe it would be practical to allow any version of mapbox-gl, and only add restrictions if we find problems?

mapbox_gl__WEBPACK_IMPORTED_MODULE_1___default.a.Compare is not a constructor

something is wrong with with mapbox-gl-compare library even though I was trying the example that was mentioned in the docs , any solution for this bug ?

Thanks :)

Integrate compare map with mapbox-gl-draw

It would be nice if we could have the ability to (easily) draw a polygon across the slider (on both maps at the same time). Is this possible?

My current workaround is to move the slider out of the way when drawing on either side of the map which isnt the greatest UX and creates complicated syncing code to maintain.

The gif shows a Leaflet app with functionality as desired. One can see the live app here

Thank you.

Zoom on double click or visual controls

Is there a way to zoom on double clicks or add controls to a compare map? The settings from the underlying map instances seem to be ignored.

Two Swiper appear on the Compare

Desc:
For some reason, everything works fine when booted using Dev mode. However, after building to the production version, the Swiper is normal when entering the first time, and when entering other pages and returning, two Swipers will appear, and one of them is in the previous location and cannot be dragged. It seems to be cached or something, but Vue doesn't turn KeepAlive on.
If I force the page to refresh, it will return to normal, but it will greatly affect the experience.

Version:
"mapbox-gl": "^2.15.0",
"mapbox-gl-compare": "^0.4.1",
"@mapbox/mapbox-gl-sync-move": "^0.3.1",
"Vue": "^3.3.4",

I'm having a similar issue. I am trying to import the script from the CDN

I'm try to import the mapbox-gl-compare.js directly from the CDN https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js

TypeError: mapboxgl.Compare is not a constructor

Ensure swiper position within bounds on resize.

mapbox-gl-js version: 0.46.0
mapbox-gl-compare: 0.1.0

browser: Chrome 67.0.3396.99

Steps to Trigger Behavior

1. Open the Mapbox Compare Demo.
2. Drag the "swiper" all the way to the right.
3. Make your browser window smaller, the "swiper" then disappears.
4. If you maximize your window again, the "swiper" comes back into view.

Expected Behavior

The "swiper" position should remain within bounds.

Actual Behavior

The position is set as is without checking if its within bounds in the resize event handler Line 29.

npm publish

Current dist version mismatches to npm: 450c68e

And examples in README too. Thanks.

Horizontal has no sliding end run

When using it in horizontal mode, slider doesn't stop at the end (bottom) and continues swiping out of the container box.

-- Edit --
I now see there is a related issue #12.

However, the issue continues when container resize is triggered by a DOM element instead of window, for example in flexbox collapse/expand. I ended up creating a helper directive with ResizeObserver to manage it.

Keybinding support

The control to swipe between maps isn't accessible via keyboard. We should enable support for that when the control is focused and disable on blur.

Add a white background color to the pending map container

When comparing two map styles, if the pending style has spots with no fill polygons (ie transparent areas) it appears as if this module is broken.

In this example, I've taken a simple map style in Studio and removed a land layer.

To address this, I recommend adding a background-color: white style to the container of the pending map.

compare on mousemove option

it would be nice to support an option to compare on mouse move, opposed to dragging the slider.

I've put together a rather crude sketch of this at https://github.com/andrewharvey/mapbox-gl-compare/tree/follow-cursor

In my sketch it's either one approach or the other but it should probably support a hybrid method for devices which have both a mouse and touchscreen, as touchscreen devices would need the slider to drag for a better UX.

add jsdoc for remove()

Swipe between maps in ie11

Swipe between Maps on IE11 and report an error using API :compare. Remove () on Mapboxgl-compare. Js.
How to reslove this problem?

How to remove the second 'after' map from compare

Hi,

when I am use compare.remove();
it will show the after map, can we show the before map ?

compare = new mapboxgl.Compare(before, after, 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
});
compare.remove();

Thanks

Fullscreen map

Hi Guys,

I am using the mapbox-gl-compare plugin on top of a map that displays inside a container.

I am now trying to add a 'fullscreen button', but to no avail

Using: after.addControl(new mapboxgl.FullscreenControl()); displays the the button, but only makes the 'after' map full screen

I then tried creating my own function where I do the following on click:

• make panel fullscreen [css below]

• call resize() function on before, after and map objects

This sort of works, the fullscreen view renders the map (ans slider) at what seems just over 200% height

Any possibility of adding support for the FullscreenControl() function

.panel-fullscreen { display: block; z-index: 9999; position: fixed; width: 100%; height: 100%; top: 0; right: 0; left: 0; bottom: 0; overflow: auto; }