Created
December 3, 2010 22:06
-
-
Save wadey/727635 to your computer and use it in GitHub Desktop.
SimpleGeo Advanced getLocation Example
This file contains 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> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> | |
| <script src="http://cdn.simplegeo.com/js/1.2/simplegeo.context.jq.min.js"></script> | |
| <script type="text/javascript" src="http://github.com/simplegeo/polymaps/raw/v2.4.0/polymaps.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var client = new simplegeo.ContextClient('9QwstD6wHTZwPauttPwuksJqaCMGuhKe'); | |
| $(document).ready(function() { | |
| client.getLocationFromIP(function(err, position) { | |
| centerMap(err, position); | |
| $("#status").text("IP Location received. Asking for HTML5 location..."); | |
| client.watchLocationFromBrowser({enableHighAccuracy: true}, centerMap); | |
| }); | |
| var po = org.polymaps; | |
| var point; | |
| var map = po.map() | |
| .container($("#map")[0].appendChild(po.svg("svg"))) | |
| .add(po.interact()) | |
| .add(po.hash()) | |
| .zoom(1); | |
| map.add(po.image() | |
| .url(po.url("http://{S}tile.cloudmade.com" | |
| + "/1a1b06b230af4efdbb989ea99e9841af" | |
| + "/998/256/{Z}/{X}/{Y}.png") | |
| .hosts(["a.", "b.", "c.", ""]))); | |
| function centerMap(err, position) { | |
| if (err) { | |
| $("#status").text("Unable to load location info: " + err); | |
| // console.error(err) | |
| } else { | |
| var coords = position.coords; | |
| // console.log("Refocusing to:", position); | |
| map.center({lat: coords.latitude, lon: coords.longitude}); | |
| if (position.source === 'simplegeo') { | |
| map.zoom(12); | |
| } else { | |
| $("#status").remove(); | |
| map.zoom(15); | |
| if (!point) { | |
| point = po.geoJson() | |
| .features([]); | |
| map.add(point); | |
| } | |
| point.features([{geometry: {coordinates: [coords.longitude, coords.latitude], type: "Point"}}]); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <div id="status">Getting initial location...</div> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This example is misbehaving in Firefox because the default body and html styles mean that the map isn't 100% of the available size. You'll need a little bit of css or some style attributes to fix it.