I am working on openlayers 3 and want to implement a search functionality, which gets a name of the place and positions a marker on the map. I am able to get the coordinates but when I want to add it's marker on the map, I am always getting different locations for it. The marker of the input place is not being placed on actual coordinates of the map.

Here is the code on which I have been working:

function addmarker(lat, long, pointerimgsrc){

    var iconFeature = new ol.Feature({      
        geometry: new ol.geom.Point(ol.proj.transform([lat, long], 'EPSG:4326', 'EPSG:3857')),
        name: 'NULL'
        });


    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        //src: 'data/icon.png'
        src: pointerimgsrc
        }))
    });

    iconFeature.setStyle(iconStyle);

    vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });

    map.addLayer(vectorLayer);

}// END addmarkerr()

I hope I have clearly explained my problem, looking forward for a solution. Thank you very much in advance for your time and support.

I am working on openlayers 3 and want to implement a search functionality, which gets a name of the place and positions a marker on the map. I am able to get the coordinates but when I want to add it's marker on the map, I am always getting different locations for it. The marker of the input place is not being placed on actual coordinates of the map.

Here is the code on which I have been working:

function addmarker(lat, long, pointerimgsrc){

    var iconFeature = new ol.Feature({      
        geometry: new ol.geom.Point(ol.proj.transform([lat, long], 'EPSG:4326', 'EPSG:3857')),
        name: 'NULL'
        });


    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        //src: 'data/icon.png'
        src: pointerimgsrc
        }))
    });

    iconFeature.setStyle(iconStyle);

    vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

    vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });

    map.addLayer(vectorLayer);

}// END addmarkerr()

I hope I have clearly explained my problem, looking forward for a solution. Thank you very much in advance for your time and support.

• javascript
• openstreetmap
• openlayers-3

1 Answer 1

The EPSG:4326 coordinate order lon, lat not lat, lon. So you should change the line that does the EPSG:4326 to EPSG:3857 transformation.

ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')