Demonstrating the use of MapQuest tiles in OL.

2012-05-17 11:06:21 -06:00
parent 985233c2dd
commit a612302a11
2 changed files with 64 additions and 0 deletions
--- a/examples/mapquest.html
+++ b/examples/mapquest.html
@@ -0,0 +1,28 @@
+<!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="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="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="mapquest.js" target="_blank">mapquest.js source</a> for 
+        detail on using MapQuest tiles in OpenLayers.
+        </p>
+    </div>
+    <script src="../lib/OpenLayers.js"></script>
+    <script src="mapquest.js"></script>
+</body>
--- a/examples/mapquest.js
+++ b/examples/mapquest.js
@@ -0,0 +1,36 @@
+var map = new OpenLayers.Map({
+    div: "map",
+    projection: "EPSG:900913",
+    layers: [
+        new OpenLayers.Layer.XYZ(
+            "OpenStreetMap", 
+            [
+                "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+                "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+                "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
+                "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
+            ],
+            {
+                attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png' border='0'>",
+                transitionEffect: "resize"
+            }
+        ),
+        new OpenLayers.Layer.XYZ(
+            "Imagery",
+            [
+                "http://oatile1.mqcdn.com/naip/${z}/${x}/${y}.png",
+                "http://oatile2.mqcdn.com/naip/${z}/${x}/${y}.png",
+                "http://oatile3.mqcdn.com/naip/${z}/${x}/${y}.png",
+                "http://oatile4.mqcdn.com/naip/${z}/${x}/${y}.png"
+            ],
+            {
+                attribution: "Tiles Courtesy of <a href='http://open.mapquest.co.uk/' target='_blank'>MapQuest</a> <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());