OpenLayers3 click coordinate example
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.0/ol.min.js"></script>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div> <!-- Map Container -->
</body>
JavaScript
var map = new ol.Map({ // Creates an OpenLayers Map object
target: 'map', // Attach the map object to the <div> having id='map0
// The layers: [ ... ] array is used to define the list of layers available in the map. The first and only layer right now is a tiled layer:
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
// The view allow to specify the center, resolution, and rotation of the map:
view: new ol.View({
// The simplest way to define a view is to define a center point and a zoom level. Note that zoom level 0 is zoomed out:
center: ol.proj.fromLonLat([12.5, 41.9]),
zoom: 10
})
});
map.on('click', function(evt) {
console.log("POINT CLICKED");
var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
alert("COORDINATE: " + prettyCoord);
});