Using non-default projection with OSM and Next.js

[T3chnoMaciej]

Hello,

I'm building a project that uses data drawn from WFS server on top of OpenStreetMap in Next.js using Rlayers. In the past I managed to achive what is necessary in the browser using Vite, however this project has many other, non-map features and thus relies on Next.js and React, so I need to repliacte the results here.

The problem: after converting units using proj4 the RMap component displays everyting correctly (distances, scale to surroundings, etc.), but underlying ROSM thinks I'm in the middle of the ocean... Is there a way to pass projection to OSM? I didn't find it in the docs and blindly passing projection prop does not work.

My test setup:

'use client';

import React from 'react';
import 'ol/ol.css'
import WFS from 'ol/format/WFS.js';
import proj4 from 'proj4';
import * as ol_proj4 from 'ol/proj/proj4.js';
import {RMap, ROSM,  RLayerVector, RStyle} from 'rlayers';

proj4.defs("EPSG:2180","+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs +axis=neu");
ol_proj4.register(proj4);

var miejsce4326 = [18.032252,53.215649];
var miejsce = proj4('EPSG:4326', 'EPSG:2180',miejsce4326);

export default function MapElement(){
<RMap width={'100%'} height={'60vh'} initial={{center: miejsce, zoom: 14, projection: "EPSG:2180"}}>
            <ROSM
                projection={"EPSG:2180"}
            />
            <RLayerVector
                    zIndex={5}
                    format={new WFS({ version: '2.0.0'})}
                    url='https://corsproxy.io/?https://mapy.geoportal.gov.pl/wss/ext/PowiatoweBazyEwidencjiGruntow/0403?service=WFS&request=GetFeature&version=2.0.0&srsname=urn:ogc:def:crs:EPSG::2180&typename=dzialki&bbox=589920.405294056,431210.22956701985,593049.7467176472,437239.0737785711,urn:ogc:def:crs:EPSG::2180'
                    projection={"EPSG:2180"}
                >
                    <RStyle.RStyle>
                        <RStyle.RStroke color='#007bff' width={3} />
                        <RStyle.RFill color='transparent' />
                    </RStyle.RStyle>
            </RLayerVector>
        </RMap>
}

screenshot: https://imgur.com/wEyboGw

Apart from that, the console is constantly swarmed with web-worker error that is caused by Rlayers. After disabling Rlayers and map, error disappears.

./node_modules/web-worker/cjs/node.js
Critical dependency: the request of a dependency is an expression

Import trace for requested module:
./node_modules/web-worker/cjs/node.js
./node_modules/geotiff/dist-module/worker/decoder.js
./node_modules/geotiff/dist-module/pool.js
./node_modules/geotiff/dist-module/geotiff.js
./node_modules/ol/source/GeoTIFF.js
./node_modules/ol/source.js
./node_modules/rlayers/dist/layer/RLayerTile.js
./node_modules/rlayers/dist/index.js
./app/mapa/components/mapElement.js

Any help will be appreciated, I really want this to work and beside those errors this Rlayers is a brilliant piece of software and a huge timesaver.

Cheers from Poland,
Maciej

[mmomtchev]

I don't know how your code works, because your component does not return the JSX.

The projection field is not part of the initial - it is an RMap parameter:

<RMap width={'100%'} height={'60vh'} projection={'EPSG:2180'} initial={{center: miejsce, zoom: 14}}>

You should not set a projection on ROSM layer - this would mean that you are including an ROSM layer in that projection - you are not - you are including an ROSM layer in its default projection. Layers reproject to the RMap projection when displayed.

I suggest you add a code linter or some other type of checker or an editor that understands types such as Visual Studio Code, it would have immediately found the invalid properties.

[mmomtchev]

geotiffjs/geotiff.js#396

[T3chnoMaciej]

Thank you, it solved my problem. I will think about type checker or even switching to typescript.