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> <head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <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="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Geolocation</title> <title>OpenLayers Geolocation</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script> <style>
<script type="text/javascript"> .olControlAttribution {
var map, layer, vector, watchId; bottom: 3px;
function init(){
var style = {
fillOpacity: 0.1,
fillColor: '#000',
strokeColor: '#f00',
strokeOpacity: 0.6
}
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> </head>
<body onload="init()"> <body onload="init()">
<h1 id="title">Geolocation Example</h1> <h1 id="title">Geolocation Example</h1>
@@ -97,13 +25,16 @@
</p> </p>
<div id="map" class="smallmap"></div> <div id="map" class="smallmap"></div>
<button id="locate">Locate me!</button>
<input type="checkbox" name="track" id="track">
<label for="track">Track my position</label>
<div id="docs"> <div id="docs">
<button id="locate">Locate me!</button> <p>
<label> View the <a href="geolocation.js" target="_blank">geolocation.js source</a>
<input type="checkbox" name="track" id="track" /> to see how this is done.
Track my position </p>
</label>&nbsp;
</div> </div>
<script src="../lib/OpenLayers.js"></script>
<script src="geolocation.js"></script>
</body> </body>
</html> </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;