[Commits] r1508 - in sandbox/cmoullet/ux/StreetViewPanel: examples resources ux/widgets
commits at geoext.org
commits at geoext.org
Sat Nov 28 01:13:46 CET 2009
Author: cmoullet
Date: 2009-11-28 01:13:46 +0100 (Sat, 28 Nov 2009)
New Revision: 1508
Added:
sandbox/cmoullet/ux/StreetViewPanel/resources/link.png
sandbox/cmoullet/ux/StreetViewPanel/resources/link_selected.png
Modified:
sandbox/cmoullet/ux/StreetViewPanel/examples/StreetViewPanelExample.html
sandbox/cmoullet/ux/StreetViewPanel/resources/tool.png
sandbox/cmoullet/ux/StreetViewPanel/ux/widgets/StreetViewPanel.js
Log:
Add navigation tool + links
Modified: sandbox/cmoullet/ux/StreetViewPanel/examples/StreetViewPanelExample.html
===================================================================
--- sandbox/cmoullet/ux/StreetViewPanel/examples/StreetViewPanelExample.html 2009-11-27 19:27:46 UTC (rev 1507)
+++ sandbox/cmoullet/ux/StreetViewPanel/examples/StreetViewPanelExample.html 2009-11-28 00:13:46 UTC (rev 1508)
@@ -6,11 +6,11 @@
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
<!-- Google Maps API for "localhost" -->
<!--
- <script src='http://maps.google.com/maps?file=api&v=2.104;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
+ <script src='http://maps.google.com/maps?file=api&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
-->
<!-- Google Maps API for "dev.geoext.org" -->
- <script src='http://maps.google.com/maps?file=api&v=2.104;key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRTv_-xvSZ6KJmWSkQfCJoxbiB7tyBQ1ey_kgwA_p7sbTQSTOBeMyXtXkA'></script>
+ <script src='http://maps.google.com/maps?file=api&key=ABQIAAAAY-I0w1WyNCVHbxpuwQWMpRTv_-xvSZ6KJmWSkQfCJoxbiB7tyBQ1ey_kgwA_p7sbTQSTOBeMyXtXkA'></script>
<script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
<script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
Added: sandbox/cmoullet/ux/StreetViewPanel/resources/link.png
===================================================================
(Binary files differ)
Property changes on: sandbox/cmoullet/ux/StreetViewPanel/resources/link.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: sandbox/cmoullet/ux/StreetViewPanel/resources/link_selected.png
===================================================================
(Binary files differ)
Property changes on: sandbox/cmoullet/ux/StreetViewPanel/resources/link_selected.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: sandbox/cmoullet/ux/StreetViewPanel/resources/tool.png
===================================================================
(Binary files differ)
Modified: sandbox/cmoullet/ux/StreetViewPanel/ux/widgets/StreetViewPanel.js
===================================================================
--- sandbox/cmoullet/ux/StreetViewPanel/ux/widgets/StreetViewPanel.js 2009-11-27 19:27:46 UTC (rev 1507)
+++ sandbox/cmoullet/ux/StreetViewPanel/ux/widgets/StreetViewPanel.js 2009-11-28 00:13:46 UTC (rev 1508)
@@ -49,6 +49,14 @@
*/
showTool: true,
+ /** api: config[showLinks]
+ * ``Boolean`` Defines if the links are represented in the map
+ */
+ /** private: property[showLinks]
+ * ``Boolean`` Are link(s) visible ?
+ */
+ showLinks: true,
+
/** api: config[yaw]
* ``Number`` The camera yaw in degrees relative to true north. True north is 0 degrees, east is 90 degrees, south is 180 degrees, west is 270 degrees.
*/
@@ -93,26 +101,31 @@
GeoExt.ux.StreetViewPanel.superclass.initComponent.call(this);
},
+ // afterRender contains the tools for the management of the interaction between the map and the panorama
afterRender : function() {
if (this.ownerCt) {
var wh = this.ownerCt.getSize();
Ext.applyIf(this, wh);
}
+ //alert(G_API_VERSION);
+ GeoExt.ux.StreetViewPanel.superclass.afterRender.call(this);
- GeoExt.ux.StreetViewPanel.superclass.afterRender.call(this);
- // Create StreetViewClient
+ // Create StreetViewClient for querying information about panorama
this.streetviewclient = new GStreetviewClient();
- // Configure panorama and associate methods and parameters
+ // Configure panorama and associate methods and parameters to it
this.panorama = new GStreetviewPanorama(this.body.dom);
this.panorama.map = this.map;
this.panorama.yaw = this.yaw;
this.panorama.pitch = this.pitch;
this.panorama.level = this.level;
this.panorama.showTool = this.showTool;
+ this.panorama.showLinks = this.showLinks;
this.panorama.clickMode = this.clickMode;
- // Define a panorama method for navigation tool drawing
- this.panorama.drawNavigationTool = function(panorama, position, links) {
+ this.panorama.streetviewclient = this.streetviewclient;
+
+ // Draw navigation tool in map
+ this.panorama.drawNavigationTool = function(panorama, position) {
// Destroy the existing features
panorama.navigationToolLayer.destroyFeatures();
// Compute the new position
@@ -121,14 +134,35 @@
// Define a style
panorama.navigationToolStyle = {
externalGraphic: "../resources/tool.png",
- pointRadius: 30,
+ graphicHeight: 32,
+ graphicWidth: 32,
+ pointRadius: 32,
rotation: panorama.yaw
};
// Add a vector feature in navigation layer
panorama.navigationTool = new OpenLayers.Feature.Vector(circlePosition, null, panorama.navigationToolStyle);
panorama.navigationToolLayer.addFeatures([panorama.navigationTool]);
};
- // Add panorama events listeners
+
+ // Draw link in map
+ this.panorama.drawLinkTool = function(panorama, position, links) {
+ // Destroy the existing features
+ panorama.navigationLinkLayer.destroyFeatures();
+ // Add new link symbols
+ panorama.navigationLinks = [];
+ for (var i = 0; i < links.length; i++) {
+ var link = links[i];
+ var centerPosition = new OpenLayers.Geometry.Point(position.lng(), position.lat());
+ centerPosition.transform(new OpenLayers.Projection("EPSG:4326"), panorama.map.getProjectionObject());
+ // Add a vector feature as navigation link
+ panorama.navigationLinks.push(new OpenLayers.Feature.Vector(centerPosition, {angle: link.yaw, panoId: link.panoId}));
+ }
+ if (panorama.navigationLinks.length > 0) {
+ panorama.navigationLinkLayer.addFeatures(panorama.navigationLinks);
+ }
+ };
+
+ // Add panorama event listeners
GEvent.addListener(this.panorama, "yawchanged", function(yaw) {
// This is the panorama
if (this.showTool) {
@@ -137,29 +171,55 @@
}
this.yaw = yaw;
});
- // Callback to manage panorama
+ GEvent.addListener(this.panorama, "zoomchanged", function(zoom) {
+ this.zoom = zoom;
+ });
+
+ // Callback to manage panorama when used with getNearestPanorama
this.panorama.callback = function (data) {
- if (data) {
- if (data.code == 600) {
- alert(OpenLayers.i18n('Google Street View: No panorama found near this position. You have to click elsewhere ;-)'));
- } else if (data.code == 500) {
- alert(OpenLayers.i18n('Google Street View: Server error'));
- } else if (data.code == 200) {
- var POV = {yaw: this.panorama.yaw, pitch: this.panorama.pitch, zoom: this.panorama.zoom};
- this.panorama.setLocationAndPOV(data.location.latlng, POV);
- // Add the navigation tool
- if (this.panorama.showTool) {
- this.panorama.drawNavigationTool(this.panorama, data.location.latlng, data.links)
+ this.deleteFeatures = function() {
+ if (this.panorama.showTool) {
+ if (this.panorama.map) {
+ this.panorama.navigationToolLayer.destroyFeatures();
+ }
+ }
+ if (this.panorama.showLinks) {
+ if (this.panorama.map) {
+ this.panorama.navigationLinkLayer.destroyFeatures();
+ }
+ }
+ };
+ if (data) {
+ if (data.code == 600) {
+ this.deleteFeatures();
+ alert(OpenLayers.i18n('Google Street View: No panorama found near this position. You have to click elsewhere ;-)'));
+ } else if (data.code == 500) {
+ this.deleteFeatures()
+ alert(OpenLayers.i18n('Google Street View: Server error'));
+ } else if (data.code == 200) {
+ var POV = {yaw: this.panorama.yaw, pitch: this.panorama.pitch, zoom: this.panorama.zoom};
+ this.panorama.setLocationAndPOV(data.location.latlng, POV);
+ // Add the navigation tool
+ if (this.panorama.showTool) {
+ if (this.panorama.map) {
+ this.panorama.drawNavigationTool(this.panorama, data.location.latlng);
}
-
- } else {
- alert(OpenLayers.i18n('Google Street View: Unexpected problem'));
}
+ // Add the links
+ if (this.panorama.showLinks) {
+ if (this.panorama.map) {
+ this.panorama.drawLinkTool(this.panorama, data.location.latlng, data.links);
+ }
+ }
+ } else {
+ this.deleteFeatures();
+ alert(OpenLayers.i18n('Google Street View: Unexpected problem'));
}
- };
+ }
+ };
+
// Set initial position of panorama
if (this.panoramaLocation) {
- var POV = {yaw: this.panorama.yaw, pitch: this.panorama.pitch, zoom: this.panorama.zoom};
this.streetviewclient.getNearestPanorama(this.panoramaLocation, this.callback.createDelegate(this));
}
@@ -176,10 +236,66 @@
this.map.addControl(this.clickControl);
this.clickControl.activate();
}
+ // Add the 2D navigation tool in the map
if (this.showTool) {
- this.panorama.navigationToolLayer = new OpenLayers.Layer.Vector("2DNavigationTool");
+ this.panorama.navigationToolLayer = new OpenLayers.Layer.Vector("2DNavigationTool", {
+ styleMap: new OpenLayers.StyleMap({
+ "default": {
+ externalGraphic: "../resources/link.png",
+ graphicHeight: 16,
+ graphicYOffset: -26,
+ rotation: "${angle}"
+ },
+ "select": {
+ cursor: "pointer",
+ externalGraphic: "../resources/link_selected.png"
+ }
+ })});
this.map.addLayer(this.panorama.navigationToolLayer);
+ this.dragControl = new OpenLayers.Control.DragFeature(this.panorama.navigationToolLayer, {
+ doneDragging: function(pixel) {
+ var position = this.panorama.map.getLonLatFromPixel(pixel);
+ position.transform(this.panorama.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
+ var featurePosition = new GLatLng(position.lat, position.lon);
+ this.streetviewclient.getNearestPanorama(featurePosition, this.panorama.callback.createDelegate(this));
+ },
+ moveFeature: function(pixel) {
+ //alert(pixel);
+ },
+ panorama: this.panorama,
+ streetviewclient: this.streetviewclient
+ });
+ this.map.addControl(this.dragControl);
+ this.dragControl.activate();
}
+ // Add the links in the map
+ if (this.showLinks) {
+ this.panorama.navigationLinkLayer = new OpenLayers.Layer.Vector("2DNavigationLink", {
+ styleMap: new OpenLayers.StyleMap({
+ "default": {
+ externalGraphic: "../resources/link.png",
+ graphicHeight: 16,
+ graphicYOffset: -26,
+ rotation: "${angle}"
+ },
+ "select": {
+ cursor: "pointer",
+ externalGraphic: "../resources/link_selected.png"
+ }
+ })
+ });
+ this.map.addLayer(this.panorama.navigationLinkLayer);
+ this.selectControl = new OpenLayers.Control.SelectFeature(this.panorama.navigationLinkLayer, {
+ hover: true,
+ clickFeature: function(feature) {
+ this.streetviewclient.getPanoramaById(feature.attributes.panoId, this.panorama.callback.createDelegate(this));
+ },
+ panorama: this.panorama,
+ streetviewclient: this.streetviewclient
+ });
+ this.map.addControl(this.selectControl);
+ this.selectControl.activate();
+ }
}
},
@@ -191,9 +307,21 @@
}
}
if (this.showTool) {
- this.map.removeLayer(this.panorama.navigationToolLayer);
- this.panorama.navigationToolLayer.destroy();
+ if (this.map) {
+ this.map.removeLayer(this.panorama.navigationToolLayer);
+ this.panorama.navigationToolLayer.destroy();
+ this.dragControl.deactivate();
+ this.map.removeControl(this.dragControl);
+ }
}
+ if (this.showLinks) {
+ if (this.map) {
+ this.map.removeLayer(this.panorama.navigationLinkLayer);
+ this.panorama.navigationLinkLayer.destroy();
+ this.selectControl.deactivate();
+ this.map.removeControl(this.selectControl);
+ }
+ }
this.panorama.remove();
delete this.panorama;
GeoExt.ux.StreetViewPanel.superclass.beforeDestroy.apply(this, arguments);
More information about the Commits
mailing list