[sourcecode language="html"]
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://openlayers.org/en/v3.2.1/build/ol.js" type="text/javascript"></script>
<title>OpenLayers 3 example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
//projection: 'EPSG:900913',
center: ol.proj.transform([80.6350, 7.2964], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
})
});
//Full Screen
var myFullScreenControl = new ol.control.FullScreen();
map.addControl(myFullScreenControl);
map.addOverlay(new ol.Overlay({
position: ol.proj.transform(
[80.6350, 7.2964],
'EPSG:4326',
'EPSG:3857'
),
element: $('<img src="//map.geo.admin.ch/1403704943/img/marker.png">')
}));
map.on('singleclick', function(evt) {
var coord = evt.coordinate;
var transformed_coordinate = ol.proj.transform(coord, "EPSG:900913", "EPSG:4326");
console.log(transformed_coordinate);
});
</script>
</body>
</html>
[/sourcecode]
How to add event click to the marker?
ReplyDelete