openlayers/examples/markers.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Markers Layer 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="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map, layer;
   9
  10         function init(){
  11             OpenLayers.ProxyHost="/proxy/?url=";
  12             map = new OpenLayers.Map('map');
  13             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  14                 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  15
  16             map.addLayer(layer);
  17             map.setCenter(new OpenLayers.LonLat(0, 0), 0);
  18
  19             var newl = new OpenLayers.Layer.Text( "text", { location:"./textfile.txt"} );
  20             map.addLayer(newl);
  21
  22             var markers = new OpenLayers.Layer.Markers( "Markers" );
  23             map.addLayer(markers);
  24
  25             var size = new OpenLayers.Size(10,17);
  26             var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
  27             var icon = new OpenLayers.Icon('http://boston.openguides.org/markers/AQUA.png',size,offset);
  28             markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
  29
  30             var halfIcon = icon.clone();
  31             markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,45),halfIcon));
  32
  33             marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
  34             marker.setOpacity(0.2);
  35             marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
  36             markers.addMarker(marker);
  37             map.addControl(new OpenLayers.Control.LayerSwitcher());
  38             map.zoomToMaxExtent();
  39
  40             halfIcon.setOpacity(0.5);
  41         }
  42     </script>
  43   </head>
  44   <body onload="init()">
  45     <div id="title">Markers Layer Example</div>
  46     <div id="tags"></div>
  47     <div id="shortdesc">Show markers layer with different markers</div>
  48     <div id="map" class="smallmap"></div>
  49     <div id="docs">
  50         This is an example of an OpenLayers.Layers.Markers layer that shows some examples of adding markers.  Also demonstrated is registering a mousedown effect on a marker.
  51     </div>
  52   </body>
  53 </html>