openlayers/examples/baseLayers.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2     <head>
   3         <title>OpenLayers Base Layers Example</title>
   4
   5         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   6         <link rel="stylesheet" href="style.css" type="text/css" />
   7         <style type="text/css">
   8             #controls
   9             {
  10                 width: 512px;
  11             }
  12         </style>
  13
  14         <!-- this gmaps key generated for http://openlayers.org/dev/ -->
  15         <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA9XNhd8q0UdwNC7YSO4YZghSPUCi5aRYVveCcVYxzezM4iaj_gxQ9t-UajFL70jfcpquH5l1IJ-Zyyw'></script>
  16         <!-- Localhost key -->
  17         <!-- <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
  18         <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
  19         <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
  20         <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
  21         <script src="../lib/OpenLayers.js"></script>
  22         <script type="text/javascript">
  23             var lon = 5;
  24             var lat = 40;
  25             var zoom = 5;
  26             var map, markers;
  27             var barcelona = new OpenLayers.LonLat(2.13134765625,
  28                                                   41.37062534198901);
  29             var madrid = new OpenLayers.LonLat(-3.6968994140625,
  30                                               40.428314208984375);
  31
  32             function init(){
  33                 map = new OpenLayers.Map( 'map' );
  34
  35                 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  36                           "http://labs.metacarta.com/wms/vmap0",
  37                           {layers: 'basic'} );
  38                 var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });
  39                 var ve = new OpenLayers.Layer.VirtualEarth( "VE");
  40                 var yahoo = new OpenLayers.Layer.Yahoo( "Yahoo");
  41                 var mm = new OpenLayers.Layer.MultiMap( "MultiMap");
  42
  43
  44                 map.addLayers([wms, google, ve, yahoo, mm]);
  45
  46                 markers = new OpenLayers.Layer.Markers("markers");
  47                 map.addLayer(markers);
  48
  49                 map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  50                 map.addControl( new OpenLayers.Control.LayerSwitcher() );
  51                 map.addControl( new OpenLayers.Control.MousePosition() );
  52
  53             }
  54
  55             function add() {
  56                 var url = 'http://boston.openguides.org/markers/AQUA.png';
  57                 var sz = new OpenLayers.Size(10, 17);
  58                 var calculateOffset = function(size) {
  59                                     return new OpenLayers.Pixel(-(size.w/2), -size.h);
  60                                  };
  61                 var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
  62                 marker = new OpenLayers.Marker(barcelona, icon);
  63                 markers.addMarker(marker);
  64
  65                 marker = new OpenLayers.Marker(madrid, icon.clone());
  66                 markers.addMarker(marker);
  67
  68             }
  69
  70             function remove() {
  71                 markers.removeMarker(marker);
  72             }
  73
  74         </script>
  75     </head>
  76     <body onload="init()">
  77         <h1 id="title">Base Layers Example</h1>
  78
  79         <div id="tags">
  80         </div>
  81
  82         <p id="shortdesc">
  83            This example shows the use base layers from multiple commercial map image providers.
  84         </p>
  85
  86         <div id="controls">
  87             <div id="map" class="smallmap"></div>
  88
  89             <div style="background-color:green" onclick="add()"> click to add a marker to the map</div>
  90             <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
  91         </div>
  92
  93         <div id="docs">
  94        </div>
  95     </body>
  96 </html>