Permalink
Browse files

migrate gelocation-demo.js to osm w leaflet

  • Loading branch information...
1 parent 9e0c1ce commit d974ecac980721e0eee2dfb23d7a1ab2b28c91b4 @l-hedgehog committed Jan 3, 2013
Showing with 73 additions and 34 deletions.
  1. +5 −1 apps/firefox/templates/firefox/geolocation.html
  2. +68 −33 media/js/geolocation-demo.js
@@ -9,6 +9,10 @@
{% block site_css %}
{{ css('firefox_geolocation') }}
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
+<!--[if lte IE 8]>
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
+<![endif]-->
{% endblock %}
{% block site_js %}
@@ -128,6 +132,6 @@ <h4 class="expander-header">How do I turn off Location-Aware Browsing permanentl
</div> <!-- end #main -->
-<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key={{ gmap_api_key }}"></script>
+<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
{% endblock %}
@@ -3,41 +3,71 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
var map = null;
-var overlay = null;
+var circle = null;
var geodemo = {
initialize: function() {
- map = new GMap2(document.getElementById("map_canvas"));
- map.setCenter(new GLatLng(37.41, -122.08), 1);
- map.addControl(new GSmallMapControl());
- map.addControl(new GMapTypeControl());
- },
+ if (!map) {
+ map = L.map('map_canvas');
+ var attribution = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+ var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: attribution,
+ }).addTo(map); // same as openlayers default
- getCircleOverlay: function(lat, lon, err) {
- // math lifted from maps.forum.nu. you want map examples, go there.
- with (Math) {
- var points = Array();
- var d = err/6378800;// accuracy / meters of Earth radius = radians
- var lat1 = (PI/180)* lat; // radians
- var lng1 = (PI/180)* lon; // radians
-
- for (var a = 0 ; a < 361 ; a+=10 ) {
- var tc = (PI/180)*a;
- var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc));
- var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y));
- var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function
- var point = new GLatLng(parseFloat(y*(180/PI)),parseFloat(x*(180/PI)));
- points.push(point);
+ if (location.search) {
+ // other tile servers from http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
+ var ocm = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
+ maxZoom: 16,
+ attribution: [
+ attribution,
+ 'Imagery &copy; <a href="http://www.thunderforest.com/opencyclemap/">OpenCycleMap</a>'
+ ].join(', '),
+ }),
+ oct = L.tileLayer('http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', {
+ maxZoom: 16,
+ attribution: [
+ attribution,
+ 'Imagery &copy; <a href="http://www.thunderforest.com/transport/">OpenCycleMap</a>'
+ ].join(', '),
+ }),
+ ocl = L.tileLayer('http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', {
+ maxZoom: 16,
+ attribution: [
+ attribution,
+ 'Imagery &copy; <a href="http://www.thunderforest.com/landscape/">OpenCycleMap</a>'
+ ].join(', '),
+ }),
+ cmm = L.tileLayer('http://{s}.tile.cloudmade.com/b465ca1b6fe040dba7eec0291ecb7a8c/997/256/{z}/{x}/{y}.png', {
+ attribution: [
+ attribution,
+ 'Imagery &copy; <a href="http://cloudmade.com">CloudMade</a>'
+ ].join(', '),
+ }), // used to be Leaflet default, api key from remo, just for local test
+ mqm = L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
+ subdomains: '1234',
+ attribution: [
+ attribution,
+ 'Imagery &copy; <a href="http://www.mapquest.com/">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'
+ ].join(', '),
+ }),
+ mbs = L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-vyofok3q/{z}/{x}/{y}.png', {
+ attribution: [
+ attribution,
+ 'Imagery &copy; <a href="http://mapbox.com/tos/">MapBox</a>'
+ ].join(', '),
+ }); // registration for free, 3000/month
+ L.control.layers({
+ 'OpenStreetMap': osm,
+ 'OpenCycleMap': ocm,
+ 'OpenCycleMap Transport': oct,
+ 'OpenCycleMap Landscape': ocl,
+ 'CloudMade': cmm,
+ 'MapQuest': mqm,
+ 'MapBox Streets': mbs,
+ }, {}).addTo(map);
}
}
- return new GPolygon(points,'#0000ff',1,1,'#0000ff',0.2)
- },
-
- zoomLevel: function(a, step) {
- step++;
- map.setCenter(new GLatLng(a.coords.latitude, a.coords.longitude), step);
- if (step > 14) return;
- window.setTimeout(function() { geodemo.zoomLevel(a, step) }, 250);
+ map.setView([37.41, -122.08], 1);
},
aaa: function(a) {
@@ -47,12 +77,17 @@ var geodemo = {
if (a.coords.accuracy > 500)
zoomLevel = 10;
- map.setCenter(new GLatLng(a.coords.latitude, a.coords.longitude), zoomLevel);
+ map.setView([a.coords.latitude, a.coords.longitude], zoomLevel);
- if (overlay) map.removerOverlay(overlay);
+ if (circle) map.removeLayer(circle);
- overlay = geodemo.getCircleOverlay(a.coords.latitude, a.coords.longitude, a.coords.accuracy);
- map.addOverlay(overlay);
+ circle = L.circle([a.coords.latitude, a.coords.longitude], a.coords.accuracy, {
+ color: '#00f',
+ weight: 1,
+ opacity: 1,
+ fillColor: '#00f',
+ fillOpacity: 0.2
+ }).addTo(map);
},
handleError: function(a) {

0 comments on commit d974eca

Please sign in to comment.