Last active
December 6, 2020 12:58
-
-
Save schatteleyn/4554882 to your computer and use it in GitHub Desktop.
Little tests with OpenStreetMap and Geolocation API
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> | |
| <title>OpenLayers Test</title> | |
| <style type="text/css"> | |
| html, body, #basicMap { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| </style> | |
| <script src="osm_test.js"></script> | |
| <script src="http://www.openlayers.org/api/OpenLayers.js"></script> | |
| </head> | |
| <body onload="init();"> | |
| <div id="basicMap"></div> | |
| </body> | |
| </html> |
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 Locations = [ | |
| { | |
| id: 1, | |
| name: "Église Notre-Dame de Bon-Port", | |
| lat: 47.21017384214512, | |
| lon: -1.568786203060425, | |
| }, | |
| { | |
| id: 2, | |
| name: "Le Ferry", | |
| lat: 47.2093359999997, | |
| lon: -1.5670105999999997, | |
| }, | |
| { | |
| id: 3, | |
| name: "Le Progrès", | |
| lat: 47.20682924409052, | |
| lon: -1.563695311546096, | |
| } | |
| ]; | |
| function init() { | |
| this.convert = function(lat1, lon1, lat2, lon2){ | |
| var R = 6378.137; // Radius of earth in KM | |
| var dLat = (lat2 - lat1) * Math.PI / 180; | |
| var dLon = (lon2 - lon1) * Math.PI / 180; | |
| var a = Math.sin(dLat/2) * Math.sin(dLat/2) + | |
| Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * | |
| Math.sin(dLon/2) * Math.sin(dLon/2); | |
| var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); | |
| var d = R * c; | |
| return d * 1000; // meters | |
| }; | |
| this.addMarker = function(position) { | |
| var markers = new OpenLayers.Layer.Markers("Markers"); | |
| map.addLayer(markers); | |
| markers.addMarker(new OpenLayers.Marker(position)); | |
| }; | |
| this.findLocations = function(latitude, longitude, fromProjection, toProjection) { | |
| for (i in Locations) { | |
| long = Locations[i].lon; | |
| lat = Locations[i].lat; | |
| if (convert(latitude,longitude,lat,long) <= 300) { | |
| var positionLocation = new OpenLayers.LonLat(long,lat).transform(fromProjection, toProjection); | |
| addMarker(positionLocation); | |
| } else {continue;} | |
| } | |
| }; | |
| this.getPosition = function(position){ | |
| var latitude = position.coords.latitude; | |
| var longitude = position.coords.longitude; | |
| var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 | |
| var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection | |
| var position = new OpenLayers.LonLat(longitude,latitude).transform(fromProjection, toProjection); | |
| var zoom = 18; //maximum value | |
| addMarker(position); | |
| map.setCenter(position, zoom); | |
| findLocations(latitude, longitude, fromProjection, toProjection); | |
| }; | |
| this.map = new OpenLayers.Map("basicMap"); | |
| map.addLayer(new OpenLayers.Layer.OSM()); | |
| map.zoomToMaxExtent(); | |
| if(navigator.geolocation){ | |
| navigator.geolocation.getCurrentPosition(getPosition); | |
| } | |
| } |
@JormaHytonen Poor you.
@JormaHytonen so weird that a piece of code that has more than 6 years doesn't work anymore. I wonder how that could be ...
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
That's nice but does NOT work! Can't anyone in this world build an example of pointing to OpenLayer Marker coordinates rather than centering the screen? Apparently not, so I have to do it: by trying and making a mistake!