new esri leaflet plugin samples

[JohnGravois]

we've added some new plugin samples to the Esri Leaflet website that show renderers from ArcGIS Online, accessing GP services, and searching feature layers and map services at the same time as you geocode...

Esri Leaflet Quickstart | Esri Leaflet/

enjoy!

[NickO_Day]

John,

The new samples are great!  I was looking at the geocoding sample (here)... very cool!  Do you guys have any plans for releasing a sample that shows how to integrate geocoding from a custom service instead of one from AGOL?  Don't want to reinvent the wheel here if it's already on your list.

Thanks again!

[JohnGravois]

the closest available sample demonstrates how to plug in a MapService provider, but you could use similar logic to insert your own geocoding provider.

i'd be happy to review a jsfiddle or jsbin if you get stuck.

if we get a simple sample together, i think it would be nice to add it to our website.

[PatrickMcKinney1]

John,

I've encountered a weird quirk with the Geocoding plugin for Leaflet. When I use the ESRI World Geocoder, the map zooms in to the results.

However, if I use my organization's geocoding service and have the ESRI geocoder turned off, the marker is placed at the right location, but the map zooms out to a multi-state view.

The sample codes is on Codeacademy. I couldn't get JS Fiddle to work.

Any help or direction pointing is most helpful.

Thanks,

Patrick

[JohnGravois]

your geocoding service is returning a bogus extent.

http://gis.ccpa.net/arcgiswebadaptor/rest/services/CompositeLocator/GeocodeServer/find?text=1900+gra...

you have a couple different options to resolve the problem:

1. figure out how to fix the locator itself

2. override the plugin behavior in your leaflet app to just center on the address and a fixed zoom level instead of relying on the extent your service is passing back.

[PatrickMcKinney1]

John,

Is there sample code available to center the map on the geocode result at a specified zoom layer?  I added the code below, which moved the marker to the correct location.  However, the console log reports "Uncaught TypeError: Cannot read property 'lat' of null."

Also, the marker does not redraw unless the location is within the current view.  

addressSearch.on('results', function(data){

  results.clearLayers();

  for (var i = data.results.length - 1; i >= 0; i--) {

   results.addLayer(L.marker(data.results[0].latlng));

   map.panTo(results); 

   }

  });

I changed results to results[0] to remove multiple markers from showing up, in case you were wondering.

Thanks,

Patrick

[JohnGravois]

try map.setZoomAround(<LatLng>, <zoom>);

searchControl.on('results', function(data){
    results.clearLayers();
    // no need to use a for loop if you just want a reference to first match
    // for (var i = data.results.length - 1; i >= 0; i--) {
    //   results.addLayer(L.marker(data.results.latlng));
    // }
    var resultLocation = data.results[0].latlng;
    results.addLayer(L.marker(resultLocation));
    // http://leafletjs.com/reference.html#map-setzoomaround
    map.setZoomAround(resultLocation, 10);
  });

you can find a working sample here.

[PatrickMcKinney1]

John,

Once again, thanks for your assistance.  This resolves the issue when using the ArcGIS World Geocoder.

Thanks again for your help,

Patrick