0

I'm trying to create a map and I need to add a custom icon as there will be two types of markers on it. I've been following the documentation almost verbatim but I still get the standard icon on my marker:

//In JS controller
mapMarkers = [{
    location: {
        Latitude: '-40.7831856',
        Longitude: '-72.9675653'
    },
    title: "Title",
    description: "Description",
    mapIcon: {
        path: "M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z",
        fillColor: "gold",
        fillOpacity: 1,
        strokeOpacity: 1,
        strokeColor: "black",
        strokeWeight: 1,
        scale: 1,
        anchor: {x: 122.5, y: 115}
    }
}]
<!-- In HTML -->
<lightning-map
    map-markers={mapMarkers}
    zoom-level="15"
    list-view="visible"
></lightning-map>

Any idea what I might be doing wrong?

2 Answers 2

1

Not sure why but in me based on your code I see custom star icon based on your SVG.

Do you see a different icon, or it might be a caching issue?

Unrelated information:

Setting lowering zoom level shows the marker, zoom-level="10".

Also by default the scale of icon is 100%, you can scale it down to scale: 0.2.


Here is my example-

HTML:

<lightning-map
    map-markers={mapMarkers}
    zoom-level="10"
    list-view="visible"
></lightning-map>

JavaScript:

//In JS controller
mapMarkers = [
    {
        location: {
            Latitude: "-40.7831856",
            Longitude: "-72.9675653"
        },
        title: "Puerto Octay",
        description: "Puerto Octay, Los Lagos, Chile",
        mapIcon: {
            path: "M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z",
            fillColor: "gold",
            fillOpacity: 1,
            strokeOpacity: 1,
            strokeColor: "black",
            strokeWeight: 1,
            scale: 0.2,
            anchor: { x: 122.5, y: 115 }
        }
    },
    {
        location: {
            Latitude: "-40.975767",
            Longitude: "-72.880717"
        },
        title: "Muñoz Gamero 244",
        description: "Muñoz Gamero 244, Puerto Octay, Los Lagos, Chile",
        mapIcon: {
            path: "M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z",
            fillColor: "purple",
            fillOpacity: 1,
            strokeOpacity: 1,
            strokeColor: "black",
            strokeWeight: 1,
            scale: 0.2,
            anchor: { x: 122.5, y: 115 }
        }
    }
];

Below is output:

enter image description here

1
  • I found what the problem was, for some reason, when using the "SFDX: preview component locally" functionality from VSCode, the icons don't work, I added the LWC to a page and it works.
    – Gusk
    Commented Sep 26, 2022 at 14:29
-1

I found what the problem was, for some reason, when using the "SFDX: preview component locally" functionality from VSCode, the icons don't work, I added the LWC to a page and the icons appear correctly.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .