openlayers/examples/markerResize.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Resize a Marker</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         var size, icon;
  10
  11         function init(){
  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             var markers = new OpenLayers.Layer.Markers( "Markers" );
  18             map.addLayer(markers);
  19
  20             size = new OpenLayers.Size(50,50);
  21             calculateOffset = function(size) {
  22                         return new OpenLayers.Pixel(-(size.w/2), -size.h); };
  23             icon = new OpenLayers.Icon(
  24                 'http://boston.openguides.org/markers/AQUA.png',
  25                 size, null, calculateOffset);
  26             markers.addMarker(
  27                 new OpenLayers.Marker(new OpenLayers.LonLat(-71,40), icon));
  28
  29             map.addControl(new OpenLayers.Control.LayerSwitcher());
  30             map.zoomToMaxExtent();
  31         }
  32
  33         function resize() {
  34
  35             size = new OpenLayers.Size(size.w + 10, size.h + 10);
  36             icon.setSize(size);
  37
  38         }
  39     </script>
  40   </head>
  41   <body onload="init()">
  42     <div id="title">Resize a Marker</div>
  43     <div id="tags"></div>
  44     <div id="shortdesc">Dynamically resize a marker</div>
  45     <div id="map" class="smallmap"></div>
  46     <div id="docs">
  47         This example shows how to create a OpenLayers.Layer.Markers layer, add an icon, put it into a marker, and add the marker to the layer.  Once the marker has been added it is possible to use setSize() on the icon in order to resize the marker.
  48     </div>
  49     <div style="background-color:purple" onclick="resize()"> click to resize marker</div>
  50   </body>
  51 </html>