Skip to content

Instantly share code, notes, and snippets.

@pieter

pieter/gist:2344775

Created April 9, 2012 17:07
Show Gist options
  • Save pieter/2344775 to your computer and use it in GitHub Desktop.
Save pieter/2344775 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css">
<script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#normal, #frame { width: 400px; height: 400px; border: 1px solid black; position: absolute; }
#frame { left: 450px; }
</style>
</head>
<body>
<div id="normal"></div>
<iframe id="frame"></iframe>
<script type="text/javascript" charset="utf-8">
// !!!!!!!!!!!!!!!!
var apiKey = "API_KEY_HERE";
function createMap (node)
{
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/' + apiKey + '/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
});
var normalMap = new L.Map(node, { zoom: 10 , center: new L.LatLng(51,0) });
normalMap.addLayer(cloudmade);
}
var iFrame = $("#frame")[0];
var doc = iFrame.contentDocument;
doc.head.innerHTML = '<link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css">'
doc.body.innerHTML = "<div></div>";
$(doc.body).css("margin", "0");
var frameDiv = $("div", doc.body);
frameDiv.css({height: "100%", width: "100%"});
createMap(frameDiv[0])
createMap($("#normal")[0]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment