OpenLayers projected to different location Vs Bing Maps

Question

I am using OpenLayers with bing map. I have added a marker but it is displaying on different location. Same coordinates I have used in bing maps and it shows on correct location.

Here bing search result

This is the OpneLayers result

    $(function () {

        var tileLayer = new ol.layer.Tile({
            source: new ol.source.BingMaps({
                key: 'Armnl..',
                imagerySet: 'Aerial'
            })
        });

        var map = new ol.Map({
            layers: [tileLayer],
            target: 'map',
            view: new ol.View({
                center: [-22.3869608, -49.7602708],
                zoom: 5,
            })
        });

        var p1 = new ol.Feature({
            geometry: new ol.geom.Point([-22.3869608, -49.7602708])
        });


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

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

        map.addLayer(vectorLayer);

    });

Would I need to transform the coordinates?

Answer 1

Yes indeed, you need to tranform your coords to EPSG:3857.

You have 2 different options

1) you build your map using epsg:4326. That means client tile reprojection shall take place.

To do so

var map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    view: new ol.View({
        projection:'EPSG:4326',
        center: [-22.3869608, -49.7602708],
        zoom: 5,
    })
});

2) You tranfrom your center to 'EPSG:3857'. This projection shall be used as you do not specify it within the ol.view config. (projection automatic getted from the first tile layer attached to the map).

To do so

var map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([-22.3869608, -49.7602708], 'EPSG:4326','EPSG:3857');
        zoom: 5,
    })
});

end for your vector point

var p1 = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([-22.3869608, -49.7602708], 'EPSG:4326','EPSG:3857'))
        });