JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="mire"></div>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function getGps(){
var gps = map.getCenter()
.transform(
new OpenLayers
.Projection('EPSG:900913'),
new OpenLayers
.Projection('EPSG:4326')
);
$.getJSON(
'http://open.mapquestapi.com/elevation/v1/profile?latLngCollection=' + gps.lat + ',' + gps.lon,
function(data) {
gps = {
lon:gps.lon,
lat:gps.lat,
alt:data.elevationProfile[0].height
}
console.log(gps);
$('#boutonGPS').attr('value', gps.lon+', '+gps.lat+' = '+gps.alt+'m');
});
markers.destroy();
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(gps));
return gps;
}
</script>
<a href="http://leafletjs.com/examples/custom-icons.html">How to Change Marker Icon</a>
<input id="boutonGPS" type="button" onclick="getGps();" value="get LonLat"></input>
</body>
CSS
#mapdiv { width:350px; height:350px; border:1px solid grey;opacity:.8;}
#mire {
margin-top:-197px;
margin-left:157px;
width:35px;
height:35px;
border:1px solid grey;
}
div.olControlAttribution { bottom:3px; }
JavaScript
map = new OpenLayers.Map("mapdiv");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
lonlat = new OpenLayers
.LonLat(0.30798, 44.45347)
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
);
var zoom = 12;
markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonlat));
map.setCenter(lonlat, zoom);