openlayers/examples/select-feature-openpopup.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Open Popup on Layer.Vector</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         #controlToggle li {
   8             list-style: none;
   9         }
  10     </style>
  11     <script src="../lib/OpenLayers.js"></script>
  12     <script type="text/javascript">
  13         var map, drawControls, selectControl, selectedFeature;
  14         function onPopupClose(evt) {
  15             selectControl.unselect(selectedFeature);
  16         }
  17         function onFeatureSelect(feature) {
  18             selectedFeature = feature;
  19             popup = new OpenLayers.Popup.FramedCloud("chicken",
  20                                      feature.geometry.getBounds().getCenterLonLat(),
  21                                      null,
  22                                      "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
  23                                      null, true, onPopupClose);
  24             feature.popup = popup;
  25             map.addPopup(popup);
  26         }
  27         function onFeatureUnselect(feature) {
  28             map.removePopup(feature.popup);
  29             feature.popup.destroy();
  30             feature.popup = null;
  31         }
  32         function init(){
  33             map = new OpenLayers.Map('map');
  34             var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  35                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
  36
  37             var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
  38
  39             map.addLayers([wmsLayer, polygonLayer]);
  40             map.addControl(new OpenLayers.Control.LayerSwitcher());
  41             map.addControl(new OpenLayers.Control.MousePosition());
  42
  43             selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
  44                 {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  45             drawControls = {
  46                 polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
  47                             OpenLayers.Handler.Polygon),
  48                 select: selectControl
  49             };
  50
  51             for(var key in drawControls) {
  52                 map.addControl(drawControls[key]);
  53             }
  54
  55
  56             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
  57
  58         }
  59
  60         function toggleControl(element) {
  61             for(key in drawControls) {
  62                 var control = drawControls[key];
  63                 if(element.value == key && element.checked) {
  64                     control.activate();
  65                 } else {
  66                     control.deactivate();
  67                 }
  68             }
  69         }
  70     </script>
  71   </head>
  72   <body onload="init()">
  73     <h1 id="title">Open Popup on Layer.Vector</h1>
  74     <p id="shortdesc">
  75       Using a Control.SelectFeature, open a popup on click.
  76     </p>
  77     <div id="map" class="smallmap"></div>
  78     <ul id="controlToggle">
  79         <li>
  80             <input type="radio" name="type" value="none" id="noneToggle"
  81                    onclick="toggleControl(this);" checked="checked" />
  82             <label for="noneToggle">navigate</label>
  83         </li>
  84         <li>
  85             <input type="radio" name="type" value="polygon" id="polygonToggle"
  86                    onclick="toggleControl(this);" />
  87             <label for="polygonToggle">draw polygon</label>
  88         </li>
  89         <li>
  90             <input type="radio" name="type" value="select" id="selectToggle"
  91                    onclick="toggleControl(this);" />
  92             <label for="selectToggle">select polygon on click</label>
  93         </li>
  94     </ul>
  95     <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
  96        to do fun things -- like open a popup.
  97     </p>
  98   </body>
  99 </html>