Add Marker to Search Result

JessicaGormont — Wed, 23 Mar 2016 21:04:19 GMT

Since the search result window gets in the way on our map (and in our case is redundant due to how we label our features), we have removed it. However, we would like to add a marker symbol or highlight the point we have searched so the end user can easily identify it on the map. Is there a way to add this function?

Note: I am not a programmer, so please be as basic in your answer as possible. If I need to add custom code (and you know that code), please provide it in your response and tell me where I'm supposed to add it. Thank you so much!!!

Re: Add Marker to Search Result

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:03:23 GMT

Jessica,

Open the [install dir]\server\apps\[app #]\widgets\Search\Widget.js file find the _convertConfig function and add lines 3 and 15, and don't forget to add the comma on line 14:

_convertConfig: function(config) {
        var sourceDefs = array.map(config.sources, lang.hitch(this, function(source) {
          var pms = new PictureMarkerSymbol('https://js.arcgis.com/3.15/esri/dijit/images/Directions/greenPoint.png',21,29);
          var def = new Deferred();
          if (source && source.url && source.type === 'locator') {
            def.resolve({
              locator: new Locator(source.url || ""),
              outFields: ["*"],
              singleLineFieldName: source.singleLineFieldName || "",
              name: jimuUtils.stripHTML(source.name || ""),
              placeholder: jimuUtils.stripHTML(source.placeholder || ""),
              countryCode: source.countryCode || "",
              maxResults: source.maxResults || 6,
              useMapExtent: !!source.searchInCurrentMapExtent,
              highlightSymbol: pms
            });
          } else if (source && source.url && source.type === 'query') {

Next at the beginning of the Widget.js file make these changes line 22 and 27:

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/when',
    'dojo/on',
    'dojo/aspect',
    'dojo/query',
    'dojo/keys',
    'dojo/Deferred',
    'dojo/promise/all',
    'jimu/BaseWidget',
    'jimu/LayerInfos/LayerInfos',
    'jimu/utils',
    'esri/dijit/Search',
    'esri/tasks/locator',
    'esri/layers/FeatureLayer',
    'esri/InfoTemplate',
    'esri/lang',
    './utils',
    'esri/symbols/PictureMarkerSymbol',
    'dojo/NodeList-dom'
  ],
  function(declare, lang, array, html, when, on, aspect, query, keys, Deferred, all,
    BaseWidget, LayerInfos, jimuUtils, Search, Locator,
    FeatureLayer, InfoTemplate, esriLang, utils, PictureMarkerSymbol) {

Around line 66 find and make these changes line 25:

LayerInfos.getInstance(this.map, this.map.itemInfo)
          .then(lang.hitch(this, function(layerInfosObj) {
            this.layerInfosObj = layerInfosObj;
            utils.setMap(this.map);
            utils.setLayerInfosObj(this.layerInfosObj);
            utils.setAppConfig(this.appConfig);
            when(utils.getConfigInfo(this.config)).then(lang.hitch(this, function(config) {
              return all(this._convertConfig(config)).then(function(searchSouces) {
                return array.filter(searchSouces, function(source) {
                  return source;
                });
              });
            })).then(lang.hitch(this, function(searchSouces) {
              if (!this.domNode) {
                return;
              }
              this.searchDijit = new Search({
                activeSourceIndex: searchSouces.length === 1 ? 0 : 'all',
                allPlaceholder: jimuUtils.stripHTML(esriLang.isDefined(this.config.allPlaceholder) ?
                  this.config.allPlaceholder : ""),
                autoSelect: true,
                enableButtonMode: false,
                enableLabel: false,
                enableInfoWindow: true,
                enableHighlight: true,
                showInfoWindowOnSelect: esriLang.isDefined(this.config.showInfoWindowOnSelect) ?
                  !!this.config.showInfoWindowOnSelect : true,
                map: this.map,
                sources: searchSouces,
                theme: 'arcgisSearch'
              });

Hopefully this is clear enough.

Re: Add Marker to Search Result

RobertScheitlin__GISP — Fri, 25 Mar 2016 16:45:40 GMT

Jessica Gormont Did this work for you?

Re: Add Marker to Search Result

JessicaGormont — Fri, 25 Mar 2016 17:28:39 GMT

Robert Scheitlin, GISP - Sorry, I was in training all day yesterday. This code worked great! Thank you so much for making your response so easy to follow.

topic Re: Add Marker to Search Result in ArcGIS Web AppBuilder Questions

Add Marker to Search Result

Re: Add Marker to Search Result

Re: Add Marker to Search Result

Re: Add Marker to Search Result