Layer Comparison

[BryonLewis]

resolves #111

• Adds vue-maplibre-compare dependency for comparing maps
• adds useMapCompareStore to handle the isComparing as well as properties for comparison
• Creates MapWrapper.vue to switch between default map and comparison map
• Adds a mdi-compare button to selected Layers to toggle into comparison mode
• Adds CompareLayersPanel.vue to panels that displays the left/right or top/bottom list of layers that can be toggled on/off for comparison. This doesn't include the ability to reorder or change styles or remove layers. To do that you need to go back to the main view

TODO:

• Figure out why the maps have a 0 height when launched
• Add the ouath.headers to the requests inside of the comparison library
  • Need to update vue-maplibre-compare for that to be updated
• Probably add emits for zoom center pitch and heading so when returning back to the map it is is in the same location.
  • Confirm the emits are working
• Fix Z-index issues with the compare map and the controls container
• Decide on styling for the slider and coloring for dark/light modes
  • Maybe look into using the theme''s primary color so it stands out
• Look into using the left map as the base map and sliding over the swiper when it's enabled
• Change the compare layer display to have dragging.
• Swap the mdi-cog action for a menu that would allow you to swap the currently displayed style
• Look into trying to do this in a single list, where you have checkboxes for MapA and MapB and styles for MapA and MapB
• Add support for removing/adding layers in the system
  • Update the list when adding/removing so the ordering is true to the list
• Toggle on/off the base map
• Left/Right map having different color styling
  • Style so that There is a single mdi-cog that enables tools to adjust left/right layer
  • Make sure changing the color doesn't turn the layer on
  • Vector map support
  • Raster map support
  • Opacity adjustment per left/right layer
• Final Testing of reordering and any quirks with layering
• Basemap toggling on/off and issues.

20251205 Updates/TODO:

• Fix base Vector tile layer ordering issues. When toggling sometimes the order of the items in the baseLayer seem to change causing some visual issues
  • Expansion: the base map layer ordering if affected by the other ordering and it swaps back and forth.
• Attribution text needs to be set for the ToggleCompare
• Error when adding sources that already exists (specifically being in compare mode and attempting to add a new source)

Reviewer Questions:

• Keep Map.vue (original Map tool) and MapWrapper.vue (the reloading system) or only use the new ToggleCompare.vue
• Please do a quick overview of https://github.com/BryonLewis/vue-maplibre-compare and see if there aren any issues or modifications needed.

TODO 20251216:

• MapB (second map) item selection and tooltip support
  • Going to require adding all of the 'click' actions and events on the layers
  • Update the centering of the map to take in account the slider. Currently it attempts to center based on a full map and not the portion for MapA. MapA and MapB need to be able to center based on their corresponding sizes.
    • This will probably require an event stating the ratio of the comparison slider from inside of vue-maplibre-compare to know how to center the map
• Basemaps don't change on MapB. Assuming this is some Async issue with style.json being requested and loaded. During testing it seems that the MapB basemap is one step behind the right one. I may have to do some async code when the basemap changes to handle this.
  • When using a single URL for the style.json and loading it needs to process the style.json to get the layers and then load up the corresponding layers. This is what is causing the async problem with changing map base layers while in comparison mode.
• Add support for Horizontal and Vetical comparisons.
  • Add maybe a hover state to the compare button that opens a v-menu allowing the user to swap between vertical and horizontal orientation
  • Update all references to left/right to be top/bottom
  • Makes sure that the reloading by changing the orientation works properly with everything
• Reorient the CompareLayerStyle.vue
  • Right/Left orientation for the vertical compare
  • Top/Bottom orientation for the horizontal compare
• Minor Issues
  • Changing basemap will reset the styling to the MapA item
  • Changing basemap will reset the opacity display
  • Changing the style will reset the opacity display

[cloudflare-workers-and-pages]

Deploying geoinsight with    Cloudflare Pages

Latest commit:	890a2d1
Status:	✅  Deploy successful!
Preview URL:	https://a472979f.geoinsight.pages.dev
Branch Preview URL:	https://layer-comparison.geoinsight.pages.dev

View logs

[annehaley]

When I opened the modified files in my own vscode environment, I noticed highlighting for whitespace inconsistencies and unused imports. Could you comb through modified files for those? We may need to update our client linting to catch those.

[annehaley]

As for the reviewer questions in the description:

1. Keep Map.vue (original Map tool) and MapWrapper.vue (the reloading system) or only use the new ToggleCompare.vue

I think we should consolidate wherever possible, so let's try just using ToggleCompare.

2. Please do a quick overview of https://github.com/BryonLewis/vue-maplibre-compare and see if there aren any issues or modifications needed.

Without the structure of a PR review, where would be the best place to put comments and track conversations? Should I start a google doc for it?

[BryonLewis]

Without the structure of a PR review, where would be the best place to put comments and track conversations? Should I start a google doc for it?

Feel free to either do a google doc or if you feel they are actual changes/features that are needed place them as issues in the repo.

[annehaley]

Before doing a more thorough review of https://github.com/BryonLewis/vue-maplibre-compare, I have a high-level question to confirm my understanding. The library's README explains that three components are available: MapCompare, LayerCompare, and ToggleCompare. From my understanding, we only use ToggleCompare in GeoInsight (because we need to turn compare mode on and off). MapCompare is intended for comparing basemaps, and LayerCompare is intended for comparing other layers on top of a common basemap.

Is it possible to write all of this functionality into a single component? It seems that our use case on GeoInsight will need all of that functionality. After #250 (sorry for the complexity that PR adds to this one), we will want the ability to compare maps with different layer sets (with different styles) and different basemaps, and we still need the ability to toggle compare mode. Unless there is a technical reason that they need to be separate, I'm imagining that one component could offer all of those features.

[BryonLewis]

With the updated basemap user layers basemaplayers are layers that don't container .raster. or .vector. Check the updated code here: https://github.com/OpenGeoscience/geoinsight/blob/master/web/src/store/map.ts#L214.

Also remember that the layer ordering for sub-layers inside a vector pmtiles needs to be preserved as well.

[annehaley]

I tried out this feature locally and it's really smooth. This is pretty close to ready, but I have one more suggestion.
Could you make it so that opening the tooltip does not move the map location? Right now, the map will move to center the tooltip (both when compare mode is enabled and disabled)

[BryonLewis]

I tried out this feature locally and it's really smooth. This is pretty close to ready, but I have one more suggestion. Could you make it so that opening the tooltip does not move the map location? Right now, the map will move to center the tooltip (both when compare mode is enabled and disabled)

I just want to confirm, this wasn't something I added during this PR. Centering the featureId that was clicked was something that happened whenever something was clicked for this PR. I created logic for that to work for each (left/right) map when in comparison mode. I can easily disable this for all items. It's done in this function: https://github.com/OpenGeoscience/geoinsight/blob/layer-comparison/web/src/components/map/MapTooltip.vue#L88. I can remove the code or just remove the refernce when clicking here: https://github.com/OpenGeoscience/geoinsight/blob/layer-comparison/web/src/components/map/MapTooltip.vue#L165

I.E you want me to remove all of the code, or perhaps save it in a utils?

[annehaley]

Oh you're right, we did add that as an intentional feature so that large tooltips are less likely to get cut off by map bounds. I think the centering can make sense when not using the compare mode, but it is disruptive while comparing two maps. The centering moves the map underneath without moving the comparison slider, so if my slider is positioned to split the map at a particular location, opening the tooltip will change where on the map the split occurs. Can you just disable the centering when comparison mode is enabled?

[annehaley]

Thanks for changing the centering behavior when compare mode is enabled. This looks good to merge!