API tools faq
paste
Advertisement
Guest User

Openlayer JS. Test options.eventListeners for Layer.

a guest
Jan 19th, 2011
331
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.40 KB | None | 0 0
raw download clone embed print report
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2.   <head>
  3.     <title>OpenLayers Layer</title>
  4.     <style type="text/css">
  5.         body {
  6.             margin: 0;
  7.         }
  8.         #map {
  9.             width: 100%;
  10.             height: 100%;
  11.         }
  12.         .olLayerGoogleCopyright {
  13.             left: 2px;
  14.             bottom: 2px;
  15.         }
  16.         .olLayerGooglePoweredBy {
  17.             left: 2px;
  18.             bottom: 15px;
  19.         }
  20.         .olControlAttribution {
  21.             font-size: smaller;
  22.             right: 3px;
  23.             bottom: 4.5em;
  24.             position: absolute;
  25.             display: block;
  26.         }
  27.     </style>
  28.     <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
  29.     <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
  30.     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  31.     <script type="text/javascript">
  32.         var map;
  33.         var layer;
  34.         function onchangeTypeMap() {
  35.           map.removeLayer(layer);
  36.           addLayer(document.getElementById("selectTypeMap").value);
  37.           document.getElementById("status").innerHTML = "Change " + layer.name + "!";
  38.         }
  39.         function addLayer(nameLayer) {
  40.           // Values idLayer:
  41.           //  Google('g'): gStreets, gSatellite, gHybrid, gPhysical
  42.           //  OSM('o'): osm,
  43.           //  Yahoo('y'): yStreets, ySatellite, yHybrid
  44.           function layerLoadStart(event)
  45.           { document.getElementById("status").innerHTML = "Loading " + layer.name + "..."; }
  46.           function layerLoadEnd(event)
  47.           { document.getElementById("status").innerHTML = "End of load " + layer.name + "!"; }
  48.           var name;
  49.           var options;
  50.           switch (nameLayer[0]) {
  51.             case 'g':
  52.               options = { isBaseLayer: true,
  53.                           eventListeners: { "loadstart": layerLoadStart, "loadend": layerLoadEnd },
  54.                           type: 0, 'sphericalMercator': true, numZoomLevels: 20
  55.                         };
  56.               switch (nameLayer) {
  57.                 case "gStreets":
  58.                      name = "Google Streets";
  59.                      options.type = G_NORMAL_MAP;
  60.                      break;
  61.                 case "gSatellite":
  62.                      name =  "Google Satellite";
  63.                      options.type = G_SATELLITE_MAP;
  64.                      break;
  65.                 case "gHybrid":
  66.                      name = "Google Hybrid";
  67.                      options.type = G_HYBRID_MAP;
  68.                      break;
  69.                 case "gPhysical":
  70.                      name = "Google Physical";
  71.                      options.type = G_PHYSICAL_MAP;
  72.                      options.numZoomLevels = 16;
  73.                      break;
  74.               }
  75.               layer = new OpenLayers.Layer.Google(name, options);
  76.               break;
  77.             case 'o':
  78.               name = "OpenStreetMap";
  79.               options = { isBaseLayer: true,
  80.                           eventListeners: { "loadstart": layerLoadStart, "loadend": layerLoadEnd }
  81.                         };
  82.               layer = new OpenLayers.Layer.OSM(name, "http://tile.openstreetmap.org/${z}/${x}/${y}.png", options);
  83.               break;
  84.             case 'y':
  85.               options = { isBaseLayer: true,
  86.                           eventListeners: { "loadstart": layerLoadStart, "loadend": layerLoadEnd },
  87.                           type: 0, 'sphericalMercator': true
  88.                         };
  89.               switch (nameLayer) {
  90.                 case "yStreets":
  91.                      name = "Yahoo Street";
  92.                      options.type = YAHOO_MAP_REG;
  93.                      break;
  94.                 case "ySatellite":
  95.                      name =  "Yahoo Satellite";
  96.                      options.type = YAHOO_MAP_SAT;
  97.                      break;
  98.                 case "yHybrid":
  99.                      name = "Yahoo Hybrid";
  100.                      options.type = YAHOO_MAP_HYB;
  101.                      break;
  102.               }
  103.               layer = new OpenLayers.Layer.Yahoo(name, options);
  104.               break;
  105.             }
  106.           map.addLayer(layer);
  107.           map.setCenter(new OpenLayers.LonLat(0, 0), 2);
  108.         }
  109.         function init() {
  110.             map = new OpenLayers.Map('map', {
  111.                 theme: null,
  112.                 controls: [],
  113.                 projection: new OpenLayers.Projection("EPSG:900913"),
  114.                 units: "m",
  115.                 maxResolution: 156543.0339,
  116.                 maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
  117.             });
  118.             var iniLayer = "gStreets";
  119.             document.getElementById("status").innerHTML = "Start with " + iniLayer;
  120.             addLayer(iniLayer);
  121.         }
  122.     </script>
  123.   </head>
  124.   <body onload="init()">
  125.     <table border="1">
  126.       <tr>
  127.         <td>
  128.           <select id="selectTypeMap" onchange="onchangeTypeMap()">
  129.             <option>gStreets
  130.             <option>gSatellite
  131.             <option>gHybrid
  132.             <option>gPhysical
  133.             <option>osm
  134.             <option>yStreets
  135.             <option>ySatellite
  136.             <option>yHybrid
  137.           </select>
  138.         </td>
  139.         <td id="status">
  140.           Status
  141.         </td>
  142.       </tr>
  143.     </table>
  144.     <div id="map"></div>
  145.   </body>
  146. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!