topic Re: Adding a Marker to the Map after Geocoding in ArcGIS JavaScript Maps SDK Questions

Adding a Marker to the Map after Geocoding

NumaGremling — Sat, 11 Dec 2021 14:34:51 GMT

Hi everyone,

I�??ve been struggling with this for hours so I need to ask here. I am trying to search an address in my geocoder and then, after zooming and centering, also add a marker to that place. This seemingly simple task seems to be pretty complicated for a beginner.
It seems like all samples that are doing what I want in AMD are all using the Locator, but not the Geolocator. So, I ended up translating this code, but I get stuck.

First, here is the legacy code, where I took out everything that I do not need (I do not need a pop up, etc.)

        // add a graphics layer for geocoding results
        map.addLayer(new esri.layers.GraphicsLayer({
          id: "results"
        }));

        // create the geocoder
        geocoder = new esri.dijit.Geocoder({ 
          autoNavigate: false, // do not zoom to best result
          maxLocations: 20, // increase number of results returned
          map: map,
          arcgisGeocoder: {
            url: "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
            name: "Esri World Geocoder",
            placeholder: "Find a place",
            sourceCountry: "USA" // limit search to the United States
          }
        }, "search");
        geocoder.startup();

        var symbol = new esri.symbol.PictureMarkerSymbol({
          "angle":0,
          "xoffset":0,
          "yoffset":10,
          "type":"esriPMS",
          "url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
          "contentType":"image/png",
          "width":24,
          "height":24
        });


        dojo.connect(geocoder, "onFindResults", function(response) {
          var l = map.getLayer("results");
          l.clear();
          map.infoWindow.hide();
          dojo.forEach(response.results, function(r) {
            r.feature.setSymbol(symbol);
            l.add(r.feature);
          });
        });

And here is my AMD translation:

  // add graphics layer for result
  mainMap.addLayer(new GraphicsLayer({
          id: "results"
        }));  
  
  // create geocoder
  var geocoder = new Geocoder({
   map: mainMap,
   autoComplete: true,
   arcgisGeocoder: {
    suffix: " Long Beach, CA",
    name: "Esri World Geocoder",
    placeholder: "find address within Long Beach"
    },
  }, "addressFindDIV");  // name of the div it is referring to
  geocoder.startup();
  

  // create new PictureMarkerSymbol object using a JSON object
  var symbol = new PictureMarkerSymbol({
          "angle":0,
          "xoffset":0,
          "yoffset":10,
          "type":"esriPMS",
          "url":"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png",
          "contentType":"image/png",
          "width":24,
          "height":24
        });
    
  geocoder.on("find-results", function(response){
          var l = mainMap.getLayer("results");
          l.clear();
          mainMap.infoWindow.hide();
          array.forEach(response.results, function(r) {
            r.feature.setSymbol(symbol);
            l.add(r.feature);
  
           });
        });

I am absolutely not sure about the following line:

dojo.forEach(response.results, function(r) {

I changed it to

array.forEach(response.results, function(r) {

But that does not work either and I am not sure if it is the right approach.

I am not tied to this sample; if any other approach is recommended or easier, please share it with me. As long as I can see a symbol (a simple point is fine) I would be happy.

Thank you!

Re: Adding a Marker to the Map after Geocoding

ManishkumarPatel — Wed, 30 Oct 2013 08:25:19 GMT

Hi,

You can try using a for loop instead if that works for you:

for eg:

for(var counter=0;counter>response.results.length;counter++){
//you could debug and find if you are getting any features and then try to set the symbols and add to map.
}

Let me know if this works for you.

Best Regards,
Manish

Re: Adding a Marker to the Map after Geocoding

NumaGremling — Sat, 11 Dec 2021 14:34:53 GMT

Thank you very much. I gave that a try, but I am not implementing it correctly, I guess. It will break my whole code:

 geocoder.on("find-results", function(response){
  var l = mainMap.getLayer("results");
  l.clear();
  mainMap.infoWindow.hide(); 
 for(var counter=0;counter>response.results.length;counter++){   
             function(r) {
      r.feature.setSymbol(symbol);
            l.add(r.feature);   
    }
   }
        });

Any suggestions? I'm fairly new to the API and JavaScript, so please point out the even most obvious stuff. Thanks 🙂

Re: Adding a Marker to the Map after Geocoding

ManishkumarPatel — Sat, 11 Dec 2021 14:34:56 GMT

Thank you very much. I gave that a try, but I am not implementing it correctly, I guess. It will break my whole code:
     geocoder.on("find-results", function(response){
         var l = mainMap.getLayer("results");
         l.clear();
         mainMap.infoWindow.hide();
     for(var counter=0;counter>response.results.length;counter++){      
              function(r) {
          r.feature.setSymbol(symbol);
             l.add(r.feature);            
                 }
             }
         });

 
Any suggestions? I'm fairly new to the API and JavaScript, so please point out the even most obvious stuff. Thanks

Hi,

Sorry for the late reply.

What I see from your code snippet is that there is a slight change you might need as below:

     geocoder.on("find-results", function(response){
         var l = mainMap.getLayer("results");
         l.clear();
         mainMap.infoWindow.hide();
     for(var counter=0;counter>response.results.length;counter++){      
//-- this is not required. Instead you will need to create an new object and loop through the //response.results which will be either an array or a JSON object depending on the response from the //geocoder.
              function(r) {   
          r.feature.setSymbol(symbol);
             l.add(r.feature);            
                 }
             }
         });

Also if possible could you post or attach the complete code so it�??s easier to run at my end.
Let me know.

Best Regards,
Manish

Thank you very much. I gave that a try, but I am not implementing it correctly, I guess. It will break my whole code:
     geocoder.on("find-results", function(response){
         var l = mainMap.getLayer("results");
         l.clear();
         mainMap.infoWindow.hide();
     for(var counter=0;counter>response.results.length;counter++){      
              function(r) {
          r.feature.setSymbol(symbol);
             l.add(r.feature);            
                 }
             }
         });

 
Any suggestions? I'm fairly new to the API and JavaScript, so please point out the even most obvious stuff. Thanks

Hi,

Sorry for the late reply.

What I see from your code snippet is that there is a slight change you might need as below:

     geocoder.on("find-results", function(response){
         var l = mainMap.getLayer("results");
         l.clear();
         mainMap.infoWindow.hide();
     for(var counter=0;counter>response.results.length;counter++){      
//-- this is not required. Instead you will need to create an new object and loop through the //response.results which will be either an array or a JSON object depending on the response from the //geocoder.
              function(r) {   
          r.feature.setSymbol(symbol);
             l.add(r.feature);            
                 }
             }
         });

Also if possible could you post or attach the complete code so it�??s easier to run at my end.
Let me know.

Best Regards,
Manish

Thank you very much. I gave that a try, but I am not implementing it correctly, I guess. It will break my whole code:
     geocoder.on("find-results", function(response){
         var l = mainMap.getLayer("results");
         l.clear();
         mainMap.infoWindow.hide();
     for(var counter=0;counter>response.results.length;counter++){      
              function(r) {
          r.feature.setSymbol(symbol);
             l.add(r.feature);            
                 }
             }
         });

 
Any suggestions? I'm fairly new to the API and JavaScript, so please point out the even most obvious stuff. Thanks

Hi,

Sorry for the late reply.

What I see from your code snippet is that there is a slight change you might need as below:

     geocoder.on("find-results", function(response){
         var l = mainMap.getLayer("results");
         l.clear();
         mainMap.infoWindow.hide();
     for(var counter=0;counter>response.results.length;counter++){      
//-- this function inside the for loop is not required. Instead you will need to create new object and loop through the response.results which will be either an array or a JSON object depending on the response from the geocoder.
           function(r) {   
            r.feature.setSymbol(symbol);
             l.add(r.feature);            
                 }
             }
         });

Also if possible could you post or attach the complete code so it�??s easier to run at my end.
Let me know.

Best Regards,
Manish

Re: Adding a Marker to the Map after Geocoding

ManishkumarPatel — Sat, 11 Dec 2021 14:34:59 GMT

Thank you very much. I gave that a try, but I am not implementing it correctly, I guess. It will break my whole code:
    geocoder.on("find-results", function(response){
        var l = mainMap.getLayer("results");
        l.clear();
        mainMap.infoWindow.hide(); 
    for(var counter=0;counter>response.results.length;counter++){      
             function(r) {
         r.feature.setSymbol(symbol);
            l.add(r.feature);            
                }
            }
        });
Any suggestions? I'm fairly new to the API and JavaScript, so please point out the even most obvious stuff. Thanks 🙂

Hi,

Sorry for the late reply.

What I see from your code snippet is that there is a slight change you might need as below:

      geocoder.on("find-results", function(response){
          var l = mainMap.getLayer("results");
          l.clear();
          mainMap.infoWindow.hide();
      for(var counter=0;counter>response.results.length;counter++){      
 //-- this is not required. Instead you will need to create an new object and loop through the //response.results which will be either an array or a JSON object depending on the response from the //geocoder.
               function(r) {  
           r.feature.setSymbol(symbol);
              l.add(r.feature);            
                  }
              }
          });

Also if possible could you post or attach the complete code so it�??s easier to run at my end.
Let me know.

Best Regards,
Manish

Re: Adding a Marker to the Map after Geocoding

NumaGremling — Thu, 31 Oct 2013 17:29:44 GMT

Thank you so much for your help. I have attached the code; it is zipped because I cannot upload an HTML file. The part I am struggling with can be found in lines 382-392. They are currently commented out, as uncommenting breaks my script. The CSS on top will look messy, but as a beginner it is easier for me to work that way; I will take it out when I am done.

Thank you so much again!

Re: Adding a Marker to the Map after Geocoding

JamesVillanueva — Fri, 01 Nov 2013 19:45:09 GMT

I saw a few issues. The on object wasn't being imported and the use of the on event was not setup correctly. Also, when the response object comes back to the callback, it comes as response.results.results instead of response.results. Give it a try and see if this fixes your issues. The code is attached.

Re: Adding a Marker to the Map after Geocoding

NumaGremling — Fri, 01 Nov 2013 21:32:51 GMT

Thank you very much.

The application does not break anymore but it still does not show the marker when using the geocoder. Have you tried to run it on your side?

One more question about the dojo/on:

the use of the on event was not setup correctly.

Why would the following lines run:

mapButton.on("click", changeMap);

but not this one:

geocoder.on("find-results",�?�

It's hard to grasp all these differences as a beginner, and if you have general suggestions about how to approach on events, please let me know.

Thank you again.

Re: Adding a Marker to the Map after Geocoding

JamesVillanueva — Mon, 04 Nov 2013 18:57:19 GMT

I did see the markers show up on my box. I will check it on another machine tonight.

Generally with the on events, I try to stick with the examples on the Dojo API reference:

http://dojotoolkit.org/api/

This is the example I normally follow:

on(button, "click", clickHandler);

on(<Object your monitoring>,<function your watching minus the on, onClick becomes "click">, <function to be called>);

Re: Adding a Marker to the Map after Geocoding

NumaGremling — Tue, 05 Nov 2013 04:24:58 GMT

I just tried it again to make sure, and I realized something. The address I always use to test (77 Market, 2127 E 17th St, Long Beach, California) will not show a marker. However, I just realized that when I zoom out I suddenly see the marker; although in the wrong place. Generally, the marker will only show up after searching a second time (i.e. it will not show up when searching for the first time after the application has loaded). The marker also does not show up for every address, and most of the time it will just be dropped right at the place you can see in the attached screenshot.

[ATTACH=CONFIG]28860[/ATTACH]

I assume that we are close but that there might be a minor logical mistake.

Thank you so much again for your help!

PS: I am attaching an updated script, since a lot has happened since asking this question; although the geocoder part is the exact same. The geocoder part starts in line 632.

Re: Adding a Marker to the Map after Geocoding

JamesVillanueva — Tue, 05 Nov 2013 13:09:27 GMT

I haven't used the suffix parameter in my work with the geocoder. It appears that all it does is append it to the end of the address. That being said, you shouldn't enter an address with the city name if you are using the suffix. The second thing I see is that the 77 market is throwing off the geocoder as well. When I just put in the address as 2127 E 17th St it appears to go to the correct location. Please verify you are seeing the same.

Re: Adding a Marker to the Map after Geocoding

NumaGremling — Tue, 05 Nov 2013 16:34:19 GMT

You are right; I copied the whole address although I only entered the beginning part.

I now simply typed in 2127 E 17th St without using the dropdown to help me and it went to the right location and it added a marker (two, actually, huh?). Now, I just realized that anytime I type something in but do not use the results dropdown it will take me to a location and add marker. If I click on one of the suggestions in the results dropdown it will, in most cases, not add a marker (or add it in that one spot in the previous screenshot). Very, very strange.

Re: Adding a Marker to the Map after Geocoding

JamesVillanueva — Tue, 05 Nov 2013 16:43:17 GMT

In my experience with the geocoder, it was built more as Point of Interest (POI) locator. It appear to be build to find things like coffee shops where you'd expect more than one result. In my project, I just limit results to the first one that comes back. With that being said, I usually get correct results back as the first result, but not always. For instance, I was looking for the Statue of Liberty and instead the first result was the ferry terminal to get you to the Statue of Liberty. I'm glad you've got it up and running.

Re: Adding a Marker to the Map after Geocoding

NumaGremling — Tue, 05 Nov 2013 17:05:22 GMT

I have been testing many different addresses now, and I come to the conclusion that it behaves very strangely.

Try this:
Type in: 200 belmont avenue and hit Enter. It will take you to a place and add multiple markers somewhere on that street. Now type in the same thing, but instead of hitting Enter you will choose the first suggested address (the same address, actually) and see what happens. It will zoom out and not add markers anywhere (the ones you see are from your previous successful search). Does it attach the suffix to the suggested address and get confused?

I hope I am making sense; it is very hard to describe a strangely behaving geocoder. This discussion might also have moved from adding a marker to understanding how the geocoder reacts to inputs; maybe I should start a new topic. Either way, thank you so much for your help!

Oops, and while I was writing this your replied already! So would you say that using the geocoder to find an address might not be the best approach? First of all it is hard to see what the differences between the Geocoder and the Locator are when looking at the reference. They both have the same purpose? But the Geocoder offers more, especially styling etc.? So I'll pick that one... That would be my typical reasoning; not sure anymore how one is supposed to read the reference pages and make sense out of certain things.

Re: Adding a Marker to the Map after Geocoding

JamesVillanueva — Tue, 05 Nov 2013 17:17:05 GMT

I agree, the documentation describing one vs the other should be better. I think if your just looking for an address, locator makes more sense. I also understand it not as appealing choice.

I would start a new topic about understanding geocoder inputs. It was also be interesting to know why you can specify a suffix on the geocoder, but it fails to ignore it if it's in the input string.