diff --git a/client/site/js/Customizations.js b/client/site/js/Customizations.js index c37470dd..abf865cd 100755 --- a/client/site/js/Customizations.js +++ b/client/site/js/Customizations.js @@ -2,29 +2,6 @@ function customInit() { - // I create a new control click event class - OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { - defaultHandlerOptions: { - 'single': true, - 'double': false, - 'pixelTolerance': 0, - 'stopSingle': false, - 'stopDouble': false - }, - initialize: function(options) { - this.handlerOptions = OpenLayers.Util.extend( - {}, this.defaultHandlerOptions - ); - OpenLayers.Control.prototype.initialize.apply( - this, arguments - ); - this.handler = new OpenLayers.Handler.Click( - this, { - 'click': this.trigger - }, this.handlerOptions - ); - } - }); } // called before map initialization @@ -84,92 +61,6 @@ function customAfterMapInit() { } } ); - - // Create a new map control based on Control Click Event - StreetViewControl = new OpenLayers.Control.Click( { - trigger: function(e) { - openStreetView(geoExtMap.map.getLonLatFromViewPortPx(e.xy)); - } - }); - - - function openStreetView (location) { - - //TODO have to check if google is avaliable - - var panel = Ext.getCmp('RightPanel'); - panel.removeAll(); - - var x = location.lon; - var y = location.lat; - - //alert(location); - - var locWgs = location.transform( - authid, - new OpenLayers.Projection("EPSG:4326")); - - //add location to higlightlayer - var marker = new OpenLayers.Feature.Vector( - new OpenLayers.Geometry.Point(x,y), - {}, - streetViewMarkerStyle - ); - featureInfoHighlightLayer.removeAllFeatures(); - streetViewMarkerStyle.rotation = 0; - featureInfoHighlightLayer.addFeatures(marker); - - // Configure panorama and associate methods and parameters to it - var options = { - position: new google.maps.LatLng(locWgs.lat, locWgs.lon), - pov: { - heading: 0, - pitch: 0, - zoom: 1 - } - }; - - //panorama = new gxp.GoogleStreetViewPanel({ - // location: location - //}) - - var panorama = new google.maps.StreetViewPanorama( - panel.body.dom, options - ); - - panel.add(panorama); - panel.expand(); - - //alert(sw.getStatus()); - - - google.maps.event.addListener(panorama, 'position_changed', function() { - newLoc = panorama.getPosition(); - x2 = new OpenLayers.LonLat(newLoc.lng(),newLoc.lat()); - x2.transform( - new OpenLayers.Projection("EPSG:4326"), - new OpenLayers.Projection(authid) - ); - marker.move(x2); - }); - - google.maps.event.addListener(panorama, 'pov_changed', function() { - //panorama.getPov().heading; - //panorama.getPov().pitch; - - streetViewMarkerStyle.rotation = panorama.getPov().heading; - featureInfoHighlightLayer.removeAllFeatures(); - featureInfoHighlightLayer.addFeatures(marker); - - }); - - - } - - - geoExtMap.map.addControl(StreetViewControl); - - } // called at the end of GetMapUrls @@ -215,6 +106,13 @@ var customButtons = [ function customToolbarLoad() { // // Handle the button click // Ext.getCmp('TESTBUTTON').toggleHandler = mapToolbarHandler; + + //load toolbar for each plugin + function load(key) { + this[key].customToolbarLoad(); + } + + Ext.iterate(Eqwc.plugins, load, Eqwc.plugins); } // called when an event on toolbar is invoked diff --git a/client/site/js/LoadAppProjectData.js b/client/site/js/LoadAppProjectData.js index ae6fed19..1c078593 100644 --- a/client/site/js/LoadAppProjectData.js +++ b/client/site/js/LoadAppProjectData.js @@ -122,6 +122,11 @@ projectData.getLegendUrl = function (layer) { return legend; }; +//plugins +var Eqwc = {}; +Eqwc.plugins = {}; + + var lang = "en"; var helpfile = "help_en.html"; @@ -401,15 +406,6 @@ var locationMarkerStyle = { pointRadius: 10 }; -var streetViewMarkerStyle = { - graphicName: "arrow", - strokeColor: '#333333', - fillColor: '#FF9900', - strokeWidth: 2, - pointRadius: 8, - rotation: 0 -}; - OpenLayers.Renderer.symbol.arrow = [0, 4, 2, 0, 4, 4, 2, 3, 0, 4]; //projection defaults from customProjections.js diff --git a/client/site/js/WebgisInit.js b/client/site/js/WebgisInit.js index 080510b3..177a3874 100755 --- a/client/site/js/WebgisInit.js +++ b/client/site/js/WebgisInit.js @@ -55,8 +55,6 @@ var measurePopup; var currentlyVisibleBaseLayer = null; var layerImageFormats = layerImageFormats || []; // use config from GlobalOptions if any -var enableStreetView = false; - // Call custom Init in Customizations.js customInit(); @@ -859,19 +857,6 @@ function postLoading() { }); myTopToolbar.insert(3, zoomToNextAction); - //streetViewBtn - var streetView = new Ext.Button({ - icon: iconDirectory+'mActionStreetView.png', - id: 'streetViewBtn', - scale: 'medium', - tooltip: 'GoogleStreetView', - tooltipType: 'qtip', - toggleGroup: 'mapTools', - enableToggle: true, - allowDepress: true, - handler: mapToolbarHandler - }); - //geolocate control var geoLocateAction = new GeoExt.Action({ icon: iconDirectory+'mActionLocate.png', @@ -892,7 +877,7 @@ function postLoading() { allowDepress: true, handler: mapToolbarHandler }); - myTopToolbar.insert(100, geoLocateAction,streetView); + myTopToolbar.insert(100, geoLocateAction); //geolocation additional stuff var pulsate = function(feature) { @@ -1858,10 +1843,6 @@ function mapToolbarHandler(btn, evt) { if (btn.id == "IdentifyTool") { if (btn.pressed) { - if(enableStreetView) { - StreetViewControl.deactivate(); - } - identifyToolActive = true; activateGetFeatureInfo(true); mainStatusText.setText(modeObjectIdentificationString[lang]); @@ -2028,20 +2009,6 @@ function mapToolbarHandler(btn, evt) { gl.activate(); } } - - if(btn.id == 'streetViewBtn') { - if (btn.pressed) { - StreetViewControl.activate(); - mainStatusText.setText(modeStreetViewString[lang]); - enableStreetView = true; - } - else - { - StreetViewControl.deactivate(); - featureInfoHighlightLayer.removeAllFeatures(); - mainStatusText.setText(modeNavigationString[lang]); - } - } } function removeMeasurePopup() { diff --git a/plugins/streetview/js/0_controls.js b/plugins/streetview/js/0_controls.js new file mode 100644 index 00000000..a9b893c3 --- /dev/null +++ b/plugins/streetview/js/0_controls.js @@ -0,0 +1,139 @@ +/** + * Created by uros on 5/1/17. + */ + +function streetViewBtnHandler(btn, evt) { + + if(btn.id == 'streetViewBtn') { + if (btn.pressed) { + prepareStreetView(); + } + else + { + StreetViewControl.deactivate(); + featureInfoHighlightLayer.removeAllFeatures(); + mainStatusText.setText(modeNavigationString[lang]); + } + } + +} + +function prepareStreetView() { + + if(typeof(StreetViewControl) == 'undefined') { + // I create a new control click event class + OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { + defaultHandlerOptions: { + 'single': true, + 'double': false, + 'pixelTolerance': 0, + 'stopSingle': false, + 'stopDouble': false + }, + initialize: function(options) { + this.handlerOptions = OpenLayers.Util.extend( + {}, this.defaultHandlerOptions + ); + OpenLayers.Control.prototype.initialize.apply( + this, arguments + ); + this.handler = new OpenLayers.Handler.Click( + this, { + 'click': this.trigger + }, this.handlerOptions + ); + } + }); + + // Create a new map control based on Control Click Event + StreetViewControl = new OpenLayers.Control.Click( { + trigger: function(e) { + openStreetView(geoExtMap.map.getLonLatFromViewPortPx(e.xy)); + } + }); + + geoExtMap.map.addControl(StreetViewControl); + } + + StreetViewControl.activate(); + mainStatusText.setText(modeStreetViewString[lang]); + //enableStreetView = true; + + //return true; +} + + +function openStreetView (location) { + + //TODO have to check if google is avaliable + + var panel = Ext.getCmp('RightPanel'); + panel.removeAll(); + + var x = location.lon; + var y = location.lat; + + //alert(location); + + var locWgs = location.transform( + authid, + new OpenLayers.Projection("EPSG:4326")); + + //add location to higlightlayer + var marker = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(x,y), + {}, + streetViewMarkerStyle + ); + featureInfoHighlightLayer.removeAllFeatures(); + streetViewMarkerStyle.rotation = 0; + featureInfoHighlightLayer.addFeatures(marker); + + // Configure panorama and associate methods and parameters to it + var options = { + position: new google.maps.LatLng(locWgs.lat, locWgs.lon), + pov: { + heading: 0, + pitch: 0, + zoom: 1 + } + }; + + //panorama = new gxp.GoogleStreetViewPanel({ + // location: location + //}) + + var panorama = new google.maps.StreetViewPanorama( + panel.body.dom, options + ); + + panel.add(panorama); + panel.expand(); + + //alert(sw.getStatus()); + + + google.maps.event.addListener(panorama, 'position_changed', function() { + newLoc = panorama.getPosition(); + x2 = new OpenLayers.LonLat(newLoc.lng(),newLoc.lat()); + x2.transform( + new OpenLayers.Projection("EPSG:4326"), + new OpenLayers.Projection(authid) + ); + marker.move(x2); + }); + + google.maps.event.addListener(panorama, 'pov_changed', function() { + //panorama.getPov().heading; + //panorama.getPov().pitch; + + streetViewMarkerStyle.rotation = panorama.getPov().heading; + featureInfoHighlightLayer.removeAllFeatures(); + featureInfoHighlightLayer.addFeatures(marker); + + }); +} + + + + diff --git a/plugins/streetview/js/1_gui.js b/plugins/streetview/js/1_gui.js new file mode 100644 index 00000000..0679016f --- /dev/null +++ b/plugins/streetview/js/1_gui.js @@ -0,0 +1,34 @@ +// new buttons for the toolbar +customButtons.push( + // Add a separator and a button + { + xtype: 'button', + enableToggle: true, + allowDepress: true, + toggleGroup: 'mapTools', + scale: 'medium', + icon: iconDirectory+'mActionStreetView.png', + tooltipType: 'qtip', + tooltip: 'GoogleStreetView', + id: 'streetViewBtn' + }//,{ + // xtype: 'tbseparator' + //} +); + + +Eqwc.plugins["streetview"] = {}; +Eqwc.plugins["streetview"].customToolbarLoad = function() { + + var btn = Ext.getCmp('streetViewBtn'); + btn.toggleHandler = streetViewBtnHandler; +}; + +var streetViewMarkerStyle = { + graphicName: "arrow", + strokeColor: '#333333', + fillColor: '#FF9900', + strokeWidth: 2, + pointRadius: 8, + rotation: 0 +}; \ No newline at end of file