OpenLayers 3

by Lukasz Kryger

HTML

<script src="//openlayers.org/en/v3.7.0/build/ol.js"></script>
<link rel="stylesheet" href="//openlayers.org/en/v3.7.0/css/ol.css">
<div id="map" class="map"></div>

CSS

.map{
    height: 500px;
}

JavaScript

(function(){
 
    function VectorController(){
        //empty vector
        var vectorSource = new ol.source.Vector({ });
        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            opacity: 0.75,
            src: '//cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/location-alt-32.png'
          }))
        });
        // {lng,lat,point}
        function addnew(obj){
            if(!obj.point){
                obj.point = new  
            ol.geom.Point(ol.proj.transform([obj.lng,obj.lat], 'EPSG:4326',   'EPSG:3857'));   
            }
            var ft = new ol.Feature({
                geometry: obj.point,
                name: ''
            });
            vectorSource.addFeature(ft);
        }
        
        return {
            layer: new ol.layer.Vector({
                 source: vectorSource,
                 style: iconStyle
            }),
            addVector: addnew
        };
    }
    
    var vectController = new VectorController();
 
     var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([-34.856898,-7.1194165], 'EPSG:4326', 'EPSG:3857'),
          zoom: 17
        })
      });
    
      map.addLayer(vectController.layer);
      vectController.addVector({lng: -34.856898,lat: -7.1194165});
}());