Improve map comparison plugin

[giswqs]

Fix #155

from anymap import MapLibreMap, MapCompare

left = MapLibreMap(center=[-117.5921, 47.6530], zoom=15.5)
left.add_basemap("Esri.WorldImagery")

right = MapLibreMap(center=[-117.5921, 47.6530], zoom=15.5)
right.add_basemap("Esri.WorldImagery")
filepath = "https://huggingface.co/datasets/giswqs/geospatial/resolve/main/naip_train_buildings.geojson"
right.add_vector(filepath, opacity=0.5, name="buildings")

compare = MapCompare(left_map=left, right_map=right)
compare

[github-actions]

🚀 Deployed on https://693116528622a984a8457d68--opengeos.netlify.app

[Copilot]

Pull request overview

This PR enhances the map comparison plugin to support passing MapWidget instances directly instead of just configuration dictionaries. It adds functionality to extract sources, layers, and map state from existing map objects, and provides methods for dynamically managing layers and sources on comparison maps.

Key Changes

• Added ability to pass MapWidget instances (e.g., MapLibreMap) to MapCompare instead of only configuration dicts
• Implemented automatic extraction of sources, layers, and terrain from MapWidget objects
• Added methods for dynamically adding/removing sources and layers to left/right comparison maps

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
docs/examples/maplibre/map_comparison.ipynb	Added two new example cells demonstrating MapCompare with MapWidget instances, including vector layer overlay example
anymap/static/maplibre_compare_widget.js	Added helper function to apply sources/layers from config and new method handlers for dynamic layer/source management
anymap/static/mapbox_compare_widget.js	Mirrored changes from maplibre version for Mapbox backend consistency
anymap/compare.py	Enhanced MapCompare class with MapWidget detection, configuration extraction, coordinate transformation, and new API methods for layer/source management

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The comment states "MapCompare JS expects [lat, lng]" but this is misleading. The JavaScript code (lines 91, 102 in maplibre_compare_widget.js) swaps the coordinates again when creating the map, converting back to the MapLibre GL JS standard [lng, lat] format.

Consider updating the comment to clarify the full coordinate transformation chain, for example:

# MapLibreMap stores center as [lng, lat]. The JavaScript widget will swap
# coordinates to [lng, lat] when initializing the map (see lines 91, 102 in
# maplibre_compare_widget.js), so we swap here to [lat, lng] as an intermediate format.

Suggested change

	# MapLibreMap stores center as [lng, lat], but MapCompare JS expects [lat, lng]
	# so we swap the coordinates here
	# MapLibreMap stores center as [lng, lat]. The JavaScript widget will swap
	# coordinates to [lng, lat] when initializing the map (see lines 91, 102 in
	# maplibre_compare_widget.js), so we swap here to [lat, lng] as an intermediate format.

[Copilot]

The coordinates in this example are incorrect. MapLibreMap expects coordinates in [longitude, latitude] format, but the example shows center=[40.7, -74.0] which appears to be [latitude, longitude].

New York City is at approximately -74.0° longitude and 40.7° latitude, so this should be:

>>> left = MapLibreMap(center=[-74.0, 40.7], zoom=10)

The same issue applies to line 32.

Suggested change

	>>> left = MapLibreMap(center=[40.7, -74.0], zoom=10)
	>>> left.add_layer("my-layer", {"type": "circle", ...})
	>>> right = MapLibreMap(center=[40.7, -74.0], zoom=10)
	>>> left = MapLibreMap(center=[-74.0, 40.7], zoom=10)
	>>> left.add_layer("my-layer", {"type": "circle", ...})
	>>> right = MapLibreMap(center=[-74.0, 40.7], zoom=10)

[Copilot]

The coordinates in this example are incorrect. MapLibreMap expects coordinates in [longitude, latitude] format, but the example shows center=[40.7, -74.0] which appears to be [latitude, longitude].

New York City is at approximately -74.0° longitude and 40.7° latitude, so this should be:

>>> right = MapLibreMap(center=[-74.0, 40.7], zoom=10)

Suggested change

	>>> left = MapLibreMap(center=[40.7, -74.0], zoom=10)
	>>> left.add_layer("my-layer", {"type": "circle", ...})
	>>> right = MapLibreMap(center=[40.7, -74.0], zoom=10)
	>>> left = MapLibreMap(center=[-74.0, 40.7], zoom=10)
	>>> left.add_layer("my-layer", {"type": "circle", ...})
	>>> right = MapLibreMap(center=[-74.0, 40.7], zoom=10)