make it possible to change image for existing image ID on Android

[Buthrakaur]

trafficstars

make it possible to change image for existing image ID on Android - port of the same fix in rnmapbox https://github.com/rnmapbox/maps/pull/3431

[tyrauber]

Hey @Buthrakaur, thanks for this! Code looks good. Would it be possible to add an example or test?

[Buthrakaur]

Hello @tyrauber , thanks for quick reaction. You can see example in the original PR here: https://github.com/rnmapbox/maps/pull/3431 - I believe it should be good enough as it was accepted by @mfazekas

[Buthrakaur]

Hello @tyrauber , any update, please?

[tyrauber]

@KiwiKilian, thoughts? Looks pretty straightforward.

[KiwiKilian]

@Buthrakaur could you please provide a minimal example? It's not necessary to be committed, you can just add it as a comment here so we can copy-paste it and see what bug it should fix. You should start from this example and only add the code necessary so we can reproduce the issue and validate your fix.

[Buthrakaur]

Hello @KiwiKilian , here is it:

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

export function IconUrlChanging() {
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  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: currentTime.getSeconds() % 2 === 0 ? 'https://placehold.co/32/orange/white/png' : 'https://placehold.co/32/blue/white/png',
    }),
    [currentTime]
  );

  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 }} />
      </ShapeSource>
    </MapView>
  );
}

[KiwiKilian]

Thanks! Will try to have a look soon!

[KiwiKilian]

Here is a reduced example:

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

import { FEATURE_COLLECTION } from "../constants/GEOMETRIES";

export function BugReport() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCounter((prevState) => prevState + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const images = useMemo(
    () => ({
      "example-icon":
        counter % 2 === 0
          ? "https://placehold.co/32/orange/white/png"
          : "https://placehold.co/32/blue/white/png",
    }),
    [counter],
  );

  return (
    <MapView style={{ flex: 1 }}>
      <Images images={images} />
      <ShapeSource id="example" shape={FEATURE_COLLECTION}>
        <SymbolLayer
          id="example"
          style={{ iconImage: "example-icon", iconSize: 1 }}
        />
      </ShapeSource>
    </MapView>
  );
}

[Buthrakaur]

@KiwiKilian yes - this already worked for us on iOS but wasn't working on Android

[KiwiKilian]

I can't make it work on iOS. Please revalidate and make a video which shows it's working on iOS.

[KiwiKilian]

I've validated again on main branch – currently both platforms behave the same with my example. It's not possible to change the image URL on both Android and iOS.

Could you elaborate on your use case? I struggle to understand, why you would want to change the image? Couldn't your style just switch to another image, if necessary? If you can make a valid point for such usage, we would need feature parity for Android and iOS.

[KiwiKilian]

Closing for missing response to my feedback. Happy to discuss further if my questions/concerns are adressed.