mapsopenlayersangular-openlayersopenlayers-6web-feature-service

Openlayers markers offset (not at the right place)


I am using a Web Features Service (WFS) and I want to display a marker on a OpenLayers map. Extract of WFS's response :

<?xml version="1.0" encoding="ISO-8859-1"?>
<wfs:FeatureCollection>
    <gml:boundedBy>
        <gml:Envelope srsName="EPSG:900913">
            <gml:lowerCorner>-89132.899298 5581504.864113</gml:lowerCorner>
            <gml:upperCorner>-51735.101149 5625545.655457</gml:upperCorner>
        </gml:Envelope>
    </gml:boundedBy>
    <gml:featureMember>
        <bm:TB_ARRET_P gml:id="TB_ARRET_P.3473">
            <gml:boundedBy>
                <gml:Envelope srsName="EPSG:900913">
                    <gml:lowerCorner>-75379.857910 5601410.987374</gml:lowerCorner>
                    <gml:upperCorner>-75379.857910 5601410.987374</gml:upperCorner>
                </gml:Envelope>
            </gml:boundedBy>
            <bm:geometry>
                <gml:Point srsName="EPSG:900913">
                    <gml:pos>-75379.857910 5601410.987374</gml:pos>
                </gml:Point>
            </bm:geometry>
            <bm:LIGNEDES>Citéis 72/Lianes 3</bm:LIGNEDES>
            <bm:MOBILIE1>Poteau</bm:MOBILIE1>
            <bm:NOMARRET>Mairie du Haillan</bm:NOMARRET>
            <bm:VILLE>LE HAILLAN</bm:VILLE>
        </bm:TB_ARRET_P>
        <bm:TB_ARRET_P>
            ...
        </bm:TB_ARRET_P>
    </gml:featureMember>
</wfs:FeatureCollection>

I use OpenLayers to display a marker with the code below :

const f = new Feature({geometry: new Point([-75379.857910, 5601410.987374])});

const orangePoint = new Style({
    image: new CircleStyle({
        radius: 5,
        fill: new Fill({color: 'red'}),
        stroke: new Stroke({color: 'red', width: 3})
    })
});

f.setStyle(orangePoint);

const map = new Map({
    layers: [
        new TileLayer({ source: new XYZ({ url: this.mapboxTile }) }),
        new VectorLayer({
          source: new VectorSource({
            features: [f]
          })
        })
      ],
      target: this.idMaps$,
      view: new View({
        projection: 'EPSG:3857', // OpenLayers' default project and alias of 900913
        center: [-64436.414844, 5595687.311159],
        zoom: 12
      })
    });

So, here is the result :

So, the marker is displayed but it is not well located. What am I missing ? How to center the marker upon the bus station 'Mairie' ?

Thank you for your answers !


Solution

  • If I center OpenStreetMap on -75379.857910, 5601410.987374 it shows Mairie at the same location as your marker, so either both OpenStreetMap and your WFS data are wrong or your basemap shows Mairie in the wrong place.

    Google Streetview confirms the stop in the same location https://www.google.com/maps/@44.8721247,-0.6771454,3a,25.7y,245.69h,82.65t/data=!3m6!1e1!3m4!1sPPVzzjGN24V3Z9FXMZTmrA!2e0!7i16384!8i8192?hl=en-GB so your marker is correct and the basemap is wrong.

    enter image description here