Tile Layer in Mapstraction</titel>  <link rel="stylesheet" type="text/css" href="bluefreedom.css" media="screen" /> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKRwVKGgdK08PzFOkI4mzwBSxwhHJj4F5mVjLsNT2AfMLlpoynxTk5g96WAoVkzIABODCjMST2qhLwg" type="text/javascript"></script> <script type="text/javascript" src="mapstraction-js/mapstraction.js"></script> <style type="text/css"> #mapstraction { height: 600px; width: 600px; } </style> </head> <body onload="loadPage()"> <div id="header"> <img src="images/mapstraction_icon.png" style="float: right;"/> <h1><a href="/">Mapstraction</a></h1> <h2>Tile Layer support</h2> </div> <div class="middle"> <div id="mapstraction" style="position:relative; height: 400px; width: 500px;"></div> <script type="text/javascript"> var mapstraction; var maptiles = ["http://oakland-1950s.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg", "http://oakland-1912.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg", "http://oakland-1877.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg"]; function loadPage() { mapstraction = new Mapstraction('mapstraction','google'); var myPoint = new LatLonPoint(37.804656, -122.263606); // display the map centered on a latitude and longitude (Google zoom levels) mapstraction.setCenterAndZoom(myPoint, 14); mapstraction.setMapType(Mapstraction.SATELLITE); mapstraction.addSmallControls(); for(var t=0;t<maptiles.length;t++) { mapstraction.addTileLayer(maptiles[t], 80); } } </script> <ul> <li><a href="javascript:mapstraction.toggleTileLayer(maptiles[0]);">Toggle 1950s</a></li> <li><a href="javascript:mapstraction.toggleTileLayer(maptiles[1]);">Toggle 1912</a></li> <li><a href="javascript:mapstraction.toggleTileLayer(maptiles[2]);">Toggle 1877</a></li> </ul> <pre id="js_code"> var mapstraction; var maptiles = ["http://oakland-1950s.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg", "http://oakland-1912.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg", "http://oakland-1877.s3.amazonaws.com/{Z}-r{Y}-c{X}.jpg"]; function loadPage() { mapstraction = new Mapstraction('mapstraction','google'); var myPoint = new LatLonPoint(37.804656, -122.263606); // display the map centered on a latitude and longitude (Google zoom levels) mapstraction.setCenterAndZoom(myPoint, 14); mapstraction.setMapType(Mapstraction.SATELLITE); mapstraction.addSmallControls(); for(var t=0;t<maptiles.length;t++) { mapstraction.addTileLayer(maptiles[t], 80); } } </pre> </div>  <div class="right"> <h2>Navigation</h2> <ul> <li><a href="http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com">mailing list</a></li> <li><a href="http://mapstraction.com/trac">Documentation</a></li> <li><a href="http://mapstraction.com/svn/source/">Download</a></li> <li><a href="http://mapstraction.com/doc">API Documentation</a></li> <li><a href="http://mapstraction.com/svn">Repository</a></li> <li><a href="coverage.php">Provider Coverage</a> <span style="color: red">(new)</span></li> </ul> <h2>Demos</h2> <ul> <li><a href="ljn.php">Single Page with several maps</a></li> <li><a href="demo-georss.php">GeoRSS & KML</a></li> <li><a href="demo-overlay.php">Image Overlay</a></li> <li><a href="demo-tiles.php">Map Tiles</a></li> <li><a href="demo-filters.php">Marker Filters/Time Navigation</a></li> <li><a href="demo-fullscreen.html">Fullscreen</a></li> <li><a href="demo-polylines.php">Polylines</a></li> <li><a href="geocode.php?geocoder=mapquest&map=mapquest">Geocoding</a></li> <li><a href="route.php?router=mapquest&map=mapquest">Routes</a></li> </ul> <h2>Specific Provider Demos</h2> <ul> <li><a href="demo.php?map=openstreetmap">OpenStreetMap</a></li> <li><a href="demo.php?map=yahoo">Yahoo</a></li> <li><a href="demo.php?map=google">Google</a></li> <li><a href="demo.php?map=microsoft">Microsoft</a></li> <li><a href="demo.php?map=map24">Map24</a></li> <li><a href="demo.php?map=multimap">MultiMap</a> <small>Commercial and <a href="http://www.multimap.com/openapi/">OpenAPI</a></small></li> <li><a href="demo.php?map=mapquest">MapQuest</a></li> <li><a href="demo.php?map=freeearth">FreeEarth</a> <em>experimental support</em></li> <li><a href="demo.php?map=openlayers">OpenLayers</a></li> </ul> </div> <div id="clear"></div> </div>  <div id="footer"> Hosted in <a href="http://highearthorbit.com">HighEarthOrbit</a> - Design by <a href="http://www.minimalistic-design.net">Minimalistic Design</a> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript">_uacct = "UA-120494-9";// urchinTracker();</script> </body> </html>