Image Overlay 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> <div id="wrap"> <div id="header"> <img src="images/mapstraction_icon.png" style="float: right;"/> <h1><a href="/">Mapstraction</a></h1> <h2>Add a Georeferenced Image Overlay</h2> </div> <div class="middle"> <p>Mapstraction provides functions to overlay images such as historic maps, aerial photos, or architecture diagrams.</p> <div id="mapstraction" style="position:relative; height: 400px; width: 100%;"></div> <script type="text/javascript"> // initialise the map with your choice of API var mapstraction = new Mapstraction('mapstraction','google'); // // create a lat/lon object // var myPoint = new LatLonPoint(18.47, -69.9); // // // display the map centered on a latitude and longitude (Google zoom levels) // mapstraction.setCenterAndZoom(myPoint, 11); // // mapstraction.setMapType(Mapstraction.SATELLITE); // // mapstraction.addImageOverlay("over","images/santodomingo.png",50,-70.01544, 18.39777, -69.80567, 18.563517); // mapstraction.addSmallControls(); // create a lat/lon object //var myPoint = new LatLonPoint(29.95,-90.05); var myPoint = new LatLonPoint(18.47, -69.9); // display the map centered on a latitude and longitude (Google zoom levels) mapstraction.setCenterAndZoom(myPoint, 11); mapstraction.setMapType(Mapstraction.SATELLITE); // mapstraction.addImageOverlay("over","images/santodomingo.png",80,-90.1616813, 29.8929368,-89.9794122,30.0445275) mapstraction.addImageOverlay("over","images/santodomingo.png",50,-70.01544, 18.39777, -69.80567, 18.563517); mapstraction.addSmallControls(); </script> <pre id="js_code"> // initialise the map with your choice of API var mapstraction = new Mapstraction('mapstraction','google'); // create a lat/lon object var myPoint = new LatLonPoint(18.47, -69.9); // display the map centered on a latitude and longitude (Google zoom levels) mapstraction.setCenterAndZoom(myPoint, 11); mapstraction.setMapType(Mapstraction.SATELLITE); <b>mapstraction.addImageOverlay("over","images/santodomingo.png",50,-70.01544, 18.39777, -69.80567, 18.563517);</b> mapstraction.addSmallControls(); </pre> </div>  <div class="right"> <h2>Information</h2> <ul> <li><a href="http://mapstraction.appspot.com">API Sandbox</a> <span style="color: red">(new)</span></li> <li><a href="coverage.php">Provider Coverage</a> </li> <li><a href="features.php">Feature Matrix</a> </li> <li><a href="http://mapstraction.com/doc">API Documentation</a></li> <li><a href="http://code.google.com/p/mapstraction/source/checkout">Download</a> (<a href="http://mapstraction.com/svn/source/">v1</a>)</li> <li><a href="http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com">Mailing List</a></li> <li><a href="http://code.google.com/p/mapstraction">Code Repository for v2</a> <span style="color: red">(new)</span> (<a href="http://mapstraction.com/svn">v1</a>)</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> <li><a href="demo-radius.php">Radius Searching</a></li> </ul> <h2>Specific Provider Demos</h2> <ol> <li><a href="demo.php?map=freeearth">FreeEarth</a></li> <li><a href="demo.php?map=google">Google</a></li> <li><a href="demo.php?map=map24">Map24</a></li> <li><a href="demo.php?map=mapquest">MapQuest</a></li> <li><a href="demo.php?map=microsoft">Microsoft</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=openlayers">OpenLayers</a></li> <li><a href="demo.php?map=openspace">OpenSpace</a></li> <li><a href="demo.php?map=openstreetmap">OpenStreetMap</a></li> <li><a href="demo.php?map=viamichelin">ViaMichelin</a> <span style="color: red">(new)</span></li> <li><a href="demo.php?map=yahoo">Yahoo</a></li> </ol> </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 type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script><script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-120494-9"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>