Skip to content

Instantly share code, notes, and snippets.

@schatteleyn schatteleyn/osm_test.html
Last active Nov 20, 2019

Embed
What would you like to do?
Little tests with OpenStreetMap and Geolocation API
<!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>
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

This comment has been minimized.

Copy link

JormaHytonen commented Sep 20, 2019

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!

@jsdevtom

This comment has been minimized.

Copy link

jsdevtom commented Oct 9, 2019

@JormaHytonen Poor you.

@schatteleyn

This comment has been minimized.

Copy link
Owner Author

schatteleyn commented Nov 18, 2019

@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
You can’t perform that action at this time.