Change search result marker icon to a custom

Question

I have the following code that is currently working. I have been looking all over and cannot find how to change the icon way from the tiny dot that defaults on the location. The code below is set to a specific address on page load. I have tried PictureMarkerSymbol as you'll see I have that loaded into the function, but I'm not getting the right logic.

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

thanks!

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>ArcGIS API for JavaScript</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.20/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.20/"></script>

<script>
      require([
        'esri/config',
        'esri/Map',
        'esri/views/MapView',
        'esri/symbols/PictureMarkerSymbol',
        'esri/widgets/Search',
        'esri/layers/FeatureLayer',
      ], function (
        esriConfig,
        Map,
        MapView,
        PictureMarkerSymbol,
        Search,
        FeatureLayer
      ) {
        esriConfig.apiKey =
          'API-KEY';

        const map = new Map({
          basemap: 'arcgis-navigation',
        });

        const view = new MapView({
          container: 'viewDiv',
          map: map,
          center: [-77.050636, 38.889248],
          zoom: 13,
        });

        const search = new Search({
          //Add Search widget
          view: view,
        });

        view.ui.add(search, 'top-right'); //Add to the map

        searchWidget = new Search({
          view: view,
          searchTerm: '43 Valley Oak Ct',
          popupEnabled: false,
      
        });

        view.ui.add(searchWidget, 'bottom-right');

        view.when(() => {
          searchWidget.search();
        });

      });
    </script>

mitchelll08 · Answer 1 · 2021-08-13T21:07:48.790

It looks as the search widget resultGraphic is readonly, but it looks like you can specify a collection of SearchSource and provide it a symbol. You can almost use the default setting provided in an example under sources in documentation. Below is an example. You can use this tool for creating symbols.

<!--

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

 -->
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Search widget with multiple sources | Sample | ArcGIS API for JavaScript 4.20</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

    <script>
        require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/tasks/Locator", "esri/symbols/SimpleMarkerSymbol"], (
            Map,
            MapView,
            FeatureLayer,
            Search,
            Locator,
            SimpleMarkerSymbol,
        ) => {

            const map = new Map({
                basemap: "dark-gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-97, 38], // lon, lat
                scale: 10000000
            });

            var marker = new SimpleMarkerSymbol({ color: [203, 52, 52, 0.93] });

            const searchWidget = new Search({
                view: view,
                searchTerm: '43 Valley Oak Ct',
                popupEnabled: false,
                sources: [
                    {
                        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
                        singleLineFieldName: "SingleLine",
                        outFields: ["Addr_type", "Match_addr", "StAddr", "City"],
                        name: "ArcGIS World Geocoding Service",
                        placeholder: "Find address or place",
                        resultSymbol: marker,
                    }
                ]
            });
            searchWidget.viewModel.includeDefaultSources = false;

            // Add the search widget to the top left corner of the view
            view.ui.add(searchWidget, {
                position: "top-right"
            });

            view.when(() => {
                searchWidget.search();
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Change search result marker icon to a custom

1 Answers1