ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use accuracyGeometry in geolocation example

Browse Source
This commit is contained in:
Frederic Junod
2014-01-15 09:09:47 +01:00
parent 962ed06717
commit e62842464c
2 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/geolocation.html
-10
View File
@@ -8,15 +8,6 @@
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<style>
.icon-flag {
font-size: 22px;
text-shadow: 2px 2px 3px #013;
}
.tooltip-inner {
white-space: nowrap;
}
</style>
<title>Geolocation example</title> <title>Geolocation example</title>
</head> </head>
<body> <body>
@@ -63,7 +54,6 @@
</div> </div>
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=geolocation" type="text/javascript"></script> <script src="loader.js?id=geolocation" type="text/javascript"></script>
examples/geolocation.js
+19 -16
View File
@@ -2,11 +2,13 @@
// FIXME this circle will need to compensate for the pointResolution of the // FIXME this circle will need to compensate for the pointResolution of the
// FIXME EPSG:3857 projection // FIXME EPSG:3857 projection
goog.require('ol.Feature');
goog.require('ol.FeatureOverlay');
goog.require('ol.Geolocation'); goog.require('ol.Geolocation');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.Overlay');
goog.require('ol.View2D'); goog.require('ol.View2D');
goog.require('ol.dom.Input'); goog.require('ol.dom.Input');
goog.require('ol.geom.Point');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
@@ -22,7 +24,7 @@ var map = new ol.Map({
source: new ol.source.OSM() source: new ol.source.OSM()
}) })
], ],
renderer: exampleNS.getRendererFromQueryString(), renderer: 'canvas',
target: 'map', target: 'map',
view: view view: view
}); });
@@ -41,22 +43,23 @@ geolocation.on('propertychange', function() {
$('#speed').text(geolocation.getSpeed() + ' [m/s]'); $('#speed').text(geolocation.getSpeed() + ' [m/s]');
}); });
var marker = new ol.Overlay({
element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0)),
positioning: 'bottom-left',
stopEvent: false
});
map.addOverlay(marker);
// bind the marker position to the device location.
marker.bindTo('position', geolocation);
geolocation.on('change:accuracy', function() {
$(marker.getElement()).tooltip({
title: this.getAccuracy() + 'm from this point'
});
});
geolocation.on('error', function(error) { geolocation.on('error', function(error) {
var info = document.getElementById('info'); var info = document.getElementById('info');
info.innerHTML = error.message; info.innerHTML = error.message;
info.style.display = ''; info.style.display = '';
}); });
var accuracyFeature = new ol.Feature();
accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
var positionFeature = new ol.Feature();
positionFeature.bindTo('geometry', geolocation, 'position')
.transform(function() {}, function(coordinates) {
return coordinates ? new ol.geom.Point(coordinates) : null;
});
var featuresOverlay = new ol.FeatureOverlay({
map: map,
features: [accuracyFeature, positionFeature]
});