Map Layer Mashups Peterson Overlay of Old Map

Map Layer Mashups Peterson

Overlay of Old Map

function initialize() { var newark = new google. maps. Lat. Lng(40. 740, -74. 18); var image. Bounds = new google. maps. Lat. Lng. Bounds( new google. maps. Lat. Lng(40. 712216, -74. 22655), new google. maps. Lat. Lng(40. 773941, -74. 12544)); var my. Options = { zoom: 12, center: newark, map. Type. Id: google. maps. Map. Type. Id. ROADMAP } var map = new google. maps. Map(document. get. Element. By. Id("map_canvas"), my. Options); var oldmap = new google. maps. Ground. Overlay( "http: //www. lib. utexas. edu/maps/historical/newark_nj_1922. jpg", image. Bounds); oldmap. set. Map(map);

Topographic map on Image

function initialize() { var my. Lat. Lng = new google. maps. Lat. Lng(62. 323907, -150. 109291); var my. Options = { zoom: 10, center: my. Lat. Lng, map. Type. Id: google. maps. Map. Type. Id. SATELLITE }; var map = new google. maps. Map(document. get. Element. By. Id("map_canvas"), my. Options); var sw. Bound = new google. maps. Lat. Lng(62. 281819, -150. 287132); var ne. Bound = new google. maps. Lat. Lng(62. 400471, -150. 005608); var bounds = new google. maps. Lat. Lng. Bounds(sw. Bound, ne. Bound); // Photograph courtesy of the U. S. Geological Survey var src. Image = 'images/talkeetna. png'; overlay = new USGSOverlay(bounds, src. Image, map); }

Topo Map on Map with Toggle

<body on. Load="initialize()"> <div id ="toolbar" width="100%; height: 20 px; " style="text-align: left"> <input type="button" value="Toggle Visibility" on. Click="overlay. toggle(); "></input> </div> <div id="map_canvas" style="width: 700 px; height: 300 px; float: left"></div> </body>

Image on Image with Toggle

function initialize() { var my. Lat. Lng = new google. maps. Lat. Lng(47. 25, -103. 18); var my. Options = { zoom: 7, center: my. Lat. Lng, map. Type. Id: google. maps. Map. Type. Id. SATELLITE }; var map = new google. maps. Map(document. get. Element. By. Id("map_canvas"), my. Options); var sw. Bound = new google. maps. Lat. Lng(46. 285, -104. 450); var ne. Bound = new google. maps. Lat. Lng(48. 285, -102. 250); var bounds = new google. maps. Lat. Lng. Bounds(sw. Bound, ne. Bound); // Photograph courtesy of the U. S. Geological Survey var src. Image = 'images/western. ND. jpg'; overlay = new USGSOverlay(bounds, src. Image, map);

Traffic

Traffic Overlay

function initialize() { var my. Latlng = new google. maps. Lat. Lng(41. 258531, -96. 012599); var my. Options = { zoom: 11, center: my. Latlng, map. Type. Id: google. maps. Map. Type. Id. ROADMAP } var map = new google. maps. Map(document. get. Element. By. Id("map_canvas"), my. Options); var traffic. Layer = new google. maps. Traffic. Layer(); traffic. Layer. set. Map(map);

Bicycle Path Overlay (total overlay at the larger scales)

function initialize() { var my. Latlng = new google. maps. Lat. Lng(41. 258531, -96. 012599); var my. Options = { zoom: 11, center: my. Latlng, map. Type. Id: google. maps. Map. Type. Id. ROADMAP } var map = new google. maps. Map(document. get. Element. By. Id("map_canvas"), my. Options); var bike. Layer = new google. maps. Bicycling. Layer(); bike. Layer. set. Map(map); }

KML

function initialize() { var latlng = new google. maps. Lat. Lng(37. 42166, -119. 272); var my. Options = {zoom: 6, center: latlng, map. Type. Id: google. maps. Map. Type. Id. ROADMAP }; var map = new google. maps. Map(document. get. Element. By. Id("map_canvas"), my. Options); var url = 'http: //services. google. com/earth/kmz/california_median_ages_n. kmz'; var kml. Layer = new google. maps. Kml. Layer(url, { suppress. Info. Windows: false, map: map }); }

Multi-scale Paintings Michael Sweerts, circa 1660

Tiled Overlay

Zoomed Tiled Overlay

Tiles 14 th zoom level 12 th zoom level

Map. Tiler 1

Map. Tiler 2

Map. Tiler 3

Map. Tiler 4

Map. Tiler 5

Map. Tiler 6

Tile Overlay with Slider - low

Tile Overlay with Slider - high