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="wrap"> <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"> <p>Mapstraction can load map tiles from a URL template. These tiles can come from tiling tools such as <a href="http://research.microsoft.com/MapCruncher/" title="MSR MapCruncher">Microsoft MapCruncher</a>, <a href="http://www.klokan.cz/projects/gdal2tiles/" title="GDAL2Tiles - Publish Maps by Google Earth (KML SuperOverlay), Google Maps or OpenLayers as online static files (pyramid tile structure generator)">GDAL2Tiles</a>, <a href="http://mapnik.org/" title="Mapnik C++/Python GIS Toolkit | Welcome">Mapnik</a>, or <a href="http://tilecache.org/" title="TileCache, from MetaCarta Labs">TileCache</a>. </p> <div id="mapstraction" style="position:relative; height: 400px; width: 100%;"></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); // var myPoint = new LatLonPoint(29.96, -90.1); // display the map centered on a latitude and longitude (Google zoom levels) mapstraction.setCenterAndZoom(myPoint, 12); mapstraction.setMapType(Mapstraction.SATELLITE); mapstraction.addSmallControls(); for(var t=0;t<maptiles.length;t++) { mapstraction.addTileLayer(maptiles[t], 0.6); } } </script> <ul> <li><a href="javascript:mapstraction.toggleTileLayer(maptiles[0]);">Toggle 1950's historic map</a></li> <li><a href="javascript:mapstraction.toggleTileLayer(maptiles[1]);">Toggle 1912 historic map</a></li> <li><a href="javascript:mapstraction.toggleTileLayer(maptiles[2]);">Toggle 1877 historic map</a></li> </ul> <p>These historic maps of Oakland, California are courtesy of <a href="http://stamen.com/" title="stamen design | big ideas worth pursuing">Stamen Design</a>.</p> <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> <?php require('footer.php'); ?>