Display GeoJSON with leaflet that spans the 180th meridian

Question

I am trying to display a geoJSON object (outline of Russia, in this case) that spans the 180th meridian. Currently this displays with part of the country on the left side of the

Answer 1

I ran into this same issue and my solution involved taking advantage of a couple of things: 1) Leaflet allows you to place elements beyond the 180/-180 longitudes. 2) Geographic bodies that cross the antimeridian contain mostly all negative or positive longitude coordinates.

My solution was to use a recursive function to traverse the coordinates array within the geoJSON object and, in the case of Russia, convert the negative coordinate values to equivalent positive values. For example, a value of -175 would be converted to 185.

Below is the function I used to process the coordinates array. I used it for locations in the Eastern hemisphere - you'd have to modify the conversion in order to work with locations in the Western hemisphere.

  antimeridian(elem: any) {
   if (Array.isArray(elem)) {
     for (var i = 0; i < elem.length; i++) {
       if (Array.isArray(elem[i][0])) {
         this.antimeridian(elem[i]);
       } else {
         if (elem[i][0] < 0) {
           elem[i][0] = 180 + (180 + elem[i][0]);
         }
       }
     }
   }
 };