Select to view content in your preferred language

Enable geocoder / search in Shortlist

2051
8
Jump to solution
12-29-2016 09:35 AM
MelissaPrindiville
Emerging Contributor

I'm working in the latest beta release of the shortlist storymap and would like to add a search box / geocoder to the map.  I'm sure this is doable but I'm not sure how.  I added by geocoding service to the config.js.  I'm not a developer and am not sure where to look next to to enable the functionality.  Similar to this 

-Melissa

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
MarkCooney
Frequent Contributor

Hi Melissa,

In the custom-scripts.js file, use this:

define(["dojo/topic", "esri/dijit/Search",], function(topic, Search) {
     /*
     * Custom Javascript to be executed while the application is initializing goes here
     */

     // The application is ready
     topic.subscribe("tpl-ready", function(){
          /*
          * Custom Javascript to be executed when the application is ready goes here
          */
          var search = new Search({
               map: app.map
          }, "search");
          search.startup();
     });
});

-Mark

View solution in original post

8 Replies
MarkCooney
Frequent Contributor

Hi Melissa,

This is not currently built into the Shortlist app, but is something we look to add in the future.  

To add it yourself, Esri's JS API has a nice sample showing how it can be implemented here: Search basic | ArcGIS API for JavaScript 3.19 

-Mark

MelissaPrindiville
Emerging Contributor

Darn!  Yeah I saw this sample however I couldn't figure out how to get it to work.  I will have to try that again.

Thanks -Melissa

0 Kudos
MelissaPrindiville
Emerging Contributor

Hi Mark I was able to add the search widget however it doesn't appear to search anything.  I am seeing a defineAlreadyDefined error.  Do you have any clues on how I might fix this?

0 Kudos
MarkCooney
Frequent Contributor

Hi Melissa,

In the custom-scripts.js file, use this:

define(["dojo/topic", "esri/dijit/Search",], function(topic, Search) {
     /*
     * Custom Javascript to be executed while the application is initializing goes here
     */

     // The application is ready
     topic.subscribe("tpl-ready", function(){
          /*
          * Custom Javascript to be executed when the application is ready goes here
          */
          var search = new Search({
               map: app.map
          }, "search");
          search.startup();
     });
});

-Mark

MelissaPrindiville
Emerging Contributor

Thanks Mark that did it!

0 Kudos
MelissaPrindiville
Emerging Contributor

Hi Mark, the story is coming along nicely thanks to your help however one more question.

1. I'm trying to apply my one geocode service and have changed it in the Config.js however it still appears to use the ESRI World location service.  Any ideas???

-Melissa

0 Kudos
MarkCooney
Frequent Contributor

Hi Melissa,

Have a look at the geocoder construction method, there is a geocoders parameter you can use to add your own.  Geocoder | API Reference | ArcGIS API for JavaScript 3.19 

-Mark

MelissaPrindiville
Emerging Contributor

Hi Mark,

Thank you for pointing me in the right direction.  I believe I have added the geocoders to the custom-script.js

...........

define(["dojo/topic", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/dijit/Geocoder", "esri/tasks/locator"], function (topic, Search, FeatureLayer, InfoTemplate, Geocoder, locator) {
/*
* Custom Javascript to be executed while the application is initializing goes here
*/

// The application is ready
topic.subscribe("tpl-ready", function () {
/*
* Custom Javascript to be executed when the application is ready goes here
*/
var search = new Search({
enableButtonMode: false, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: true,
map: app.map
}, "search");


var sources = search.get("sources");

//Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name.

sources.push({
featureLayer: new FeatureLayer("http://anrmaps.vermont.gov/arcgis/rest/services/map_services/ACCD_Tourism/FeatureServer/8"),
searchFields: ["name"],
displayField: "name",
exactMatch: false,
outFields: ["name"],
name: "Roadside Historic Markers",
placeholder: "Vermont at Cedar Creek",
maxResults: 6,
maxSuggestions: 6,

//Create an InfoTemplate and include three fields
infoTemplate: new InfoTemplate("name", "location: ${location}</br><a href=${pic_url} target=_blank;'></a>"),
enableSuggestions: true,
minCharacters: 0
});

var geocoder = [{
url: "http://maps.vcgi.vermont.gov/arcgis/rest/services/EGC_services/GCS_E911_COMPOSITE_SP/GeocodeServer",
name: "E911 Address",
singleLineFieldName: "Single Line Input"
}];
var geocoder = new Geocoder({
map: map,
geocoders: geocoders,
arcgisGeocoder: false
});


//Set the sources above to the search widget
search.set("sources", sources);

search.startup();
});
});

However I am still getting the ESRI World Geocoder

Can my geocode service show up there instead?

0 Kudos