Esri / esri-leaflet-geocoder

helpers for using the ArcGIS World Geocoding Service in Leaflet
http://esri.github.io/esri-leaflet/examples/geocoding-control.html
Apache License 2.0
243 stars 97 forks source link

Esri-leaflet-geocoder: Component not rendering; How to connect providers in Production #266

Closed antonioOrtiz closed 3 years ago

antonioOrtiz commented 3 years ago

I am using the great esri-leaflet-geocoder plugin and can't get it to render in production.

I registered for a provider (ArcGIS Online Geocoding Service) and got a api key, and followed the documentation on the github page to add the api key:

var searchControl = L.esri.Geocoding.geosearch({
  providers: [
    L.esri.Geocoding.arcgisOnlineProvider({
      // API Key to be passed to the ArcGIS Online Geocoding Service
      useMapBounds: false,
      apikey: process.env.ESRI_API_KEY
    })
  ]
});

I was getting the following error:

TypeError: Cannot read property 'Geocoding' of undefined

So with that I went to the official documentation page of esri-leaflet-geocoder here and tried what was listed there. Turns out it seems more up to date.

var provider = ELG.arcgisOnlineProvider({ token: process.env.ESRI_API_KEY });

var searchControl = new ELG.Geosearch({
  useMapBounds: false,
  providers: [provider]
});

console.log('ELG.arcgisOnlineProvider() ', provider);

console.log('searchControl', searchControl);

It didn't work but the consoles seems to show that they indeed take the props listed in the documentation:

ELG.arcgisOnlineProvider()  
NewClass {_requestQueue: Array(0), _authenticating: false, options: {…}, _initHooksCalled: true, _eventParents: {…}}
options:
supportsSuggest: true
token: process.env.ESRI_API_KEY // In the log it's a string
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/"
__proto__: Object
_authenticating: false
_eventParents: {1: NewClass}
_initHooksCalled: true
_requestQueue: []
__proto__: NewClass

searchControl 
NewClass {options: {…}, _geosearchCore: NewClass, _leaflet_id: 1, _initHooksCalled: true}
options:
providers: Array(1)
0: NewClass
options: {token: process.env.ESRI_API_KEY // Again it is logging a string
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/", supportsSuggest: true}
_authenticating: false
_eventParents: {1: NewClass}
_initHooksCalled: true
_requestQueue: []
__proto__: NewClass
length: 1
__proto__: Array(0)
useMapBounds: false
__proto__: Object

So how can I get the 'searchControl' to work/render in Production?

gavinr commented 3 years ago

Typically the error TypeError: Cannot read property 'Geocoding' of undefined would mean that the libraries are not loaded properly on the page - could you please post a JSBin of what you're working on where the error is happening?

Here's a sample with the code from the README (working properly): https://jsbin.com/ronaleq/edit?html,output You may also find this tutorial helpful: https://developers.arcgis.com/esri-leaflet/geocode-and-search/search-for-an-address/

antonioOrtiz commented 3 years ago

Sorry for the late reply!

I can't seem to get a JSBin working I suppose because I have a database connected.

But I do have it hosted on heroku.

And this is it on github: master

I looked at the docs and changed my file from this:

     var searchControl = ELG.geosearch({
       useMapBounds: false,
       providers: [
         ELG.arcgisOnlineProvider({
           apikey: process.env.ESRI_API_KEY
         })
       ]
     });`

to this:

  useEffect(() => {
    const searchControl = L.esri.Geocoding.geosearch({
      position: 'topright',
      placeholder: 'Enter an address or place e.g. 1 York St',
      useMapBounds: false,
      providers: [
        L.esri.Geocoding.arcgisOnlineProvider({
          apikey: process.env.ESRI_API_KEY
        })
      ]
    }).addTo(map);

But to no avail!

gavinr commented 3 years ago

Hm, not sure we can provide much support without an example (I do not see the Geocoder widget (or even a map) on https://hillfinder.herokuapp.com/ -am I missing something?) Here's a sample with the code from the README (working properly): https://jsbin.com/ronaleq/edit?html,output .. you might see if you can replicate that, and focus on making sure the libraries are correctly loaded on the page.

antonioOrtiz commented 3 years ago

Hi there! Thank you for the sample code! Yes, What is on heroku doesn't have any errors... In the meantime I'll try the sample code. Thanks again.