nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

タグ付きの投稿をもっと見る

Accepted answers

JillianStanford

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#highlightOptions

All comments

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

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

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

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.jpg",
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.jpg")
}

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?

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.