topic Re: How to change the pin location image in map in ArcGIS JavaScript Maps SDK Questions

How to change the pin location image in map

NEERAJNASWA — Fri, 03 Jun 2022 09:36:53 GMT

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

Re: How to change the pin location image in map

JillianStanford — Fri, 03 Jun 2022 17:02:19 GMT

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.

Re: How to change the pin location image in map

NEERAJNASWA — Sun, 05 Jun 2022 07:56:02 GMT

How to use picture mareker symbol

Re: How to change the pin location image in map

NEERAJNASWA — Sun, 05 Jun 2022 07:58:54 GMT

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

Re: How to change the pin location image in map

JillianStanford — Mon, 06 Jun 2022 14:59:50 GMT

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

Re: How to change the pin location image in map

NEERAJNASWA — Tue, 07 Jun 2022 08:10:43 GMT

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.

Re: How to change the pin location image in map

NEERAJNASWA — Tue, 07 Jun 2022 08:16:25 GMT

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

Re: How to change the pin location image in map

JillianStanford — Tue, 07 Jun 2022 15:47:44 GMT

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.

Re: How to change the pin location image in map

NEERAJNASWA — Wed, 08 Jun 2022 06:31:07 GMT

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

Re: How to change the pin location image in map

JillianStanford — Wed, 08 Jun 2022 14:33:07 GMT

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?

Re: How to change the pin location image in map

NEERAJNASWA — Thu, 09 Jun 2022 06:43:28 GMT

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

});

Re: How to change the pin location image in map

JillianStanford — Thu, 09 Jun 2022 17:27:14 GMT

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

Re: How to change the pin location image in map

NEERAJNASWA — Fri, 10 Jun 2022 05:15:50 GMT

Thanks, the Highlight option worked as per the expectation.