vannizhang / optica

a multi-scale map viewer that shows a web map at different scales
https://vannizhang.github.io/optica/dist/
Apache License 2.0
15 stars 7 forks source link

idea #1

Closed vannizhang closed 2 years ago

vannizhang commented 3 years ago

A multi-scale sort of map viewer that shows a few views of a web map at different scales.

Each panel is a discrete map view. Their center points are always synched such that panning one concurrently pans the others to maintain the same view center (in what feels like realtime, not after mouse release). Their scales are independent of each other.

image

Zoom Lock

A lock toggle button sits between each map view. When locked the difference between the scales is maintained such that if the user zooms in/out, the neighboring map zooms in/out the same number of levels. When unlocked, zooming in/out on a map has no impact on its neighbor’s zoom level. Center point is always maintained. John to provide locked/unlocked graphics.

(in this case the zoom link is unlocked so zooming in or out on either of the neighboring maps doesn’t change the zoom level of the other).

Neighbor Map Reference

A rectangle indicates the extent of the neighboring map (or maps). The rectangle has a triangle on the left or right side indicating which neighbor it corresponds to. It is possible for a map to show two neighbor map reference rectangles concurrently, if it is between two other maps.

(a neighbor map reference showing that the map to the right is covering this extent)

Hamburger Menu

The hamburger menu lets the user choose between 2, 3, or 4 panels with a horizontal or vertical orientation via a set of mutually exclusive graphical buttons (John to provide graphics). The user can choose from a handful of pre-made web maps (John to provide app IDs) or alternatively paste the App ID of any 2D web map into a text box to load a different map (is this too techy? Adding a search UI gets complicated).

image

Panel Shadow

The left and right side of each map panel has a 1px white rectangle to visually separate it from its neighbor. A 10-pixel gradient rectangle on one side of the map frame provides a shadow effect. The gradient shadow renders in the side of the border with the more zoomed out scale.

(in this case the map on the left is zoomed out more, so the shadow rectangle renders on that size of the split)

vannizhang commented 2 years ago