Created
May 7, 2014 15:39
-
-
Save pgiraud/585599a6305dfe3bb834 to your computer and use it in GitHub Desktop.
OpenLayers - Geolocation Example - HighAccuracy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var style = { | |
| fillColor: '#000', | |
| fillOpacity: 0.1, | |
| strokeWidth: 0 | |
| }; | |
| 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 pulsate = function(feature) { | |
| var point = feature.geometry.getCentroid(), | |
| bounds = feature.geometry.getBounds(), | |
| radius = Math.abs((bounds.right - bounds.left)/2), | |
| count = 0, | |
| grow = 'up'; | |
| var resize = function(){ | |
| if (count>16) { | |
| clearInterval(window.resizeInterval); | |
| } | |
| var interval = radius * 0.03; | |
| var ratio = interval/radius; | |
| switch(count) { | |
| case 4: | |
| case 12: | |
| grow = 'down'; break; | |
| case 8: | |
| grow = 'up'; break; | |
| } | |
| if (grow!=='up') { | |
| ratio = - Math.abs(ratio); | |
| } | |
| feature.geometry.resize(1+ratio, point); | |
| vector.drawFeature(feature); | |
| count++; | |
| }; | |
| window.resizeInterval = window.setInterval(resize, 50, point, radius); | |
| }; | |
| var geolocate = new OpenLayers.Control.Geolocate({ | |
| bind: false, | |
| geolocationOptions: { | |
| enableHighAccuracy: true, | |
| maximumAge: 0, | |
| timeout: 7000 | |
| } | |
| }); | |
| map.addControl(geolocate); | |
| var firstGeolocation = true; | |
| geolocate.events.register("locationupdated",geolocate,function(e) { | |
| vector.removeAllFeatures(); | |
| var circle = new OpenLayers.Feature.Vector( | |
| OpenLayers.Geometry.Polygon.createRegularPolygon( | |
| new OpenLayers.Geometry.Point(e.point.x, e.point.y), | |
| e.position.coords.accuracy/2, | |
| 40, | |
| 0 | |
| ), | |
| {}, | |
| style | |
| ); | |
| vector.addFeatures([ | |
| new OpenLayers.Feature.Vector( | |
| e.point, | |
| {}, | |
| { | |
| graphicName: 'cross', | |
| strokeColor: '#f00', | |
| strokeWidth: 2, | |
| fillOpacity: 0, | |
| pointRadius: 10 | |
| } | |
| ), | |
| circle | |
| ]); | |
| if (firstGeolocation) { | |
| map.zoomToExtent(vector.getDataExtent()); | |
| pulsate(circle); | |
| firstGeolocation = false; | |
| this.bind = true; | |
| } | |
| }); | |
| geolocate.events.register("locationfailed",this,function() { | |
| OpenLayers.Console.log('Location detection failed'); | |
| }); | |
| document.getElementById('locate').onclick = function() { | |
| vector.removeAllFeatures(); | |
| geolocate.deactivate(); | |
| document.getElementById('track').checked = false; | |
| geolocate.watch = false; | |
| firstGeolocation = true; | |
| geolocate.activate(); | |
| }; | |
| document.getElementById('track').onclick = function() { | |
| vector.removeAllFeatures(); | |
| geolocate.deactivate(); | |
| if (this.checked) { | |
| geolocate.watch = true; | |
| firstGeolocation = true; | |
| geolocate.activate(); | |
| } | |
| }; | |
| document.getElementById('track').checked = false; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <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="http://openlayers.org/dev/theme/default/style.css" type="text/css"> | |
| <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css"> | |
| <style> | |
| .olControlAttribution { | |
| bottom: 3px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 id="title">Geolocation Example</h1> | |
| <div id="tags"> | |
| geolocation, geolocate, mobile | |
| </div> | |
| <p id="shortdesc"> | |
| Track current position and display it with its accuracy. | |
| </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"> | |
| <p> | |
| View the <a href="geolocation.js" target="_blank">geolocation.js source</a> | |
| to see how this is done. | |
| </p> | |
| </div> | |
| <script src="http://openlayers.org/dev/OpenLayers.js"></script> | |
| <script src="geolocation.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment