Map Layer Mashups
Peterson
Overlay of Old Map
function initialize() { var newark = new google.maps.LatLng(40.740, -74.18); var imageBounds = new google.maps.LatLngBounds( new google.maps.LatLng(40.712216,-74.22655), new google.maps.LatLng(40.773941,-74.12544)); var myOptions = { zoom: 12, center: newark, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var oldmap = new google.maps.GroundOverlay( "http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg", imageBounds); oldmap.setMap(map);
Topographic map on Image
function initialize() { var myLatLng = new google.maps.LatLng(62.323907, -150.109291); var myOptions = { zoom: 10, center: myLatLng, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var swBound = new google.maps.LatLng(62.281819, -150.287132); var neBound = new google.maps.LatLng(62.400471, -150.005608); var bounds = new google.maps.LatLngBounds(swBound, neBound); // Photograph courtesy of the U.S. Geological Survey var srcImage = 'images/talkeetna.png'; overlay = new USGSOverlay(bounds, srcImage, map); }
Topo Map on Map with Toggle
<body onLoad="initialize()"> <div id ="toolbar" width="100%; height:20px;" style="text-align:left"> <input type="button" value="Toggle Visibility" onClick="overlay.toggle();"></input> </div> <div id="map_canvas" style="width:700px; height:300px; float:left"></div></body>
Image on Image with Toggle
function initialize() { var myLatLng = new google.maps.LatLng(47.25, -103.18); var myOptions = { zoom: 7, center: myLatLng, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var swBound = new google.maps.LatLng(46.285, -104.450); var neBound = new google.maps.LatLng(48.285, -102.250); var bounds = new google.maps.LatLngBounds(swBound, neBound); // Photograph courtesy of the U.S. Geological Survey var srcImage = 'images/westernND.jpg'; overlay = new USGSOverlay(bounds, srcImage, map);
Traffic
Traffic Overlay
function initialize() { var myLatlng = new google.maps.LatLng(41.258531,-96.012599);var myOptions = { zoom: 11, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var trafficLayer = new google.maps.TrafficLayer();trafficLayer.setMap(map);
Bicycle Path Overlay (total overlay at the larger scales)
function initialize() { var myLatlng = new google.maps.LatLng(41.258531,-96.012599);var myOptions = { zoom: 11, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var bikeLayer = new google.maps.BicyclingLayer();bikeLayer.setMap(map); }
KML
function initialize() { var latlng = new google.maps.LatLng(37.42166, -119.272); var myOptions = {zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var url = 'http://services.google.com/earth/kmz/california_median_ages_n.kmz';
var kmlLayer = new google.maps.KmlLayer(url, { suppressInfoWindows: false, map: map }); }
Multi-scale Paintings
Michael Sweerts, circa 1660
Tiled Overlay
Zoomed Tiled Overlay
Tiles
12th zoom level
14th zoom level
MapTiler 1
MapTiler 2
MapTiler 3
MapTiler 4
MapTiler 5
MapTiler 6
Tile Overlay with Slider - low
Tile Overlay with Slider - high
