[Commits] r2562 - in sandbox/cmoullet/ux/GeolocationAPI: examples lib/GeoExt.ux/control
commits at geoext.org
commits at geoext.org
Thu Jan 13 22:06:12 CET 2011
Author: cmoullet
Date: 2011-01-13 22:06:11 +0100 (Thu, 13 Jan 2011)
New Revision: 2562
Removed:
sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.html
sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.js
Modified:
sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.html
sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.js
sandbox/cmoullet/ux/GeolocationAPI/lib/GeoExt.ux/control/GeolocationAPI.js
Log:
Extend UX to display the position and the accuracy
Deleted: sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.html
===================================================================
--- sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.html 2011-01-13 15:57:34 UTC (rev 2561)
+++ sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.html 2011-01-13 21:06:11 UTC (rev 2562)
@@ -1,27 +0,0 @@
-<html>
-<head>
- <title>GeoLocation API Example</title>
-
- <script type="text/javascript" src="../../../trunk/ext/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../../../trunk/ext/ext-all.js"></script>
- <link rel="stylesheet" type="text/css" href="../../../trunk/ext/resources/css/ext-all.css"/>
- <link rel="stylesheet" type="text/css" href="../../../trunk/ext/examples/shared/examples.css"/>
-
- <script type="text/javascript" src="../../../trunk/openlayers/lib/OpenLayers.js"></script>
- <script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
-
- <script type="text/javascript" src="../lib/GeoExt.ux/control/GeolocationAPI.js"></script>
-
- <script type="text/javascript" src="geolocationapiexample.js"></script>
-</head>
-<body>
-<h1>GeoLocation API example</h1>
-
-<p style="margin-bottom:15px;">Example using a Geolocation API control</p>
-
-<p style="margin-bottom:15px;">See <a href="geolocationapiexample.js">geolocationapiexample.js</a> for the source code.</p>
-
-<div id="mapppanel"></div>
-<div id="positionInfo"></div>
-</body>
-</html>
\ No newline at end of file
Deleted: sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.js
===================================================================
--- sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.js 2011-01-13 15:57:34 UTC (rev 2561)
+++ sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapiexample.js 2011-01-13 21:06:11 UTC (rev 2562)
@@ -1,35 +0,0 @@
-Ext.onReady(function() {
-
- // required for tooltips
- Ext.QuickTips.init();
-
- var map = new OpenLayers.Map();
- var GeolocationAPIControl = new OpenLayers.Control.GeolocationAPI({mode: 'tracking', zoom: 11, geolocationOptions: {timeout:3000}});
- map.addControl(GeolocationAPIControl);
-
- var mapPanel = new GeoExt.MapPanel({
- renderTo: "mapppanel",
- width: 800,
- height: 350,
- map: map,
- layers: [new OpenLayers.Layer.WMS("Global Imagery",
- "http://vmap0.tiles.osgeo.org/wms/vmap0",
- {layers: "basic"})],
- center: [7.5, 47],
- zoom: 8
- });
-
- GeolocationAPIControl.events.register("positioncomputed", GeolocationAPIControl, function(position) {
- document.getElementById("positionInfo").innerHTML = this.getPositionInformation("<BR>");
- });
- GeolocationAPIControl.events.register("positionerror", GeolocationAPIControl, function(errorEvent) {
- switch (errorEvent.error.code) {
- case 0: document.getElementById("positionInfo").innerHTML = "There was an error while retrieving your location."; break;
- case 1: document.getElementById("positionInfo").innerHTML = "The user didn't accept to provide a location"; break;
- case 2: document.getElementById("positionInfo").innerHTML = "The browser was unable to determine your location"; break;
- case 3: document.getElementById("positionInfo").innerHTML = "The browser timed out before retrieving the location."; break;
- }
- });
- GeolocationAPIControl.activate();
-
-});
\ No newline at end of file
Modified: sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.html
===================================================================
--- sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.html 2011-01-13 15:57:34 UTC (rev 2561)
+++ sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.html 2011-01-13 21:06:11 UTC (rev 2562)
@@ -12,31 +12,35 @@
margin: 0;
padding: 0;
}
+
#map {
width: 100%;
height: 100%;
}
+
#positionInfo {
- position:absolute;
- right:10px;
- top:10px;
+ position: absolute;
+ right: 10px;
+ top: 10px;
width: 200px;
z-index: 1000;
+ background: white;
+ padding-left: 5px;
+ padding-top: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
}
</style>
-
+ <!-- <script type="text/javascript"
+ src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/OpenLayers.mobile.min.js"></script>-->
<script type="text/javascript"
- src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/OpenLayers.mobile.min.js"></script>
+ src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript"
src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/lib/OpenLayers/Control/TouchNavigation.js"></script>
<script type="text/javascript"
src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/lib/OpenLayers/Handler/Click.js"></script>
- <script type="text/javascript"
- src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/lib/OpenLayers/Layer/WMS.js"></script>
- <script type="text/javascript"
- src="http://c2c-rd-geospatial.demo-camptocamp.com/lib/openlayers/lib/OpenLayers/BaseTypes.js"></script>
<script type="text/javascript" src="../lib/GeoExt.ux/control/GeolocationAPI.js"></script>
<script type="text/javascript" src="geolocationapimobileexample.js"></script>
Modified: sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.js
===================================================================
--- sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.js 2011-01-13 15:57:34 UTC (rev 2561)
+++ sandbox/cmoullet/ux/GeolocationAPI/examples/geolocationapimobileexample.js 2011-01-13 21:06:11 UTC (rev 2562)
@@ -9,13 +9,18 @@
}
})
]});
- var GeolocationAPIControl = new OpenLayers.Control.GeolocationAPI({mode: 'tracking', zoom: 11, geolocationOptions: {timeout:3000}});
+ var GeolocationAPIControl = new OpenLayers.Control.GeolocationAPI({mode: 'position',
+ zoom: 16,
+ displayPosition: false,
+ displayAccuracy: true,
+ geolocationOptions: {timeout:3000}});
map.addControl(GeolocationAPIControl);
- var layer = new OpenLayers.Layer.WMS("Global Imagery",
- "http://vmap0.tiles.osgeo.org/wms/vmap0",
- {layers: "basic"});
+ var layer = new OpenLayers.Layer.OSM("OSM");
+ // enable delayed tile loading for better performance
+ layer.tileLoadingDelay = 300;
+
map.addLayers([layer]);
map.zoomToMaxExtent();
Modified: sandbox/cmoullet/ux/GeolocationAPI/lib/GeoExt.ux/control/GeolocationAPI.js
===================================================================
--- sandbox/cmoullet/ux/GeolocationAPI/lib/GeoExt.ux/control/GeolocationAPI.js 2011-01-13 15:57:34 UTC (rev 2561)
+++ sandbox/cmoullet/ux/GeolocationAPI/lib/GeoExt.ux/control/GeolocationAPI.js 2011-01-13 21:06:11 UTC (rev 2562)
@@ -5,6 +5,8 @@
/**
* Class: OpenLayers.Control.GeolocationAPI
*
+ * For wider support, http://code.google.com/p/geo-location-javascript/ could be useful
+ *
* Inherits from:
* - <OpenLayers.Control>
*/
@@ -19,19 +21,31 @@
currentPosition: null,
+ currentPositionMapCoordinate: null,
+
geolocationOptions: {},
trackingId: false,
errorAlert: false,
+ displayPosition: false,
+
+ displayAccuracy: false,
+
+ positionFeature: null,
+
+ accuracyFeature: null,
+
/**
* Constant: EVENT_TYPES
*
* Supported event types:
* positioncomputed - Triggered when position has been computed
+ * positionerror - Triggered when the geolocation API return an error
+ * geolocationapinotsupported - Triggered when the Geolocation API is not suppported
*/
- EVENT_TYPES: ["positioncomputed", "positionerror"],
+ EVENT_TYPES: ["positioncomputed", "positionerror", "geolocationapinotsupported"],
initialize: function(options) {
options = options || {};
@@ -40,25 +54,35 @@
OpenLayers.Control.GeolocationAPI.prototype.EVENT_TYPES.concat(
OpenLayers.Control.prototype.EVENT_TYPES
);
+ if (!options.vector && (options.displayPosition || options.displayAccuracy)) {
+ options.vector = new OpenLayers.Layer.Vector("GeolocationAPIVector",
+ {displayInLayerSwitcher: false}
+ );
+ }
OpenLayers.Util.applyDefaults(this, options);
+
+ OpenLayers.Control.prototype.initialize.apply(this, [options]);
if (navigator.geolocation) {
this.isGeolocationAPISupported = true;
} else {
this.isGeolocationAPISupported = false;
+ this.events.triggerEvent("geolocationapinotsupported", {control : this});
}
- OpenLayers.Control.prototype.initialize.apply(this, [options]);
},
activate: function () {
- if (this.isGeolocationAPISupported && this.mode == "position") {
+ if (this.isGeolocationAPISupported && this.mode === "position") {
this.activatePosition();
}
- if (this.isGeolocationAPISupported && this.mode == "tracking") {
+ if (this.isGeolocationAPISupported && this.mode === "tracking") {
this.activateTracking();
}
+ if (this.displayPosition || this.displayAccuracy) {
+ this.map.addLayers([this.vector]);
+ }
OpenLayers.Control.prototype.activate.apply(this);
},
deactivate: function () {
@@ -66,20 +90,53 @@
navigator.geolocation.clearWatch(this.trackingId);
this.trackingId = false;
}
+ if (this.displayPosition || this.displayAccuracy) {
+ this.removeFeatures();
+ this.map.removeLayer(this.vector);
+ }
OpenLayers.Control.prototype.deactivate.apply(this);
},
+ removeFeatures: function() {
+ if (this.positionFeature) {
+ this.vector.removeFeatures([this.positionFeature]);
+ }
+ if (this.positionFeature) {
+ this.vector.removeFeatures([this.positionFeature]);
+ }
+ },
+ showFeatures: function() {
+ var point = new OpenLayers.Geometry.Point(this.currentPositionMapCoordinate.lon,
+ this.currentPositionMapCoordinate.lat);
+ if (this.displayPosition) {
+ this.positionFeature = new OpenLayers.Feature.Vector(point);
+ this.vector.addFeatures([this.positionFeature]);
+ }
+ if (this.displayAccuracy) {
+ var radius = this.currentPosition.coords.accuracy;
+ var bbox = new OpenLayers.Bounds(this.currentPositionMapCoordinate.lon - radius,
+ this.currentPositionMapCoordinate.lat - radius,
+ this.currentPositionMapCoordinate.lon + radius,
+ this.currentPositionMapCoordinate.lat + radius);
+ var circle = OpenLayers.Geometry.Polygon.createRegularPolygon(point, radius, 40);
+ this.accuracyFeature = new OpenLayers.Feature.Vector(circle);
+ this.vector.addFeatures(new OpenLayers.Feature.Vector(circle));
+ this.map.zoomToExtent(bbox);
+ }
+ },
activatePosition: function() {
- navigator.geolocation.getCurrentPosition(OpenLayers.Function.bind(this.centerMap,this), OpenLayers.Function.bind(this.locationError,this), this.geolocationOptions);
+ navigator.geolocation.getCurrentPosition(OpenLayers.Function.bind(this.centerMap, this), OpenLayers.Function.bind(this.locationError, this), this.geolocationOptions);
},
activateTracking: function() {
- this.trackingId = navigator.geolocation.watchPosition(OpenLayers.Function.bind(this.centerMap,this), OpenLayers.Function.bind(this.locationError,this), this.geolocationOptions);
+ this.trackingId = navigator.geolocation.watchPosition(OpenLayers.Function.bind(this.centerMap, this), OpenLayers.Function.bind(this.locationError, this), this.geolocationOptions);
},
centerMap: function(position) {
this.currentPosition = position;
var lonLat = new OpenLayers.LonLat(position.coords.longitude, position.coords.latitude);
- var mapCoordinate = lonLat.transform(new OpenLayers.Projection("EPSG:4326"),
+ this.currentPositionMapCoordinate = lonLat.transform(new OpenLayers.Projection("EPSG:4326"),
this.map.getProjectionObject());
- this.map.setCenter(mapCoordinate, this.zoom);
+ this.map.setCenter(this.currentPositionMapCoordinate, this.zoom);
+ this.removeFeatures();
+ this.showFeatures();
this.events.triggerEvent("positioncomputed", {position : position});
},
@@ -87,25 +144,25 @@
this.events.triggerEvent("positionerror", {error : error});
if (this.errorAlert) {
switch (error.code) {
- case 0: alert("There was an error while retrieving your location: " + error.message); break;
+ case 0: alert(OpenLayers.i18n("There was an error while retrieving your location: ") + error.message); break;
case 1: /*The user didn't accept to provide the location */ break;
- case 2: alert("The browser was unable to determine your location: " + error.message); break;
- case 3: alert("The browser timed out before retrieving the location."); break;
+ case 2: alert(OpenLayers.i18n("The browser was unable to determine your location: ") + error.message); break;
+ case 3: alert(OpenLayers.i18n("The browser timed out before retrieving the location.")); break;
}
}
},
getPositionInformation: function(separator) {
if (this.currentPosition) {
- var positionString = "Longitude: " + this.currentPosition.coords.longitude + separator;
- positionString = positionString + "Latitude: " + this.currentPosition.coords.latitude + separator;
- positionString = positionString + "Accuracy: " + this.currentPosition.coords.accuracy + separator;
- positionString = positionString + "Altitude: " + this.currentPosition.coords.altitude + separator;
- positionString = positionString + "Altitude Accuracy: " + this.currentPosition.coords.altitudeAccuracy + separator;
- positionString = positionString + "Heading: " + this.currentPosition.coords.heading + separator;
- positionString = positionString + "Speed: " + this.currentPosition.coords.speed + separator;
+ var positionString = OpenLayers.i18n("Longitude: ") + this.currentPosition.coords.longitude + separator;
+ positionString = positionString + OpenLayers.i18n("Latitude: ") + this.currentPosition.coords.latitude + separator;
+ positionString = positionString + OpenLayers.i18n("Accuracy: ") + this.currentPosition.coords.accuracy + separator;
+ positionString = positionString + OpenLayers.i18n("Altitude: ") + this.currentPosition.coords.altitude + separator;
+ positionString = positionString + OpenLayers.i18n("Altitude Accuracy: ") + this.currentPosition.coords.altitudeAccuracy + separator;
+ positionString = positionString + OpenLayers.i18n("Heading: ") + this.currentPosition.coords.heading + separator;
+ positionString = positionString + OpenLayers.i18n("Speed: ") + this.currentPosition.coords.speed + separator;
return positionString;
} else {
- return "Not available";
+ return OpenLayers.i18n("Not available");
}
}
});
\ No newline at end of file
More information about the Commits
mailing list