[OpenLayers-Commits] r4194 - trunk/openlayers/examples
commits at openlayers.org
commits at openlayers.org
Fri Sep 7 11:26:00 EDT 2007
Author: crschmidt
Date: 2007-09-07 11:25:55 -0400 (Fri, 07 Sep 2007)
New Revision: 4194
Added:
trunk/openlayers/examples/select-feature-openpopup.html
Log:
Example of how to open a popup when selecting a feature.
Added: trunk/openlayers/examples/select-feature-openpopup.html
===================================================================
--- trunk/openlayers/examples/select-feature-openpopup.html (rev 0)
+++ trunk/openlayers/examples/select-feature-openpopup.html 2007-09-07 15:25:55 UTC (rev 4194)
@@ -0,0 +1,97 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <style type="text/css">
+ #map {
+ width: 800px;
+ height: 350px;
+ border: 1px solid gray;
+ }
+ #controlToggle li {
+ list-style: none;
+ }
+ </style>
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ <!--
+ var map, drawControls, select;
+ function onFeatureSelect(feature) {
+ popup = new OpenLayers.Popup.Anchored("chicken",
+ feature.geometry.getBounds().getCenterLonLat(),
+ new OpenLayers.Size(250,75),
+ "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
+ null, true);
+ feature.popup = popup;
+ map.addPopup(popup);
+ }
+ function onFeatureUnselect(feature) {
+ map.removePopup(feature.popup);
+ feature.popup.destroy();
+ feature.popup = null;
+ }
+ function init(){
+ map = new OpenLayers.Map('map');
+ var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
+
+ var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
+
+ map.addLayers([wmsLayer, polygonLayer]);
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ map.addControl(new OpenLayers.Control.MousePosition());
+
+ drawControls = {
+ polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
+ OpenLayers.Handler.Polygon),
+ select: new OpenLayers.Control.SelectFeature(polygonLayer,
+ {onSelect: onFeatureSelect,
+ onUnselect: onFeatureUnselect
+ })
+ };
+
+ for(var key in drawControls) {
+ map.addControl(drawControls[key]);
+ }
+
+
+ map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+
+ }
+
+ function toggleControl(element) {
+ for(key in drawControls) {
+ var control = drawControls[key];
+ if(element.value == key && element.checked) {
+ control.activate();
+ } else {
+ control.deactivate();
+ }
+ }
+ }
+ // -->
+ </script>
+ </head>
+ <body onload="init()">
+ <h1>OpenLayers Draw Feature Example</h1>
+ <div id="map"></div>
+ <ul id="controlToggle">
+ <li>
+ <input type="radio" name="type" value="none" id="noneToggle"
+ onclick="toggleControl(this);" checked="checked" />
+ <label for="noneToggle">navigate</label>
+ </li>
+ <li>
+ <input type="radio" name="type" value="polygon" id="polygonToggle"
+ onclick="toggleControl(this);" />
+ <label for="polygonToggle">draw polygon</label>
+ </li>
+ <li>
+ <input type="radio" name="type" value="select" id="selectToggle"
+ onclick="toggleControl(this);" />
+ <label for="selectToggle">select polygon on click</label>
+ </li>
+ </ul>
+ <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
+ to do fun things -- like open a popup.
+ </p>
+ </body>
+</html>
More information about the Commits
mailing list