how to use maplibre for cartesian coordinates and "flat planes"

[dberardo-com]

inspired by #1228

in my use case i am trying to use maplibre (in react) to create a white board for the users. users can drag and drop items on the board and those will be saved on some x,y coordinates. users can zoom in/out on the board and and filter layers, group items together, etc.

the problem i am currently facing is that items' distance is not maintained during zoom.

I am placing HTML/png items on a symbol layer like it follows and i am also experimenting with markers, but without success:

  const onMapLoad = () => {
    if (!mapRef.current) return;
    const map = mapRef.current?.getMap() as Map;

    // Load the custom icon image in parallel
    executePromises(
      Object.entries(images).map(
        async ([k, i]) =>
          await map.loadImage(i).then((image) => {
            if (!map.hasImage(k)) {
              map.addImage(k, image.data);
            }
          })
      )
    ).finally(() => setImageLoaded(true));
  };

const geojson = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [-122.3874, 37.843972],
        },
        properties: { icon: "test1", "offset": [0, 0] },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [-122.3874, 37.843972],
        },
        properties: {
          icon: "test2",
          "offset": [-177, 500],
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [-122.3974, 37.943972],
        },
        properties: {
          icon: "test1",
          "offset": [0,0],
        },
      },
    ],
  };


<Map 
{...{

 projection: { type: "vertical-perspective" },
onLoad: onMapLoad,
          initialViewState: {
            longitude: -122.4194,
            latitude: 37.7749,
            zoom: 14,
          },
}}>
<Source id="icons-source" type="geojson" data={geojson}>
            {/* @ts-ignore */}
            <Layer
              {...{
                id: "icon-layer",
                type: "symbol",
                source: "icons-source",
                layout: {
                  // "symbol-spacing": 250,
                  // "symbol-spacing": 100,
                  // "symbol-placement": "point",
                  // 'icon-ignore-placement': false,
                  "icon-image": ["get", "icon"], // Get icon name from feature property
                  // "icon-size": ["interpolate"],
                  "icon-offset": ["get", "offset"],
                  "icon-size": ["interpolate", ["linear"], ["zoom"], 5, 0.05, 10, 0.25, 15, 1.5],
                  // "icon-size": ["interpolate", ["linear"], ["zoom"], 0,1, 25, 1],
                  "icon-allow-overlap": true,
                  // "icon-size": 1,
                },
              }}
            />
            <Marker
              longitude={geojson.features[0].geometry.coordinates[0]}
              latitude={geojson.features[0].geometry.coordinates[1]}
            >
              <GenericPin
              />
            </Marker>
            <Marker
              offset={[geojson.features[1].properties.offset[0], geojson.features[1].properties.offset[1]]}
              longitude={geojson.features[0].geometry.coordinates[0]}
              latitude={geojson.features[0].geometry.coordinates[1]}
            >
              <GenericPin
              />
            </Marker>
          </Source>
</Map>

as you can see above, in order to preserve items' distance during zooming i had to use offsets, but this is really cumbersome to work with. i have tried the 2 built-in projections as well but no success.

markers also behave badly, so i might have to use another symbol layer instead, with the same offset logic.

i would like to know if i am on the right path or if there is a smarter way to deal with this issue.

[HarelM]

I would advise to use an ImageLayer or CanvasLayer instead of a symbol layer.