Community

How to change the marker of the search result?

1051
3
Jump to solution
08-13-2021 08:57 AM
ericshark
by
New Contributor
‎08-13-2021 08:57 AM

I cannot for the life of me figure out how to change the default search result icon away from the tiny default dot. I have done tons and tons of searching and I am coming up baffled. I figured this would be the easiest part of using this product and maybe it is, I just am hitting wall after wall.

Basically, my app is built with a few feature layers. On page load it pulls an address in and returns that search result automatically. That all works great, but figuring out how to change the marker is blowing my mind. Any help is appreciated.

I believe what I want is Picture marker symbol to use a custom icon.

searchWidget = new Search({
view: view,
searchTerm: 'ADDRESS HERE',
popupEnabled: false,
});
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
by
Frequent Contributor
‎08-13-2021 10:51 AM

You can wait for the default source to get loaded and change the result symbol of the source.

 

searchWidget.allSources.on("after-add", ({ item }) => {
  item.resultSymbol = new SimpleMarkerSymbol({
    style: "diamond",
    outline: { color: [255, 255, 255, 1] },
    color: [110, 247, 54, 1],
    size: 32
  });
});

 

https://codepen.io/odoe/pen/WNjmPgd?editors=1000

View solution in original post

3 Replies
ReneRubalcava
by
Frequent Contributor
‎08-13-2021 10:51 AM

You can wait for the default source to get loaded and change the result symbol of the source.

 

searchWidget.allSources.on("after-add", ({ item }) => {
  item.resultSymbol = new SimpleMarkerSymbol({
    style: "diamond",
    outline: { color: [255, 255, 255, 1] },
    color: [110, 247, 54, 1],
    size: 32
  });
});

 

https://codepen.io/odoe/pen/WNjmPgd?editors=1000

ericshark
by
New Contributor
‎08-16-2021 12:20 PM

Thank you, I was able to get what I needed using your code and modifying it for PictureMarkerSymbol

searchWidget.allSources.on('after-add', ({ item }) => {
item.resultSymbol = new PictureMarkerSymbol({
url: '/images/orange-warning.png',
height: 28,
width: 28,
});
});
@ReneRubalcava wrote:

You can wait for the default source to get loaded and change the result symbol of the source.

 

 

searchWidget.allSources.on("after-add", ({ item }) => {
  item.resultSymbol = new SimpleMarkerSymbol({
    style: "diamond",
    outline: { color: [255, 255, 255, 1] },
    color: [110, 247, 54, 1],
    size: 32
  });
});

 

 

https://codepen.io/odoe/pen/WNjmPgd?editors=1000

@ReneRubalcava wrote:

You can wait for the default source to get loaded and change the result symbol of the source.

 

 

searchWidget.allSources.on("after-add", ({ item }) => {
  item.resultSymbol = new SimpleMarkerSymbol({
    style: "diamond",
    outline: { color: [255, 255, 255, 1] },
    color: [110, 247, 54, 1],
    size: 32
  });
});

 

 

https://codepen.io/odoe/pen/WNjmPgd?editors=1000

 

0 Kudos
RafiqKhan
by
New Contributor
‎01-09-2022 04:00 AM
@ericshark wrote:

Thank you, I was able to get what I needed using your code and modifying it for PictureMarkerSymbol

searchWidget.allSources.on('after-add', ({ item }) => {
item.resultSymbol = new PictureMarkerSymbol({
url: '/images/orange-warning.png',
height: 28,
width: 28,
});
});
@ReneRubalcava wrote:

You can wait for the default source to get loaded and change the result symbol of the source.

 

 

 

 

searchWidget.allSources.on("after-add", ({ item }) => {
  item.resultSymbol = new SimpleMarkerSymbol({
    style: "diamond",
    outline: { color: [255, 255, 255, 1] },
    color: [110, 247, 54, 1],
    size: 32
  });
});

 

 

 

 

https://codepen.io/odoe/pen/WNjmPgd?editors=1000

@ReneRubalcava wrote:

You can wait for the default source to get loaded and change the result symbol of the source.

 

 

 

 

searchWidget.allSources.on("after-add", ({ item }) => {
  item.resultSymbol = new SimpleMarkerSymbol({
    style: "diamond",
    outline: { color: [255, 255, 255, 1] },
    color: [110, 247, 54, 1],
    size: 32
  });
});

 

 

 

 

https://codepen.io/odoe/pen/WNjmPgd?editors=1000

 

I figured this would be the easy part of using arcgis, but it's proving to be difficult.

0 Kudos