How to change the pin location image in map

[NEERAJNASWA]

Hello,

I want to know How can I change the pin location image in map? I want to give my custom image as shown in image

[JillianStanford]

Hi,

You don't say what kind of layer you're using or how you're adding it the map but a picture marker symbol will allow you to specify a custom image.

The Symbol Playground will help you generate the correct syntax.

[NEERAJNASWA]

How to use picture mareker symbol

[NEERAJNASWA]

Can you show where to add picture marker symbol. When I am trying to use it it gives me an error

[JillianStanford]

I haven't tested it out but you could try something like

//create the marker

var marker = {
type: "picture-marker",
url: "https://arcgis.github.io/arcgis-samples-javascript/sample-data/cat3.png",
width: 46,
height: 46
};

//apply it to each graphic

const peakResults = response.features.map(function(feature) {
feature.symbol = marker;
}

[NEERAJNASWA]

It's working ,thanks. I need few more suggestions.To change the picture marker dynamically after on click.

[NEERAJNASWA]

Hi,
It's working, thanks

Do you know how to change the picture marker symbol on click the pin image.Like the below image when I click the pin image it should change to dark red marker.

[JillianStanford]

I believe you need to watch for a click event on the MapView object and get the graphic using a hit test.

This sample should get you started -

https://developers.arcgis.com/javascript/latest/sample-code/view-hittest/

It adds a highlight on mouse-over but you could modify it to change the symbol on click instead.

[NEERAJNASWA]

Hi,

I tried with the hit test and click event but still it's not working. I will share my code also.

let centroidRenderer = {
type: "simple",
symbol: {
type: "picture-marker",
// url: "https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon....",
url: "images/Location-map.png",
width: "26",
height: "26"
}
};

let locationpin = new FeatureLayer({

url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Centroids/FeatureServer/0",

renderer: centroidRenderer
});

let symbol;

view.when(async () => {
const layerView = await view.whenLayerView(locationpin);
view.on('click', async (e) => {
const {results} = await view.hitTest(e);
try {
const { graphic } = results.find(x => x.graphic.attributes.OBJECTID);
if(symbol.url=="images/Location-map.png"){
(symbol.url==" https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon....")
}

else{
symbol.url==" images/Location-map.png"
}
// fWidget.graphic = graphic;
symbol = layerView.highlight(graphic);
} catch(err) {}
});
});

view.when(function() {
map.addMany([locationpin]);
});

[JillianStanford]

What is not working? Are you getting an error? Are you not getting any features from the hit test? Or is the symbol not being applied?