Wrapping Geojson data across date line in Openlayers

Question

I am using OpenLayers to map earthquakes using the USGS dataset available at:

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson

I am adding layers and configuring the view like so:

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new ImageLayer({
      opacity: 0.3,
      source: raster
    }),
    new WebGLPointsLayer({
      source: new VectorSource({
        url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
        format: new GeoJSON(),
        attributions: 'USGS'
      })
    })
  ],
  view: new View({
    center: fromLonLat([103.8198, 1.3521]),
    zoom: 1
  })
});

My view is set so that at zoom level 1, the date line is included in the extent. The USGS data does not render to the right of the date line. I understand that this is because the VectorSource's default extent is [-180, -90, 180, 90]. My question is, how can I change that extent to the extent of the map view so that data renders on the other side of the the date line?

It seems like the best approach would be to intercept the coordinates of the USGS data and add a transformation to the lon coordinate, maybe through ol/proj.transform or ol/proj.transformExtent, but I haven't been able to find the openlayers data object that contains the coordinates nor the way to apply a map or transformation to them.

Mike Mike · Accepted Answer · 2020-03-21T22:28:23

Vectors layers use the view projection which unless specified is EPSG:3857 centered on the Greenwich meridian

You could try defining a spherical mercator centered on the dateline

proj4.defs('sphmerc180', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=180.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs');
register(proj4);

var sphmerc180 = getProjection('sphmerc180');
sphmerc180.setExtent(getProjection('EPSG:3857').getExtent());
sphmerc180.setGlobal(true);

then use that as the view projection

  view: new View({
    projection: sphmerc180,
    center: fromLonLat([103.8198, 1.3521], sphmerc180),
    zoom: 1
  })

Wrapping Geojson data across date line in Openlayers

1 Answers