OpenLayers 3 Map with Marker

13 Mar

OpenLayers 3 Map

<!doctype html>
<html lang="en">
    <link rel="stylesheet" href="" type="text/css">
      .map {
        height: 400px;
        width: 100%;
    <script src="//"></script>
    <script src="" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    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.addOverlay(new ol.Overlay({
        position: ol.proj.transform(
                [80.6350, 7.2964],
        element: $('<img src="//">')

    map.on('singleclick', function(evt) {
        var coord = evt.coordinate;
        var transformed_coordinate = ol.proj.transform(coord, "EPSG:900913", "EPSG:4326");


1 Comment

Posted by on March 13, 2015 in Geo Programming



One response to “OpenLayers 3 Map with Marker

  1. João Oliveira

    May 26, 2016 at 10:50 pm

    How to add event click to the marker?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: