Skip to content

Instantly share code, notes, and snippets.

@rungiraffe

rungiraffe/google.html

Created October 16, 2012 00:24
Show Gist options
  • Save rungiraffe/3896561 to your computer and use it in GitHub Desktop.
Save rungiraffe/3896561 to your computer and use it in GitHub Desktop.
Download ZIP
Mapstraction API with Google and OpenLayer APIs
Raw
google.html
<!--Based on code in the API sandbox: http://mapstraction.appspot.com/#image_overlay. JS documentation here: http://www.mapscripting.com/mxndocs
/index.html
THIS CODE ONLY RENDERS BASE MAP
http://rungiraffe.com/clio3/mapexample/mapstraction/openlayers.html
-->
<html>
<head>
<title>Google with Mapstraction APIs</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="http://mapstraction.googlecode.com/svn/trunk/source/mxn.js?(google)"></script>
<script type="text/javascript">
var mapstraction;
function initialize() {
// initialize the map with your choice of API
var mapstraction = new mxn.Mapstraction('map_canvas','google');
// create a lat/lon object (centered on the U.S. Capitol)
var myPoint = new mxn.LatLonPoint(38.88983,-77.010262);
// display the map centered on a latitude and longitude (Google zoom levels)
mapstraction.setCenterAndZoom(myPoint, 14);
//Add Control
mapstraction.addSmallControls();
//Adding Historic Map Overlay - THIS IS NOT APPEARING
mapstraction.addImageOverlay('rumsey1873', 'maps/warped_map.png', 100, -77.0833042589072, 38.8550166245068, -76.933616305016, 38.9265575316522);
//Add Address Overlay - THIS IS NOT APPEARING
mapstraction.addOverlay('http://rungiraffe.com/clio3/mapexample/mapstraction/maps/address.kml', false);
}
</script>
</head>
<body onload='initialize()'>
<h1> Google and Mapstraction APIs</h1>
<div id='map_canvas'></div>
</body>
</html>
Raw
openlayers.html
<!--Based on code in the API sandbox: http://mapstraction.appspot.com/#image_overlay. JS documentation here: http://www.mapscripting.com/mxndocs/index.html
THIS CODE DOES NOT RENDER THE MAP AT ALL
http://rungiraffe.com/clio3/mapexample/mapstraction/google.html
-->
<html>
<head>
<title>OpenLayers with Mapstraction APIs</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" charset="utf-8" src="http://mapstraction.googlecode.com/svn/trunk/source/mxn.js?(openlayers)"></script>
<script type="text/javascript">
var mapstraction;
function initialize() {
// initialize the map with your choice of API
var mapstraction = new mxn.Mapstraction('map_canvas','openlayers');
// create a lat/lon object (centered on the U.S. Capitol)
var myPoint = new mxn.LatLonPoint(38.88983,-77.010262);
// display the map centered on a latitude and longitude (Google zoom levels)
mapstraction.setCenterAndZoom(myPoint, 14);
//Add Map Controls
mapstraction.addControls({
pan: true,
zoom: 'small',
map_type: true
});
//Adding Historic Map Overlay
mapstraction.addImageOverlay('rumsey1873', 'maps/warped_map.png', 100, -77.0833042589072, 38.8550166245068, -76.933616305016, 38.9265575316522);
//Add Address Overlay
mapstraction.addOverlay('http://rungiraffe.com/clio3/mapexample/mapstraction/maps/address.kml', false);
}
</script>
</head>
<body onload='initialize()'>
<h1> OpenLayers and Mapstraction APIs</h1>
<div id='map_canvas'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment