nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Customize Geocoding Popup in ArcGIS Online Templates

EmilyLaMunyon

Hello,

I am interested in customizing the popup that appears when using the search address option/geocoder in the Simple Viewer template in ArcGIS Online to include dynamic and custom information (similar to the way popups are configured on layers in AGOL).

I have downloaded the code and tried to find where to tweak it, but am having no luck. I am also open to using the JavaScript API, Web App builder or any other ArcGIS Online template in order to achieve this.

I found this example in the JavaScript Samples that is similar to what I want to accomplish, but I would like to have the popup to appear on the result of a geocoding.

Search with customization | ArcGIS API for JavaScript

Does anyone have any suggestions?

Thanks in advance for any input!!

Vind meer berichten getagd met

Accepted answers

All comments

khutchins

Do you have search layers defined in the template or are you trying to update the popup from the default location search that happens using the Esri World Geocoder? If you are trying to update the geocoder popup what type of info do you want to display? Where do you get the info from?

EmilyLaMunyon

Hi Kelly,

Thanks for replying to my question. I am interested in configuring the popup from the default location search using the ESRI geocoder. I would like to display a mix of information. First, it would be nice if I could configure the default popup with dynamic information, such as which city the address is in. Second, I would love to add some text and a hyperlink, similar to the popups on layers in ArcGIS Online maps.

khutchins

In order to customize the default popup content you'll need to download the template and host it locally then make the update to the code. If the extra info is the same for all features and you know it ahead of time you could do something like this where you define the info template for the default locator (Esri World) and specify the combination of text, html and fields you want to display. In this example we display the information from the results Match_addr field and the City field.

         var s = new Search({
            map: map
         }, "search");
         s.sources[0].outFields = ["*"];
         s.infoTemplate = new InfoTemplate("Search result", "<b>${Match_addr}</b> <br>Address located in ${City}");
         s.startup();

EmilyLaMunyon

Thanks Kelly!

I have downloaded the template and am struggling with where to put the code to override the ESRI geocoding popup for this particular application. Here is what I am working with, where would this go in order to achieve the desired result? I see where there is info template code for the Search layers that can be defined in the template, but how would I get the geocoding Search result window to do the same?

Thanks

  //Add the geocoder if search is enabled
            if (this.config.search) {


                var options = {
                    map: this.map,
                    addLayersFromMap: false
                };

               var searchLayers = false;
                var search = new Search(options, domConstruct.create("div"));
                var defaultSources = [];


                //setup geocoders defined in common config 
                if (this.config.helperServices.geocode && this.config.locationSearch) {
                    var geocoders = lang.clone(this.config.helperServices.geocode);
                    array.forEach(geocoders, lang.hitch(this, function (geocoder) {
                        if (geocoder.url.indexOf(".arcgis.com/arcgis/rest/services/World/GeocodeServer") > -1) {


                            geocoder.hasEsri = true;
                            geocoder.locator = new Locator(geocoder.url);

                              geocoder.singleLineFieldName = "SingleLine";


                            geocoder.name = geocoder.name || "Esri World Geocoder";


                            if (this.config.searchExtent) {
                                geocoder.searchExtent = this.map.extent;
                                geocoder.localSearchOptions = {
                                    minScale: 300000,
                                    distance: 50000
                                };
                            }
                            defaultSources.push(geocoder);
                        } else if (esriLang.isDefined(geocoder.singleLineFieldName)) {


                            //Add geocoders with a singleLineFieldName defined 
                            geocoder.locator = new Locator(geocoder.url);


                            defaultSources.push(geocoder);
                        }
                    }));
                }
                //add configured search layers to the search widget 
                var configuredSearchLayers = (this.config.searchLayers instanceof Array) ? this.config.searchLayers : JSON.parse(this.config.searchLayers);


                array.forEach(configuredSearchLayers, lang.hitch(this, function (layer) {


                    var mapLayer = this.map.getLayer(layer.id);
                    if (mapLayer) {
                        var source = {};
                        source.featureLayer = mapLayer;


                        if (layer.fields && layer.fields.length && layer.fields.length > 0) {
                            source.searchFields = layer.fields;
                            source.displayField = layer.fields[0];
                            source.outFields = ["*"];
                            searchLayers = true;
                            defaultSources.push(source);
                            if (mapLayer.infoTemplate) {
                                source.infoTemplate = mapLayer.infoTemplate;
                            }
                        }
                    }
                }));

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.