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

Linking to example source code. Setting watch checkbox to match initial control state.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11263 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2011-02-22 22:00:59 +00:00
parent 8d15d94494
commit 7fe4329afe
2 changed files with 91 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
examples/geolocation.html
View File

@@ -1,89 +1,17 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Geolocation</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer, vector, watchId;
function init(){
var style = {
fillOpacity: 0.1,
fillColor: '#000',
strokeColor: '#f00',
strokeOpacity: 0.6
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style>
.olControlAttribution {
bottom: 3px;
}
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
vector = new OpenLayers.Layer.Vector('vector');
map.addLayers([layer, vector]);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
var geolocate = new OpenLayers.Control.Geolocate({
geolocationOptions: {
enableHighAccuracy: false,
maximumAge: 0,
timeout: 7000
}
});
map.addControl(geolocate);
geolocate.events.register("locationupdated",this,function(e) {
vector.removeAllFeatures();
vector.addFeatures([
new OpenLayers.Feature.Vector(
e.point,
{},
{
graphicName: 'cross',
strokeColor: '#f00',
strokeWidth: 2,
fillOpacity: 0,
pointRadius: 10
}
),
new OpenLayers.Feature.Vector(
OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(e.point.x, e.point.y),
e.position.coords.accuracy/2,
50,
0
),
{},
style
)
]);
map.zoomToExtent(vector.getDataExtent());
});
geolocate.events.register("locationfailed",this,function() {
console.log('Location detection failed');
});
window.geolocate = geolocate;
$('locate').onclick = function() {
geolocate.deactivate();
$('track').checked = false;
geolocate.watch = false;
geolocate.activate();
};
$('track').onclick = function() {
geolocate.deactivate();
if (this.checked) {
geolocate.watch = true;
geolocate.activate();
}
};
}
</script>
</style>
</head>
<body onload="init()">
<h1 id="title">Geolocation Example</h1>
@@ -97,13 +25,16 @@
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<button id="locate">Locate me!</button>
<label>
<input type="checkbox" name="track" id="track" />
Track my position
</label>&nbsp;
<input type="checkbox" name="track" id="track">
<label for="track">Track my position</label>
<div id="docs">
<p>
View the <a href="geolocation.js" target="_blank">geolocation.js source</a>
to see how this is done.
</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="geolocation.js"></script>
</body>
</html>

72
examples/geolocation.js Normal file
View File

@@ -0,0 +1,72 @@
var style = {
fillOpacity: 0.1,
fillColor: '#000',
strokeColor: '#f00',
strokeOpacity: 0.6
}
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
var vector = new OpenLayers.Layer.Vector('vector');
map.addLayers([layer, vector]);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
var geolocate = new OpenLayers.Control.Geolocate({
geolocationOptions: {
enableHighAccuracy: false,
maximumAge: 0,
timeout: 7000
}
});
map.addControl(geolocate);
geolocate.events.register("locationupdated",this,function(e) {
vector.removeAllFeatures();
vector.addFeatures([
new OpenLayers.Feature.Vector(
e.point,
{},
{
graphicName: 'cross',
strokeColor: '#f00',
strokeWidth: 2,
fillOpacity: 0,
pointRadius: 10
}
),
new OpenLayers.Feature.Vector(
OpenLayers.Geometry.Polygon.createRegularPolygon(
new OpenLayers.Geometry.Point(e.point.x, e.point.y),
e.position.coords.accuracy/2,
50,
0
),
{},
style
)
]);
map.zoomToExtent(vector.getDataExtent());
});
geolocate.events.register("locationfailed",this,function() {
OpenLayers.Console.log('Location detection failed');
});
$('locate').onclick = function() {
geolocate.deactivate();
$('track').checked = false;
geolocate.watch = false;
geolocate.activate();
};
$('track').onclick = function() {
geolocate.deactivate();
if (this.checked) {
geolocate.watch = true;
geolocate.activate();
}
};
$('track').checked = false;