I have GeoJSON files containing a FeatureCollection using EPSG:27700 and for Maplibre I believe the coordinates need to be specified in EPSG:4326).

What is the best way of either getting Maplibre to handle a GeoJSON layer with EPSG:27700 coordinates or mapping the coordinates from EPSG:27700 to EPSG:4326 ?

I have GeoJSON files containing a FeatureCollection using EPSG:27700 and for Maplibre I believe the coordinates need to be specified in EPSG:4326).

What is the best way of either getting Maplibre to handle a GeoJSON layer with EPSG:27700 coordinates or mapping the coordinates from EPSG:27700 to EPSG:4326 ?

• javascript
• geojson
• maplibre-gl
• epsg

1 Answer 1

Solution seems to be using proj4js to do the job. Created this routine to remap

import proj4 from 'proj4';
import type { Geometry, Position } from 'geojson';


proj4.defs(
    'EPSG:27700',
    '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs'
);

// Transform coordinates.
export const transformCoords = function (arr: [number, number]): { lng: number; lat: number } {
    const projArray = proj4('EPSG:27700', 'EPSG:4326', arr);
    return { lng: projArray[0], lat: projArray[1] };
};

// Transform GeoJSON Geometry from one Coordinate Reference System (CRS) to another

export const transformGeometry = (original: Geometry, from = 'EPSG:27700', to = 'EPSG:4326'): Geometry => {
    const mapCoords = ( p: Position) => proj4( from, to, p);

    const gType = original.type;
    let geo: Geometry;
    switch (gType) {
        case 'Point':
            // coords are single array
            geo = {
                type: 'Point',
                coordinates: mapCoords(original.coordinates)
            };
            break;
        case 'MultiPoint':
        case 'LineString':
            geo = {
                type: gType,
                coordinates: original.coordinates.map((p: Position) => mapCoords(p)
                )
            };
            break;
        case 'Polygon':
        case 'MultiLineString':
            geo = {
                type: gType,
                coordinates: original.coordinates.map((item) =>
                    item.map((p: Position) => mapCoords(p))
                )
            };
            break;
        case 'MultiPolygon':
            geo = {
                type: gType,
                coordinates: original.coordinates.map((items) =>
                    items.map((item) => item.map((p: Position) => mapCoords(p)))
                )
            };
            break;
        case 'GeometryCollection':
            // recursive call
            geo = {
                type: gType,
                geometries: original.geometries.map((geo) => transformGeometry(geo, from, to))
            };
            break;
    }
    return geo;
};