Select to view content in your preferred language

How to change the pin location image in map

2544
12
Jump to solution
06-03-2022 02:36 AM
NEERAJNASWA
Emerging Contributor

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

NEERAJNASWA_0-1654248967440.png

 

0 Kudos
1 Solution

Accepted Solutions
JillianStanford
Frequent Contributor

I'm not sure of the answer but you could try setting the highlight option property on the Map View

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#highlightOptio...

View solution in original post

12 Replies
JillianStanford
Frequent Contributor

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
Emerging Contributor

NEERAJNASWA_0-1654415740011.png

How to use picture mareker symbol

 

 

0 Kudos
NEERAJNASWA
Emerging Contributor

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

0 Kudos
JillianStanford
Frequent Contributor

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
Emerging Contributor

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

0 Kudos
NEERAJNASWA
Emerging Contributor

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.

NEERAJNASWA_0-1654589401588.png

 

0 Kudos
JillianStanford
Frequent Contributor

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
Emerging Contributor

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]);
});

0 Kudos
JillianStanford
Frequent Contributor

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?

0 Kudos