Esri / esri-leaflet-renderers

Plugin for Esri Leaflet to use drawing information defined in the feature service
51 stars 33 forks source link

Rendering/Redrawing layers created from ArcGIS point features fails due to Uncaught TypeError #189

Open ryaa opened 1 year ago

ryaa commented 1 year ago

Describe the bug

When consuming ArcGIS FeatureServer layer(s) which contain point features, in the web app which uses esri-leaflet with esri-leaflet-renderers, rendering/redrawing those fails due to Uncaught TypeError

Reproduction

To reproduce please open this link https://stackblitz.com/edit/js-gvb3sg?file=index.html, set your ArcGIS API key in the below line

const apiKey = "YOUR_API_KEY";

and try to pan/zoom the map with the browser console opened. Note that there will be many errors as below

Screenshot 2023-08-07 at 9 07 47 AM Screenshot 2023-08-07 at 9 14 01 AM

In our app this causes the map to flicker and the points rendered disappears when the user pan/zoom.

Logs

See below or in the above screenshots

Uncaught TypeError: this._updateBounds is not a function
    setStyle Path.js:109
    setFeatureStyle FeatureLayer.js:310
    _redraw FeatureLayer.js:405
    redraw FeatureLayer.js:373
    _updateLayer FeatureLayer.js:103
    createLayers FeatureLayer.js:135
    _addFeatures FeatureManager.js:254

System Info

leaflet: 1.9.3 or 1.9.4 esri-leaflet: ^3.0.10 esri-leaflet-renderers: ^3.0.0

or see the link to the stackblitz project in the Reproduction section above

The problem is reproducible in Chrome Version 115.0.5790.170 and Firefox 115.0.3 (64-bit) on MacOS Ventura 13.5 (22G74)

Additional Information

It seems that when the esri-leaflet creates layers from ArcGIS feature server metadata for points, the resulting layer does not have _updateBounds function and when the leaflet tries to refresh/redraw this layer it fails with an error. Please note that the problem seems to exist only for Points with the specific style configuration. Potentially, the fix might need to be done in the leaflet to check if _updateBounds function is defined - see https://github.com/Leaflet/Leaflet/blob/main/src/layer/vector/Path.js#L109

gavinr-maps commented 1 year ago

Hi @ryaa, thank you for logging this issue. Just to check: does the layer work ok if not using the esri-leaflet-renderers module? If so, sounds like this is probably an issue with esri-leaflet-renderers and we should move this discussion over to that repo.

ryaa commented 1 year ago

@gavinr-maps The layer, which has the problem with esri-leaflet (or esri-leaflet-renderers) is a sample Hospital General Information ArcGIS layer - see https://services1.arcgis.com/4yjifSiIG17X0gW4/arcgis/rest/services/Hospital_General_Information/FeatureServer/0 or https://www.arcgis.com/apps/mapviewer/index.html?url=https://services1.arcgis.com/4yjifSiIG17X0gW4/ArcGIS/rest/services/Hospital_General_Information/FeatureServer/0&source=sd We have the same issue in our system with another, private ArcGIS custom layer, however I can not share it but, this is the problem is the same and related to ArcGIS Points features rendered by esri-leaflet/esri-leaflet-renderers and throwing the same errors. Plus the layer artifacts flickers and may disappear when the user pan and zoom.

gavinr-maps commented 1 year ago

Ok, thanks. I think this issue is related to the esri-leaflet-renderers package since the errors do not happen when I remove that: https://stackblitz.com/edit/js-xhcklp?file=index.html

Moving this to the esri-leaflet-renderers repository.