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

Encontre mais publicações marcadas com

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?

NEERAJNASWA

The code is now working, But I need help in removing the blue highlight color after clicking the pin image.I am sharing my code.

var views = new MapView({

container: "viewDiv",

map: map,

center: [20,40],

zoom: 16,

popup: {

dockEnabled: true,

dockOptions: {

buttonEnabled: false,

breakpoint: false

}

});

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",

// "https://services.arcgis.com/8Pc9XBTAsYuxx9Ny/arcgis/rest/services/BuildingFootprint2D_gdb/FeatureServer/0",

renderer: centroidRenderer,

popupTemplate : popupTemplate

});

var maps = new Map({

basemap: "dark-gray",

layers: [locationpin]

});

// var privateSchoolsPoly = new FeatureLayer({

// url:

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

// outFields: ["*"],

// opacity: 0.8,

// renderer: renderer,

// });

function getGraphics(response) {

view.graphics.removeAll();

if (response.results.length > 0) {

var graphic = response.results[0].graphic;

graphic.symbol = {

type: "picture-marker",

url: "https://static.vecteezy.com/system/resources/previews/000/582/855/original/vector-location-pin-icon.jpg",

// url:"https://static.vecteezy.com/system/resources/previews/000/279/531/original/location-pin-map-pin-flat-icon-vector-design.jpg",

// url: "images/Location-Red.png",

width: "26",

height: "26"

}

view.graphics.add(graphic);

}

view.when(function () {

view.whenLayerView(locationpin).then(function (lview) {

watchUtils.whenFalseOnce(lview, "updating", function () {

// Set up a click event handler and retrieve the screen x, y coordinates

view.on("click", function (evt) {

var screenPoint = {

x: evt.x,

y: evt.y

};

// the hitTest() checks to see if any graphics in the view

// intersect the given screen x, y coordinates

view.hitTest(screenPoint)

.then(function (response) {

// changeCursor(response);

getGraphics(response);

});

view.when(function() {

map.addMany([locationpin]);

});

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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