Adding a Marker to the Map after Geocoding

NumaGremling · ‎10-30-2013

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!

ManishkumarPatel · ‎10-30-2013

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

NumaGremling · ‎10-30-2013

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 🙂

ManishkumarPatel · ‎10-31-2013

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

ManishkumarPatel · ‎10-31-2013

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

NumaGremling · ‎10-31-2013

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!

JamesVillanueva · ‎11-01-2013

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.

NumaGremling · ‎11-01-2013

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.

JamesVillanueva · ‎11-04-2013

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>);

NumaGremling · ‎11-04-2013

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.