Add Marker to Search Result

1968
3
Jump to solution
03-23-2016 02:04 PM
JessicaGormont
New Contributor II

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!!!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

RobertScheitlin__GISP
MVP Esteemed Contributor

Jessica Gormont​ Did this work for you?

0 Kudos
JessicaGormont
New Contributor II

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.

0 Kudos