Use Custom Image from URL in MapKit JS Annotation

Question

I'm working with MapKit JS for the first time and using the Custom Callout example from the Apple website. It uses the default red circle for the marker - I'd like to now change that to a custom image from a URL that I host but I'm having trouble updating the example to use a URL.

Here's the code from the Apple example that creates the Annotation:

    // Landmarks annotations
    var annotations = sanFranciscoLandmarks.map(function(landmark) {
      var annotation = new mapkit.MarkerAnnotation(landmark.coordinate, {
        callout: landmarkAnnotationCallout,
        color: "#c969e0"
      });
      annotation.landmark = landmark;
      return annotation;
    });

I'm trying to incorporate the example from the docs for mapkit.ImageAnnotation:

    var coordinate = new mapkit.Coordinate(38.897957, -77.036560);

// The house logo is a white square.
// The image size is 32 x 32. Becuase the default anchor point is the bottom center
// of the image, offset the anchor by (0, -16) to make the center of the
// image the anchor point.
var houseOptions = {
    title: "The White House",
    subtitle: "1600 Pennsylvania Ave NW",
    url: { 1: "/images/house.png", 2: "/images/house_2x.png"},
    anchorOffset: new DOMPoint(0, -16)
};
var houseAnnotation = new mapkit.ImageAnnotation(coordinate, houseOptions);
map.addAnnotation(houseAnnotation);

but everything I've tried so far has failed. Is it possible to have a custom image URL that works with my existing code for the annotation?

Use Custom Image from URL in MapKit JS Annotation

0 Answers0