[OpenLayers-Commits] r11263 - trunk/openlayers/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Tue Feb 22 17:00:59 EST 2011
Author: tschaub
Date: 2011-02-22 14:00:59 -0800 (Tue, 22 Feb 2011)
New Revision: 11263
Added:
trunk/openlayers/examples/geolocation.js
Modified:
trunk/openlayers/examples/geolocation.html
Log:
Linking to example source code. Setting watch checkbox to match initial control state.
Modified: trunk/openlayers/examples/geolocation.html
===================================================================
--- trunk/openlayers/examples/geolocation.html 2011-02-22 21:25:35 UTC (rev 11262)
+++ trunk/openlayers/examples/geolocation.html 2011-02-22 22:00:59 UTC (rev 11263)
@@ -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
- }
-
- 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();
- }
- };
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+ <link rel="stylesheet" href="style.css" type="text/css">
+ <style>
+ .olControlAttribution {
+ bottom: 3px;
}
- </script>
+ </style>
</head>
<body onload="init()">
<h1 id="title">Geolocation Example</h1>
@@ -97,13 +25,16 @@
</p>
<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">
- <button id="locate">Locate me!</button>
- <label>
- <input type="checkbox" name="track" id="track" />
- Track my position
- </label>
+ <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>
Added: trunk/openlayers/examples/geolocation.js
===================================================================
--- trunk/openlayers/examples/geolocation.js (rev 0)
+++ trunk/openlayers/examples/geolocation.js 2011-02-22 22:00:59 UTC (rev 11263)
@@ -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;
\ No newline at end of file
More information about the Commits
mailing list