Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

migrate geolocation-demo.js to osm w openlayers #353

Closed
wants to merge 1 commit into from

3 participants

@l-hedgehog

Hi,

Sorry for not actively working on this and bug 767767

This is a first attempt to replace Google Maps API with OpenStreetMap (via OpenLayers API). Leaflet mentioned in Deploying your own Slippy Map seems to be a simpler API but requires another key from CloudMade.

I kind of have the impression that OpenLayers users should host their own copy of API files in the production environment. But for now I just link to http://openlayers.org/api/OpenLayers.js directly.

@Rik
Rik commented

Sorry for not reviewing earlier. Don't apologize for not working on this :) You've been more than helpful on this!

This looks fine to me for the code.
The maps look awful though :(

I'll bring the licensing issue in the bug. Do not merge in the mean time.

@sgarrity
Collaborator

I see more activity in Bug 767767 - is this pull request out-of-date? Can you either close or update?

@l-hedgehog

Hi @sgarrity , I'll close this one and open a new pull request with leaflet changes I talked about in 767767c6 soon.

@l-hedgehog l-hedgehog closed this
@l-hedgehog l-hedgehog deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 11, 2012
  1. @l-hedgehog
This page is out of date. Refresh to see the latest.
View
2  apps/firefox/templates/firefox/geolocation.html
@@ -124,6 +124,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://openlayers.org/api/OpenLayers.js"></script>
{% endblock %}
View
68 media/js/geolocation-demo.js
@@ -1,54 +1,54 @@
var map = null;
-var overlay = null;
+var vector = 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());
- },
-
- 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 (!map) {
+ map = new OpenLayers.Map("map_canvas");
+ var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
+ vector = new OpenLayers.Layer.Vector("vector");
+ map.addLayers([layer, vector]);
}
- 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.setCenter(new OpenLayers.LonLat(-122.08, 37.41).transform(
+ new OpenLayers.Projection("EPSG:4326"),
+ map.getProjectionObject()
+ ), 1);
},
aaa: function(a) {
+ var center = new OpenLayers.LonLat(a.coords.longitude, a.coords.latitude).transform(
+ new OpenLayers.Projection("EPSG:4326"),
+ map.getProjectionObject()
+ );
+
$('#locateButton').siblings('img').hide();
var zoomLevel = 14;
if (a.coords.accuracy > 500)
zoomLevel = 10;
- map.setCenter(new GLatLng(a.coords.latitude, a.coords.longitude), zoomLevel);
+ map.setCenter(center, zoomLevel);
- if (overlay) map.removerOverlay(overlay);
+ vector.removeAllFeatures();
- overlay = geodemo.getCircleOverlay(a.coords.latitude, a.coords.longitude, a.coords.accuracy);
- map.addOverlay(overlay);
+ var circle = new OpenLayers.Feature.Vector(
+ OpenLayers.Geometry.Polygon.createRegularPolygon(
+ (new OpenLayers.Geometry.Point(center.lon, center.lat)),
+ a.coords.accuracy,
+ 40,
+ 0
+ ),
+ {},
+ {
+ fillColor: '#0000ff',
+ fillOpacity: 0.2,
+ strokeColor: '#0000ff',
+ strokeOpacity: 1,
+ strokeWidth: 1
+ }
+ );
+ vector.addFeatures([circle]);
},
handleError: function(a) {
Something went wrong with that request. Please try again.