Amir Amir - 7 months ago 86
Javascript Question

Cannot place marker at the right coordinates using openlayers 3

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.

Answer

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')
Comments