1 / 29

Map Layer Mashups

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));

jacob-carey
Download Presentation

Map Layer Mashups

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Map Layer Mashups Peterson

  2. Overlay of Old Map

  3. 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);

  4. Topographic map on Image

  5. 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); }

  6. Topo Map on Map with Toggle

  7. <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>

  8. Image on Image with Toggle

  9. 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);

  10. Traffic

  11. Traffic Overlay

  12. 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);

  13. Bicycle Path Overlay (total overlay at the larger scales)

  14. 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); }

  15. KML

  16. 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 }); }

  17. Multi-scale Paintings Michael Sweerts, circa 1660

  18. Tiled Overlay

  19. Zoomed Tiled Overlay

  20. Tiles 14th zoom level 12th zoom level

  21. MapTiler 1

  22. MapTiler 2

  23. MapTiler 3

  24. MapTiler 4

  25. MapTiler 5

  26. MapTiler 6

  27. Tile Overlay with Slider - low

  28. Tile Overlay with Slider - high

More Related