Map Compare

[rullymartanto]

Do it possible to create map comparison same with mapbox compare?

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

[Pessimistress]

You can use the multiple views feature.

See example here

[Pessimistress]

If you are using React, then do things the React way. Do not call setProps. Save your view parameters with useState.

[neelduttahere]

Okay, that makes sense, now using useState to save and update viewport params. But I am still using setProps to update the views using the getViews function. The results are almost there (video attached below), but the map viewport seems to be shifting exponentially as I move the slider around, in the direction slider moves. Here is the code snippet below for the changes:

function updateSplitLocation(x) {
    const lPercentage = (x * 100) / (window.innerWidth - 48);

    // Calculate new view state
    const viewport = deckRef.current.deck.getViewports()[0];
    const newCenter = viewport.unproject([x, viewport.height / 2]);

    setViewState({
      longitude: newCenter[0],
      latitude: newCenter[1],
      zoom: viewport.zoom,
      pitch: viewport.pitch,
      bearing: viewport.bearing,
    });

    deckRef.current.deck.setProps({
      views: getViews(lPercentage),
    });
  }

screen-record-split-pane.mp4

[neelduttahere]

I finally figured it out. I will share a full example soon. Maybe we should add this as an example in DeckGL examples page, as this is a very popular use case for web-GIS-related features.

[Pessimistress]

But I am still using setProps to update the views using the getViews function.

Your problem is here:

<DeckGL
        ...
        views={getViews()} // <-- calling getViews with default leftPercentage=50
      />

[Tomas-Aguinaga]

@neelduttahere let me know please the example! This is a super common case as you say and i can create pr for the examples page