Map: add feature point on browser location

SE/se-lib/TableAjaxMap.php

@@ -39,6 +39,8 @@ class TableAjaxMap {
 .olControlEditingToolbar .olControlRefreshItemActive { background-image: url(stuff/open-layers/theme/default/img/refresh_feature_on.png); }
 .olControlEditingToolbar .olControlSaveItemInactive { background-image: url(stuff/open-layers/theme/default/img/save_features_off.png); }
 .olControlEditingToolbar .olControlSaveItemActive { background-image: url(stuff/open-layers/theme/default/img/save_features_on.png); }
+.olControlEditingToolbar .olControlUserLocationItemInactive { background-image: url(stuff/open-layers/theme/default/img/geolocation-off.png); }
+.olControlEditingToolbar .olControlUserLocationItemActive { background-image: url(stuff/open-layers/theme/default/img/geolocation-on.png); }
 .olControlLayerSwitcher .layersDiv { border-radius:10px 0 0 10px; opacity:0.75; filter:alpha(opacity=75); }
 .notsupported { color:red; }
 .TableAjaxMap .layersDiv input { margin:0; }
@@ -67,7 +69,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			onSaveFeature: null,
 			onSelectBox: null,
 			addBtn: null,
-			debug: false
+			debug: true
 		};
 
 		var _nodeMapId;
@@ -80,6 +82,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 		var _process;
 		var _layer;
 		var _map;
+		var _styleMap;
 
 		/*
 		 initialize the plugin.
@@ -138,6 +141,72 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 			});
 			priv.getCapabilities();
 
+			_styleMap = new OpenLayers.StyleMap({
+				'default': new OpenLayers.Style(null, {
+					rules: [
+						new OpenLayers.Rule({
+							symbolizer: {
+								stroke: true,
+								strokeWidth: 3,
+								fill: true,
+								fillColor: "#ee9900",
+								strokeColor: "#ee9900",
+							}
+						})
+						, new OpenLayers.Rule({
+							symbolizer: {
+								stroke: true,
+								fill: true,
+								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,
+								property: "recordId",
+								value: 0
+							})
+						})
+						, new OpenLayers.Rule({
+							symbolizer: {
+								stroke: true,
+								fill: true,
+								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,
+								property: "_newRecordId",
+								value: 0
+							})
+						})
+						, new OpenLayers.Rule({
+							symbolizer: {
+								stroke: true,
+								fill: true,
+								strokeWidth: 3,
+								fillColor: "#ff0000",
+								strokeColor: "#ff0000",
+							},
+							filter: new OpenLayers.Filter.Comparison({
+								type: OpenLayers.Filter.Comparison.GREATER_THAN,
+								property: "_modified",
+								value: 0
+							})
+						})
+					]
+				})
+			});
+
 			_layer = new OpenLayers.Layer.Vector(priv.options.layerName, {
 				strategies: [new OpenLayers.Strategy.BBOX(), new OpenLayers.Strategy.Cluster({distance:30, threshold:3})],
 				projection: new OpenLayers.Projection("EPSG:4326"),
@@ -151,71 +220,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					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: [
-							new OpenLayers.Rule({
-								symbolizer: {
-									stroke: true,
-									strokeWidth: 3,
-									fill: true,
-									fillColor: "#ee9900",
-									strokeColor: "#ee9900",
-								}
-							})
-							, new OpenLayers.Rule({
-								symbolizer: {
-									stroke: true,
-									fill: true,
-									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,
-									property: "recordId",
-									value: 0
-								})
-							})
-							, new OpenLayers.Rule({
-								symbolizer: {
-									stroke: true,
-									fill: true,
-									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,
-									property: "_newRecordId",
-									value: 0
-								})
-							})
-							, new OpenLayers.Rule({
-								symbolizer: {
-									stroke: true,
-									fill: true,
-									strokeWidth: 3,
-									fillColor: "#ff0000",
-									strokeColor: "#ff0000",
-								},
-								filter: new OpenLayers.Filter.Comparison({
-									type: OpenLayers.Filter.Comparison.GREATER_THAN,
-									property: "_modified",
-									value: 0
-								})
-							})
-						]
-					})
-				})
+				styleMap: _styleMap
 			});
 
 			// @doc OpanLayers events http://dev.openlayers.org/docs/files/OpenLayers/Layer/Vector-js.html#link33
@@ -228,6 +233,10 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 				},
 				'sketchstarted': function(e) {// turn off cluster strategy on start drawing
 					if (priv.options.debug) console.log('Event: sketchstarted e.feature.attributes: ', e.feature.attributes, '; selAttras', (_selectedFeature)? _selectedFeature.attributes : 'null');
+					if (!priv.isSelectedRecordId()) {
+						alert('Najpierw wybierz rekord z tabeli, żeby móc narysować dla niego figurę.');
+						return false;
+					}
 					_layer.strategies[1].deactivate();
 					_layer.refresh({force:false});
 				},
@@ -262,6 +271,53 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 
 
 			var toolbar = new OpenLayers.Control.EditingToolbar(_layer);
+			toolbar.addControls([
+				new OpenLayers.Control.Button({
+					title: "Twoja lokalizacja",
+					displayClass: "olControlUserLocation",
+					trigger: function() {
+						if (!priv.isSelectedRecordId()) {
+							alert('Najpierw wybierz rekord z tabeli, żeby móc narysować dla niego figurę.');
+							return false;
+						}
+						if (navigator.geolocation) {
+							navigator.geolocation.getCurrentPosition(drawFromUserLocation);
+						} else { 
+							alert("Geolocation is not supported by this browser.");
+						}
+						function drawFromUserLocation(position) {
+							var coords = position.coords;
+							console.log("Latitude: " + coords.latitude + "<br>Longitude: " + coords.longitude);
+							publ.zoomToExtent('POINT(' + coords.longitude + ' ' + coords.latitude + ')');
+							setTimeout(function() {
+								var geometry = new OpenLayers.Geometry.Point(coords.longitude, coords.latitude);
+								var sourceProj = new OpenLayers.Projection("EPSG:4326");
+								var targetProj = _map.getProjectionObject();
+								var geometryTransformed = geometry.transform(sourceProj, targetProj);
+								var pointFeature = new OpenLayers.Feature.Vector(geometryTransformed, {_newRecordId: priv.getSelectedRecordId()});//, _styleMap);
+								pointFeature.geometry.clearBounds();
+								console.log("pointFeature: ", pointFeature);
+								_layer.addFeatures([pointFeature], {silent: true});
+								_selectedFeature = pointFeature;
+								console.log("_layer: ", _layer);
+							}, 200);
+						}
+						console.log('TODO: getUserLocation!');
+						return;
+
+						if (_selectedFeature) {
+							if (!_selectedRecordId) {
+								alert('Wybierz rekord  tabeli');
+							}
+							else {
+							}
+						}
+						else {
+							alert('Wybierz element na mapie');
+						}
+					}
+				})
+			]);
 			toolbar.addControls([
 				new OpenLayers.Control.ModifyFeature(_layer, {
 					title: "Edytuj"
@@ -423,6 +479,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					new OpenLayers.Control.PanPanel(),
 					new OpenLayers.Control.LayerSwitcher(),
 					new OpenLayers.Control.ScaleLine(),
+					// TODO: add box with selected record from table, x for remove selection
 					new OpenLayers.Control.KeyboardDefaults()
 				],
 				layers: [gphy,_layer]
@@ -545,6 +602,7 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					return true;
 				}
 			}
+			return false;
 		};
 
 		priv.saveSelectedFeature = function() {
@@ -562,7 +620,9 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 
 		priv.checkSelectedFeatureModifications = function(when) {
 			if (priv.isSelectedFeatureModified()) {
-				if (confirm('Czy zapisać zmiany wprowadzone dla zaznaczonego elementu?')) {
+				var msgRecordId = (_selectedRecordId > 0)? ' - rekord nr ' + _selectedRecordId : '';
+				// TODO: if !_selectedRecordId then "Create new record"
+				if (confirm('Czy zapisać zmiany wprowadzone dla zaznaczonego elementu' + msgRecordId + '?')) {
 					// _layer.refresh();
 					priv.saveSelectedFeature();
 					priv.cancelSelectedFeatureModifications();