0

I am new to OL and I'm trying what I thought was a pretty simple thing. I would like to see a second layer that shows lat/lon points. Is the code below the correct way to achieve it, or am I missing something obvious?

const projection = getProjection('EPSG:4326');
const view = new View({ projection });
const mySource = new VectorSource({ wrapX: false });
const myLayer = new VectorLayer({ source: mySource, visible: true });      
this.map = new Map({target: 'myMap', layers: [
   this.getMyTileLayer(), // Shows up fine
   myLayer // AFAIK I don't see anything plotted
], view});

// Called externally
addToMap(lat,lon) {
  // I can console.log here and I have verified the lat/lons coming in are correct
  const feature = new Feature(new Point(fromLonLat([lon,lat])));
  this.mySource.addFeature(feature);
}

Update: If I add the following code to my addToMap function, I now see my marker, but the original TileLayer has disappeared. I'm assuming these issues are somehow related?

this.map.getView().animate({ center: fromLonLat([lon, lat]), zoom: 10});
  • Feature geometry should be in the view projection, which is EPSG:4326, so there's no need for the fromLonLat() – Mike Feb 22 at 18:29
  • I'm not sure I understand you. How else would I pass in lat/lon coords? What part(s) of the code needs to change? – ekjcfn3902039 Feb 22 at 18:36
3

Yes, they are related

Your view projection is EPSG:4326

const projection = getProjection('EPSG:4326');
const view = new View({ projection });

You are converting your feature coordinates from EPSG:4326 [lon,lat] which is correct for the view to EPSG:3857

const feature = new Feature(new Point(fromLonLat([lon,lat])));

and you are centering the EPSG:4326 view with EPSG:3857 coordinates

this.map.getView().animate({ center: fromLonLat([lon, lat]), zoom: 10});

You should either change your view to EPSG:3857 or leave your coordinates as [lon, lat]

  • I think that's better but I still have the same issues. If I center it. the tile layer is missing (404s, maybe due to WMTSTileGrid code not shown) If I do not center it, I do not see the new layer – ekjcfn3902039 Feb 22 at 19:02
  • The view won't display anything unless it has a center and zoom or resolution, but for an EPSG:4326 projection it should be this.map.getView().animate({ center: [lon, lat], zoom: 10}); – Mike Feb 22 at 19:09
  • Yeah, I changed it to that before posting, but no luck :( – ekjcfn3902039 Feb 22 at 19:10
  • FWIW I don't want to center on it other than for testing. I just used centering to ensure I could see the lat/lon. Ideally I want to see the lat/lon appear on the map without repositioning the users view (they are zoomed in appropriately to be able to see it) – ekjcfn3902039 Feb 22 at 19:11
  • I'm basically trying to replicate this: openlayers.org/en/latest/examples/feature-animation.html – ekjcfn3902039 Feb 22 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.