Tweak Geocoder Widget to Activate Layer Popup?

2324
7
11-04-2014 01:55 PM
BrianO_keefe
Regular Contributor II

What I want is the following:

  1. User enters their address into Custom-Geocoder Input Field
  2. Address is found
  3. Instead of 'Location' popup window that just shows the address searched for...
  4. Cause a click to happen at the coords where the 'Location' popup was going to fire

How difficult would this be?

I would PREFER this to be a custom widget so that I could choose to add this to projects that ALREADY have the GeoCoder. Kinda like a GeoFinder widget?

Any ideas?

0 Kudos
7 Replies
BrianO_keefe
Regular Contributor II

I kind of thought it might have to modified in the 'onFindResults' method inside of Widget.js

      onFindResults: function(results) {

        //Check to see if the user typed an MGRS or USNG string

        this.lastMgrsResult = this.lookupMgrs(results.results.value);

        if (null !== this.lastMgrsResult) {

          // Get reference ellipsoid coordinates of the current coordinate system

          // var mapWkid = this.map.spatialReference.wkid;

          // var srWkid = csUtils.isProjectedCS(mapWkid) ?

          //csUtils.getGeoCSByProj(mapWkid) : mapWkid;

          //Make a new object just like the objects in results.results.results

          var point = new Point(

            this.lastMgrsResult.longitude,

            this.lastMgrsResult.latitude,

            new SpatialReference({

              wkid: 4326 //srWkid   should use the ellipsoid SR of the current coordinate system

            }));

          var extent = this.map.extent.centerAt(point);

          var feature = new Graphic(point);

          var resultObject = {

            extent: extent,

            feature: feature,

            name: this.lastMgrsResult.text

          };

          //Insert at start of results list

          results.results.results.unshift(resultObject);

        }

      },

I tried commenting out from var extent on and it didn't seem to affect the widget... so maybe I'm wrong?

0 Kudos
StevenGraf1
Regular Contributor

You may want to check out this application created by Tim Witt.  This populates several text boxes with coordinate information based on an address search and vice versa.

Steven

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Brain,

   Was this meant to be in the Web AppBuilder for ArcGIS‌ space?

0 Kudos
BrianO_keefe
Regular Contributor II

I'm not actually sure Robert. I thought this might just be a Javascript API question but I suppose since it is a GeoCoder Widget from WAB that I'm referencing then maybe it should be? How do I move it?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Brian,

   The GeoCoder dijit component is doing what it is designed to do, what you are attempting to do is customize the Geocoder widget of the WAB to handle the result differently, so yes this does belong in the WAB space or here in the WAB custom widgets group. What you are wanting to do is not a simple couple of lines of code kind of change. The way I see it you would need to get the coordinates of the geocoded address and use them to programmatically fire a mouse click event. Well the question is would this new click event be emitted for the map or the Layer ( I don't actually know the answer to that one). It would require some testing to see if you could programmatically cause a layers popup to fire based on an XY. I don't have the answers for you but maybe this will help with a plan of attack for your development.

0 Kudos
BrianO_keefe
Regular Contributor II

I see.

That's right. I forget. The Geocoder widget folder doesn't actually hold ALL of the widget code for that widget.

Hmmmm.... back to the drawing board.

0 Kudos
KevinMacLeod4
Frequent Contributor

I do this on my site www.sagis.org/map

This is WAB 2.12 but worked since 2.8 as well.  Add the few lines /// kevin /// section between these comments, is what I added.

/////////////// snipped////////

/***********************************
* Mehtods for control result menu
* *********************************/
_onSearchDijitClick: function() {
this._resetSelectorPosition('.searchMenu');
},

_onSelectSearchResult: function(evt) {
var target = evt.target;
while(!(html.hasAttr(target, 'data-source-index') && html.getAttr(target, 'data-index'))) {
target = target.parentNode;
}
var result = null;
var dataSourceIndex = html.getAttr(target, 'data-source-index');
var dataIndex = parseInt(html.getAttr(target, 'data-index'), 10);
// var sources = this.searchDijit.get('sources');

if (dataSourceIndex !== 'all') {
dataSourceIndex = parseInt(dataSourceIndex, 10);
}
if (this.searchResults && this.searchResults[dataSourceIndex] &&
this.searchResults[dataSourceIndex][dataIndex]) {
result = this.searchResults[dataSourceIndex][dataIndex];
this.searchDijit.select(result);
}

//////kevin m  customized code

setTimeout(lang.hitch(this, function () {
// added by me
var mpPt;
if (result.feature.geometry.type === "point") {
mpPt = result.feature.geometry;
} else {
mpPt = result.feature.geometry.getExtent().getCenter();
}
var scrPt = this.map.toScreen(mpPt);
this.map.emit("click", { bubbles: true, cancelable: true, mapPoint: mpPt, screenPoint: scrPt });
// end of added by me
}), 100);

/////kevin m  customized code

},

_hideResultMenu: function() {
query('.show-all-results', this.searchResultsNode).style('display', 'block');
query('.searchMenu', this.searchResultsNode).style('display', 'none');
},

_showResultMenu: function() {
html.setStyle(this.searchResultsNode, 'display', 'block');
/////////////////

0 Kudos