openlayers/examples/mm.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>MultiMap</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         #map {
   8             width: 100%;
   9             height: 512px;
  10             border: 1px solid black;
  11         }
  12     </style>
  13
  14
  15     <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
  16
  17
  18     <script src="../lib/OpenLayers.js"></script>
  19     <script type="text/javascript">
  20         var lon = 5;
  21         var lat = 40;
  22         var zoom = 5;
  23         var map, mmlayer, layer;
  24
  25         function init(){
  26             map = new OpenLayers.Map( 'map' ,
  27             {controls:[new OpenLayers.Control.MouseDefaults()]});
  28
  29             mmlayer = new OpenLayers.Layer.MultiMap( "MultiMap");
  30             map.addLayer(mmlayer);
  31
  32             markers = new OpenLayers.Layer.Markers("markers");
  33             map.addLayer(markers);
  34
  35             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  36             map.addControl( new OpenLayers.Control.LayerSwitcher() );
  37             map.addControl( new OpenLayers.Control.PanZoomBar() );
  38         }
  39
  40         function add() {
  41
  42             marker = new OpenLayers.Marker(new OpenLayers.LonLat(2, 41));
  43             markers.addMarker(marker);
  44         }
  45
  46         function remove() {
  47             markers.removeMarker(marker);
  48         }
  49     </script>
  50   </head>
  51   <body onload="init()">
  52     <h1 id="title">MultiMap Example</h1>
  53     <p id="shortdesc">
  54       An example of using the Layer.MultiMap class.
  55     </p>
  56     <div id="map" class="smallmap"></div>
  57     <div style="background-color:green" onclick="add()"> click to add the marker to the map</div>
  58     <div style="background-color:red" onclick="remove()"> click to remove the marker from the map</div>
  59   </body>
  60 </html>