Align Map Overlay

A special purpose map can be overlaid over leaflet map tiles by specifying the SE and NW image corners as geo-coordinates. These can be refined by dropping markers at better corner locations.

# Method

Create a starting point by editing one of the About Map Plugin samples. This will fork that page but you dan delete this fork later.

Scroll the desired map to the general location of the overlay and shift-double-click to drop markers at where you might expect the SW and NE corners of the overlay will land.

Edit each of these markers to be BOUNDARY markers. This will lock the map in place without adding anything else visible to the map.

Add the OVERLAY markup with the CORS authorized URL for the overlay image. Use the SW and NE boundary coordinates as initial guesses for overlay placement.

Refine these coordinates by zooming into the resulting map near these corners and estimating the displacement needed to align features in this corner. Scroll to the actual overlay corner and drop a new marker at a point equally displaced.

Edit the map markup and cut-paste this new marker to replace our first approximation used on the OVERLAY markup. Repeat this over and over alternating SW and NE corners. If you mess this up just recall a good version from history and continue there.

Finish by dragging the refined map to the intended page. Discard your now unwanted fork of the About page along with all of the uninteresting edits in its Journal.

# Example

I was writing about the basemap image of the United States I was using in a visualization. I stored the basemap as an Asset and wrote an HTML <img> tag to show it on the page.

As we unroll a complex system into 2d or 3d space we must first find persistent organizing properties that can become routinely recognized dimensions.

I chose the Aerial Map as the starting point because its darker colors and absence of governmental boundaries would showcase the overlay itself.

I refined first the SW then NE then touched up the SW again. At this point only the Great Lakes looked a little off so I guessed how much more the NE corner should be displayed then marked and edited this into the overlay command.

Tip: The OVERLAY command is long and wraps around to several lines. Edit carefully and notice where spaces and commas are used which seems inconsistent.

Note: The OVERLAY command can stretch or squeeze horizontal and vertical dimensions independently but it cannot rotate or otherwise distort an image.