Skip to content

Instantly share code, notes, and snippets.

@jvillama

jvillama/jsbin.isicaDu.html

Created October 8, 2013 21:37
Show Gist options
  • Save jvillama/6892182 to your computer and use it in GitHub Desktop.
Save jvillama/6892182 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.isicaDu.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
</head>
<body>
<h1 id="title">OpenLayers with MapQuest Tiles</h1>
<div id="shortdesc">
This example demonstrates the use of MapQuest tiles with OpenLayers.
</div>
<div id="tags">
MapQuest, OSM, XYZ
</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
See the <a href="http://openlayers.org/dev/examples/mapquest.js" target="_blank">mapquest.js source</a> for
detail on using MapQuest tiles in OpenLayers.
</p>
</div>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
</body>
Raw
jsbin.isicaDu.js
var map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
layers: [
new OpenLayers.Layer.XYZ(
"OpenStreetMap",
[
"http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
],
{
attribution: "Data, imagery and map information provided by <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a>, <a href='http://www.openstreetmap.org/' target='_blank'>Open Street Map</a> and contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>CC-BY-SA</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
}
),
new OpenLayers.Layer.XYZ(
"Imagery",
[
"http://otile1.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.png"
],
{
attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a>. Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency. <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
transitionEffect: "resize"
}
)
],
center: [0, 0],
zoom: 1
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment