displaying image from cdn url to Marker

[parttiez]

import { Annotation, Map, Marker } from "mapkit-react";

export default function AppleMapC() {
  const appleMapApi = import.meta.env.VITE_APPLE_MAP;
  const imageDelegate = {
    getImageUrl(scale, callback) {
      // Construct a URL based on the scale (1x, 2x, 3x)
      const imageUrl = `url`;
      // Pass the URL to the callback
      callback(imageUrl);
    },
  };

  console.log(imageDelegate);

  return (
    <div className={`overflow-hidden rounded-md w-full h-[550px]`}>
      <Map token={appleMapApi}>
        <Marker latitude={46.52} longitude={6.57} glyphImage={imageDelegate} />
        <Annotation latitude={46.52} longitude={6.57}>
          <p>HELLOOO</p>
        </Annotation>
      </Map>
    </div>
  );
}

This is the code. I am trying to add images to markers but it seems like it is not working. I checked the Apple Mapkit doc but I am no clue how to add that?

[Nicolapps]

Hey,

I can’t reproduce your issue. For instance, when I take your code and I use callback('https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Wikimedia-logo.svg/600px-Wikimedia-logo.svg.png');, I get a marker with the icon that I expect:

Which URL are you using? What is the result you’re getting? Do you see any error messages in your browser console?

[parttiez]

Oh, it looks like it works for png? I was using 'https://images.unsplash.com/photo-1512017615494-fdf6146235ff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTI2MDR8MHwxfHNlYXJjaHwxfHxxdWVlbnN0b3dufGVufDB8MHx8fDE2ODQ5MjE3ODd8MA&ixlib=rb-4.0.3&q=80&w=1080' this link here.

[Nicolapps]

@parttiez What you’re trying to do won’t work because <Marker/> only supports showing monochrome icons. As you can see on my example above, MapKit JS will display the shape of the image in white, which won’t work for a photo.

The good news is that you can use <Annotation /> instead to include your custom content (e.g. an image) on the map. Have you tried it?