openlayers/examples/ve.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3       <title>OpenLayers Virtual Earth Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
   7
   8     <script src="../lib/OpenLayers.js"></script>
   9     <script type="text/javascript">
  10
  11         var lon = 5;
  12         var lat = 40;
  13         var zoom = 15;
  14         var map, velayer, layer;
  15
  16         function init(){
  17             map = new OpenLayers.Map( 'map' ,
  18             {controls:[new OpenLayers.Control.MouseDefaults()]});
  19
  20             velayer = new OpenLayers.Layer.VirtualEarth( "VE",
  21             { minZoomLevel: 4, maxZoomLevel: 6, 'type': VEMapStyle.Aerial});
  22             map.addLayer(velayer);
  23
  24             var twms = new OpenLayers.Layer.WMS( "World Map",
  25                         "http://world.freemap.in/cgi-bin/mapserv?",
  26                         { map: '/www/freemap.in/world/map/factbooktrans.map',
  27                           transparent:'true',
  28                           layers: 'factbook',
  29                           'format':'png'},
  30                           {'reproject': true});
  31             map.addLayer(twms);
  32
  33             markers = new OpenLayers.Layer.Markers("markers");
  34             map.addLayer(markers);
  35
  36             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  37             map.addControl( new OpenLayers.Control.LayerSwitcher() );
  38             map.addControl( new OpenLayers.Control.PanZoomBar() );
  39         }
  40
  41         function add() {
  42
  43             marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41));
  44             markers.addMarker(marker);
  45         }
  46
  47         function remove() {
  48             markers.removeMarker(marker);
  49         }
  50     </script>
  51   </head>
  52   <body onload="init()">
  53     <h1 id="title">Virtual Earth Example</h1>
  54
  55     <div id="tags"></div>
  56
  57     <p id="shortdesc">
  58         Demonstrates the use of a Virtual Earth base layer.
  59     </p>
  60
  61     <div id="map" class="smallmap"></div>
  62     <input type="button" onClick="javascript:add()"value="Add the marker from the map">
  63     <input type="button" onClick="javascript:remove()" value="Remove the marker from the map">
  64     <div id="docs">This example demonstrates the ability to add VirtualEarth and the and remove markers.</div>
  65   </body>
  66 </html>
  67
  68