google maps tool

[mattyj]

The ability to overlay multiple map types with varying transparency has existed with Google Maps for some time now, but the only applications I've seen have been to drop the opacity of the background layer to make a poly shape - like a gps track - stand out better.

I created a page at

http://mattj.net/overlaymap.html

that allows you to mix and match two different layers with variable opacity. As you scroll, zoom or change layers, the URL is constantly updated, so at any point you can bookmark the URL, cut and paste it into an email, etc. It's a fun toy to play with but viewing satellite and topo imagery on top of each other or relief-shaded satellite images also has practical applications. Check out the following examples:

bay area, satellite w/ shaded relief:
http://mattj.net/overlaymap.html#center=37.82497195707114,-122.288818359375&zoom=9&base=Ter&overlay=Sat&opacity=0.5

regional park trails w/ shaded relief:
http://mattj.net/overlaymap.html#center=37.82314142578527,-122.17650890350342&zoom=15&base=Ter&overlay=OpenStreetMap&opacity=0.5

rainier, shaded relief satellite:
http://mattj.net/overlaymap.html#center=46.864885961378874,-121.77177429199219&zoom=11&base=Ter&overlay=Sat&opacity=0.5

yosemite valley topo w/ satellite
http://mattj.net/overlaymap.html#center=37.74173863896063,-119.57588195800781&zoom=14&base=MyTopo&overlay=Sat&opacity=0.5

Even though the URL updates, it's a standalone webpage with no server-side component, so you can save the HTML file locally and run it that way as well.

I'm sure this has been done before but I couldn't find any examples of it. Enjoy!

[dyusem]

Very cool...thanks for sharing!

[Day Hiker]

Nice job. I worship your skills!

[WouterB]

Nice, very nice!

[Moni]

SWEET!

Any chance that one could change datums as well as grid systems (I prefer using UTM and occasionally need NAD27 rather than NAD83/WGS84)?

[mattyj]

Getting UTM is easy, it's just a question of finding a javascript library with suitable open licensing terms (I'd rather not redo all the math by hand). I have a version locally that puts up UTM, but I'm still trying to find the original source so that I can make sure I'm not violating someone's copyright if I throw it up on my site.

Datums are probably harder; I'm still a little hazy on how assuming different ellipsoid shapes for the earth affects a polar coordinate system like lat/long.

I just checked, and all the major browsers except IE support ungodly long URL strings. I'm going to add the ability to place markers / routes, but it will all take a while as I'm going to be in the Sierra a lot over the coming weeks. At the end of the day, I'd rather be climbing than coding.

[nartreb]

Very cool. My favorite so far is a 60-40 blend of Google terrain and USGS topo. I also very much appreciate the direct URL feature (with no extra step needed), and the fact that mouse coordinates are displayed and constantly updated. However, the coordinates can be very hard to read, despite a good choice of color. Can you make them bold, and/or put a mostly-opaque white background underneath them?

I would use this instead of Acme Mapper if it also had the ability to add markers. I don't need fancy GPS tracks, I just want to be able to email somebody a link and say "park at marker A, camp at marker B, ford the river at marker C". OK, more realistically, "park at marker A, leave the trail at B, the best bouldering is at C"

[mattyj]

Okay, so I updated the tool to display UTM, made the coordinates more readable, and added markers. Right-click to create a new marker, right-click on a marker to delete it. Markers aren't draggable; you have to delete one and create another.

Remember that if you add too many markers your links may not work right in IE.

Example of Mt Rainier showing markers in action:

http://mattj.net/overlaymap.html#center=46.82273412957074,-121.73675537109375&zoom=13&base=Ter&overlay=Sat&opacity=0.5&markers=[{%22lat%22%3A46.83553581454299%2C%22lng%22%3A-121.73297882080078%2C%22title%22%3A%22Camp%20Muir%22}%2C{%22lat%22%3A46.84892147080043%2C%22lng%22%3A-121.74066066741943%2C%22title%22%3A%22Dissapointment%20Cleaver%22}%2C{%22lat%22%3A46.852913038414286%2C%22lng%22%3A-121.76040172576904%2C%22title%22%3A%22Summit%22}%2C{%22lat%22%3A46.803467133767704%2C%22lng%22%3A-121.72971725463867%2C%22title%22%3A%22Panorama%20Point%22}%2C{%22lat%22%3A46.78613268980293%2C%22lng%22%3A-121.73606872558594%2C%22title%22%3A%22Paradise%22}]

[Day Hiker]

[WouterB]

This is getting better and better! I hope you'll one day find the time to incorporate some EU topos.

[MoapaPk]

Nice!

[moonspots]

[mattyj]

[mattyj]

[lavaka]

Hi Matt,
It's a great tool! Thanks very much. Here are a few things I would love to see:

(1) I zoomed in on a popular mountain like Mt Whitney, and the USGS data isn't aligned with Google's data (fortunately in this case, the MyTopo data is well aligned). For cases like this, would it be possible to add a tool that lets the user add an x and y offset to the overlay layer, to allow manual re-alignment?

(2) Summitpost has some really nice google maps -- like for the Mountain Range pages, they show you all the mountains in that group. So there are some things that would be nice:
(2a) (this is unrelated to your site) is it possible to make a hack that lets someone save these to their own google "My Maps"? I checked the google maps API and can't find a way
(2b) Would it be possible to integrate these maps to your setup? Looks like you just scrape the info from the "createMarker" commands.
(2c) Is it possible to save a map from your site to the google "My Maps". Or... export it as a KML file?

(3) With your map tool or any google map, it's sometimes nice to save a map for printing (e.g. with a screen shot). With google maps, there's a quick hack that let's you save a much larger area than the current screen. You just go to "Link" button, and copy the text from the "Paste HTML to embed in website" box and save it in your own html file. Edit that html file and modify the "width" and "height" parameters to a larger value, and then open your html file in a browser. There are firefox plugins, like "screengrab" and "fireshot" that allow you to copy the entire image beyond what's visible in the window.

So, would it be possible to do this using your setup? i.e. add a "Link" link, or tell us how to alter the URL (e.g. http://mattj.net/overlaymap.html#center=X,Y&zoom=14&base=Sat&overlay=MyTopo&opacity=0.7&width=1200&height=900 )

Anyhow, I'm sure this isn't your top priority, but if you have time to make improvements, these are my suggestions. Thanks again for this service!

-Stephen