AnsweredAssumed Answered

Multiple Custom Geocoders in Web Map

Question asked by afrocodes on Mar 23, 2015
Latest reply on Mar 23, 2015 by afrocodes

Hi there,

 

I need help with adding multiple custom geocoders to my web map that's based on the Public Information Template.

 

Problem:

I can get one of my custom geocoders to display on the map. But getting both of them to display as an option for users to select in a drop down has been a struggle.

 

I have tried creating a variable called "myGeocoders" that lists both geocoders and putting it in the options object below, but the map still only displayed one geocoder.  In the code below, I tried listing both geocoders separately along with the ESRI geocoder to see if it will show, and it still only displayed one geocoder. Same if I take out the ESRI geocoder.

 

 

Code below:

 _createGeocoderOptions: function() {
            var hasEsri = false, esriIdx, geocoders = lang.clone(this.config.helperServices.geocode);
            // default options
               
               var myGeocoders = [{
          url: "http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_CompositeLocator/GeocodeServer",
          name: "MD_CompositeLocator",
          "singleLineFieldName": "SingleLine"
          },{
          url: "http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_ParcelAccountNumberLocator/GeocodeServer",
          name: "MD_ParcelAccountNumberLocator",
          "singleLineFieldName": "Single Line Input"
        }];
               
               
            var options = {
                map: this.map,
                autoNavigate: true,
                autoComplete: true,
                arcgisGeocoder: false,
                geocoders: null,
            };
            //only use geocoders with a url defined
            geocoders = array.filter(geocoders, function (geocoder) {
                if (geocoder.url) {
                    return true;
                }
                else{
                    return false;
                }
            });
            // at least 1 geocoder defined
            if(geocoders.length){
                // each geocoder
            array.forEach(geocoders, lang.hitch(this, function(geocoder) {
                   // if esri geocoder
                    if (geocoder.url && geocoder.url.indexOf(".arcgis.com/arcgis/rest/services/World/GeocodeServer") > -1) {
                        hasEsri = true;
                        geocoder.name = "Esri World Geocoder";
                        geocoder.outFields = "Match_addr, stAddr, City";
                        geocoder.singleLineFieldName = "Single Line";
                        geocoder.esri = true;
                        geocoder.placefinding = true;
                        geocoder.placeholder = this.config.i18n.general.find;
                    }  
                         
                         //if not esri geocoder
                            if (geocoder.url && geocoder.url.indexOf("http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_CompositeLocator/GeocodeServer") > -2) {
                        hasEsri = false;
                        geocoder.name = "MD_CompositeLocator";
                        geocoder.outFields = "Street, City, State, ZIP";
                        geocoder.singleLineFieldName = "SingleLine";
                        geocoder.esri = false;
                        geocoder.placefinding = true;
                        geocoder.placeholder = "Find a Place";
                              
                    }     
                         
                         //if not esri geocoder
                            if (geocoder.url && geocoder.url.indexOf("http://geodata.md.gov/imap/rest/services/GeocodeServices/MD_ParcelAccountNumberLocator/GeocodeServer") > -1) {
                        hasEsri = false;
                        geocoder.name = "MD_ParcelAccountNumberLocator";
                        geocoder.outFields = "*";
                        geocoder.singleLineFieldName = "Single Line Input";
                        geocoder.esri = false;
                        geocoder.placefinding = true;
                        geocoder.placeholder = "Find a Parcel Point Account ID";
                              
                    }     
                         
                         
                
                    })) ;        
                    
                    
                //only use geocoders with a singleLineFieldName that allow placefinding unless its custom
                geocoders = array.filter(geocoders, function (geocoder) {
                    if (geocoder.name && geocoder.name === "Custom") {
                        return (esriLang.isDefined(geocoder.singleLineFieldName));
                    } else {
                        return (esriLang.isDefined(geocoder.singleLineFieldName) && esriLang.isDefined(geocoder.placefinding) && geocoder.placefinding);
                    }
                });
                // if we have an esri geocoder
                if (hasEsri) {
                    for (var i = 0; i < geocoders.length; i++) {
                        if (esriLang.isDefined(geocoders[i].esri) && geocoders[i].esri === true) {
                            esriIdx = i;
                            break;
                        }
                    }
                }
                // set autoComplete
                options.autoComplete = true;
                // set esri options
                if (hasEsri) {
                    options.minCharacters = 0;
                    options.maxLocations = 5;
                    options.searchDelay = 100;
                }
                //If the World geocoder is primary enable auto complete 
                if (hasEsri && esriIdx === 0) {
                    options.arcgisGeocoder = geocoders.splice(0, 1)[0]; //geocoders[0];
                    if (geocoders.length > 0) {
                        options.geocoders = geocoders;
                    }
                } else {
                    options.arcgisGeocoder = false;
                    options.geocoders = geocoders;
                }
            }
            return options;
        },
        // create geocoder widgets
        _createGeocoders: function () {
               //add geocoder result layer
            var resultsLayer = new esri.layers.GraphicsLayer({ id: "resultsLayer" });   //geocoder symbol code
            this.map.addLayer(resultsLayer);
          
            // get options
            var createdOptions = this._createGeocoderOptions();
            // desktop geocoder options
            var desktopOptions = lang.mixin({}, createdOptions, {
                theme: this.css.desktopGeocoderTheme
            });
            // mobile geocoder options
            var mobileOptions = lang.mixin({}, createdOptions, {
                theme: this.css.mobileGeocoderTheme
            });
            // desktop size geocoder
            this._geocoder = new Geocoder(desktopOptions, dom.byId("geocoderSearch"));
            ;
               this._geocoder.startup();
               
               
                 //add feature to map                                          //geocoder symbol
            function addFeatureToMap(geometry) {
                resultsLayer.clear();
                var pictureMarkerSymbol = new PictureMarkerSymbol({ "angle": 0, "xoffset": 2, "yoffset": 8, "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Basic/RedStickpin.png", "contentType": "image/png", "width": 24, "height": 24 });
                resultsLayer.add(new Graphic(geometry, pictureMarkerSymbol));
            }
               
               
               //zoom to level 19 after press geocoder - MIO
               on(this._geocoder, 'select', lang.hitch(this, function (response) {
           console.log("set zoom function");
             console.log(this.map);
                    this.map.setZoom(19);
                              
            }));
               
            // geocoder results
            on(this._geocoder, 'find-results', lang.hitch(this, function (response) {
                if (!response.results || !response.results.results || !response.results.results.length) {
                    alert(this.config.i18n.general.noSearchResult);
                } else {                                                //geocoder symbol results
                    addFeatureToMap(response.results.results[0].feature.geometry); 
                         if (history.pushState) {
                                   //browser supported.
                                        //refresh the URL with the geocoder result
                                          console.log("Push state is supported. Geocoder result: ");
                              console.log(this._geocoder.value);
                              window.history.pushState(null,null,"?address=" + this._geocoder.value);
                                   } 
                              
                              
                }
            }));
          
               
               
            // mobile sized geocoder
            this._mobileGeocoder = new Geocoder(mobileOptions, dom.byId("geocoderMobile"));
            this._mobileGeocoder.startup();
            // geocoder results
            on(this._mobileGeocoder, 'find-results', lang.hitch(this, function (response) {
                if (!response.results || !response.results.results || !response.results.results.length) {
                    alert(this.config.i18n.general.noSearchResult);
                } else {    //geocoder symbol results and all below until keep geocoder values in sync
                    addFeatureToMap(response.results.results[0].feature.geometry);
                                   //refresh the URL with the geocoder result
                              if (history.pushState) {
                                   //browser supported.
                                        //refresh the URL with the geocoder result
                                          console.log("Push state is supported. Geocoder result: ");
                              console.log(this._geocoder.value);
                              window.history.pushState(null,null,"?address=" + this._geocoder.value);
                                   }
                         }
                this._hideMobileGeocoder();
            }));
               
                      on(this._geocoder, 'clear', lang.hitch(this, function () {
                resultsLayer.clear();
            }));                                               //rest of geocoder symbol result

            on(this._mobileGeocoder, 'clear', lang.hitch(this, function () {
                resultsLayer.clear();
            }));                                                //rest of geocoder symbol result
               
            // keep geocoder values in sync
            this._geocoder.watch("value", lang.hitch(this, function () {
                var value = arguments[2];
                this._mobileGeocoder.set("value", value);
            }));
            // keep geocoder values in sync
            this._mobileGeocoder.watch("value", lang.hitch(this, function () {
                var value = arguments[2];
                this._geocoder.set("value", value);
            }));
            // geocoder nodes
            this._mobileGeocoderIconNode = dom.byId("mobileGeocoderIcon");
            this._mobileSearchNode = dom.byId("mobileSearch");
            this._mobileGeocoderIconContainerNode = dom.byId("mobileGeocoderIconContainer");
            // mobile geocoder toggle 
            if (this._mobileGeocoderIconNode) {
                on(this._mobileGeocoderIconNode, "click", lang.hitch(this, function () {
                    if (domStyle.get(this._mobileSearchNode, "display") === "none") {
                        this._showMobileGeocoder();
                    } else {
                        this._hideMobileGeocoder();
                    }
                }));
            }
            var closeMobileGeocoderNode = dom.byId("btnCloseGeocoder");
            if(closeMobileGeocoderNode){
                // cancel mobile geocoder
                on(closeMobileGeocoderNode, "click", lang.hitch(this, function () {
                    this._hideMobileGeocoder();
                }));
            }
        },

 

Background Info:

Level: newbie JS developer.

Using ESRI JavaScript API - ESRI's Public information web map template: Esri/public-information-map-template-js · GitHub

 

 

This code was added to the main.js file in the _init: function ().

 

 

Any tips?

 

Thanks.


           
   

Outcomes