Map add popup on select feature

SE/VERSION

@@ -1 +1 @@
-3.9.8-5
+3.9.8-6

SE/se-lib/TableAjaxMap.php

@@ -150,6 +150,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					geometryName: "the_geom",
 					schema: "http://demo.opengeo.org/geoserver/wfs/DescribeFeatureType?version=1.1.0&typename=og:restricted"
 				}),
+				// @doc: http://dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers/Feature/Vector-js.html
 				styleMap: new OpenLayers.StyleMap({
 					'default': new OpenLayers.Style(null, {
 						rules: [
@@ -169,6 +170,10 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 									strokeWidth: 3,
 									fillColor: "#ee9900",
 									strokeColor: "#ee9900",
+								//	label : "rekord: ${recordId}",
+									fontColor : "#333",
+									fontOpacity: 0.7,
+									ontSize: "12px",
 								},
 								filter: new OpenLayers.Filter.Comparison({
 									type: OpenLayers.Filter.Comparison.GREATER_THAN,
@@ -183,6 +188,10 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 									strokeWidth: 3,
 									fillColor: "#ff0000",
 									strokeColor: "#ff0000",
+								//	label : "rekord: ${_newRecordId}",
+									fontColor : "#333",
+									fontOpacity: 0.7,
+									ontSize: "12px",
 								},
 								filter: new OpenLayers.Filter.Comparison({
 									type: OpenLayers.Filter.Comparison.GREATER_THAN,
@@ -231,6 +240,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					// NOTE: beforefeaturemodified from new node is fired before afterfeaturemodified from old node when click from one node to enother
 					priv.checkSelectedFeatureModifications('before');
 					priv.setSelectedFeature(e.feature);
+					priv.showPopup(e.feature);
 				},
 				'featuremodified': function(e) {
 					if (priv.options.debug) console.log('Event: featuremodified modified(', e.feature.attributes._modified, ') ', e.feature.attributes, ' selAttras', (_selectedFeature)? _selectedFeature.attributes : 'null');// TODO: DBG
@@ -244,6 +254,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 						priv.checkSelectedFeatureModifications('after');
 						priv.setSelectedFeature(null);
 					}
+					priv.hidePopup(e.feature);
 				}
 			});
 
@@ -430,6 +441,41 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			_map.zoomToMaxExtent();
 		};
 
+		priv.showPopup = function(feature) {
+			console.log('showPopup() ... ');
+			if (!feature) return;
+			var popupContent = "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>";
+			if (feature.attributes._newRecordId > 0) {
+				popupContent = 'Rekord: ' + feature.attributes._newRecordId;
+			} else if (feature.attributes.recordId > 0) {
+				popupContent = 'Rekord: ' + feature.attributes.recordId;
+			}
+			popupContent = '<div style="font-size:.8em">' + popupContent + '</div>';
+			var popup = new OpenLayers.Popup("popups",
+				feature.geometry.getBounds().getCenterLonLat(),
+				new OpenLayers.Size(100,20),
+				popupContent,
+				true);
+			popup.setBorder('1px solid #333');
+			popup.setOpacity(0.7);
+			feature.popup = popup;
+			_map.addPopup(popup);
+		};
+
+		priv.hidePopup = function(feature) {
+			console.log('hidePopup() ... ');
+			if (feature && feature.popup) {
+				_map.removePopup(feature.popup);
+				feature.popup.destroy();
+				feature.popup = null;
+			}
+		};
+
+		priv.onPopupClose = function() {
+			console.log('onPopupClose() ...');
+			priv.hidePopup(_selectedFeature);
+		};
+
 		priv.updateState = function() {
 			// TODO: update state view
 			//if (priv.options.debug) console.log('updateState: _selectedFeature:', _selectedFeature, ' _selectedRecordId:', _selectedRecordId);