Add support for using SDF template images

[Buthrakaur]

style.addImages supports sdf flag on both Android and iOS but React Native didn't support it - this PR adds the support so it's possible to use SDF template images on the map by settings the sdf flag to true along with relevant icon re-coloring styles e.g. iconColor. Code sample:

const images = {  x: { uri: 'https://example.com/1.png', sdf: true } };
...
<Images images={images} />

[KiwiKilian]

@Buthrakaur could you give an example here too? Thanks!

[Buthrakaur]

@KiwiKilian

import { Images, MapView, ShapeSource, SymbolLayer } from '@maplibre/maplibre-react-native';
import React, { useEffect, useMemo, useState } from 'react';

export function BugReport() {
  const featuresCollection: GeoJSON.FeatureCollection = useMemo(() => {
    const features: GeoJSON.Feature[] = [];

    for (let i = 1; i <= 10; i++) {
      features.push({
        type: 'Feature',
        id: i,
        properties: {
          icon: 'icon1',
          title: `POI ${i}`,
        },
        geometry: {
          type: 'Point',
          coordinates: [14.4282 + i * 0.02, 50.0806125],
        },
      });
    }

    return { type: 'FeatureCollection', features };
  }, []);

  const images = useMemo(
    () => ({
      icon1: { uri: 'https://placehold.co/32/orange/white/png', sdf: true },
    }),
    []
  );

  return (
    <MapView style={{ flex: 1 }}>
      <Images images={images} />
      <ShapeSource id="ss-1" shape={featuresCollection}>
        <SymbolLayer id="sl-1" style={{ iconImage: ['get', 'icon'], iconSize: 1 / 2, iconColor: 'pink' }} />
      </ShapeSource>
    </MapView>
  );
}

[KiwiKilian]

Thanks, I still have this on my radar. Hoping to have some time soon. Thanks for your patience!

[KiwiKilian]

What's your use-case for SDF images? I think SDFs in general in MapLibre are a sub-optimal feature, due to the limitations in quality.

If you want to proceed with this please address the issues and rebase your branch. Sorry for the conflicts now due to the reformatting. If you are struggling to fix these by yourself, you can move the branch to a personal repository, create a new PR and allow maintainers to push into it, then I could help you with fixing.

[KiwiKilian]

These changes have to be made within scripts/templates/MLRNStyle.m.ejs. Then run yarn run codegen which writes this file.

[KiwiKilian]

It looks like you still have to run yarn run codegen and commit these changes.

[KiwiKilian]

@Buthrakaur please run yarn run codegen in the root of your branch and commit the changes.

[KiwiKilian]

Here is an example with an actual SDF image:

import {
  Images,
  MapView,
  ShapeSource,
  SymbolLayer,
} from "@maplibre/maplibre-react-native";

export function BugReport() {
  return (
    <MapView style={{ flex: 1 }}>
      <Images
        images={{
          "example-icon": {
            uri: "https://docs.mapbox.com/help/demos/using-recolorable-images-in-mapbox-maps/shop-15.png",
            sdf: true,
          },
        }}
      />
      <ShapeSource id="ss-1" shape={{ type: "Point", coordinates: [0, 0] }}>
        <SymbolLayer
          id="sl-1"
          style={{
            iconImage: "example-icon",
            iconColor: "red",
          }}
        />
      </ShapeSource>
    </MapView>
  );
}

[Buthrakaur]

Hello @KiwiKilian , could you please help us resolve the failing checks? We don't understand the build process completely thus don't understand what's wrong here.

[tyrauber]

Hey @Buthrakaur, I could be wrong, but I think it may be because you committed changes to the yarn.lock without changes to a package.json?