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
@@ -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>
@@ -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());