Thanks!
I was also able to recreate the issue within Chrome & Safari. Firefox works fine for me
opened 06:59PM - 31 Jan 18 UTC
closed 02:19PM - 22 Jan 20 UTC
bug :lady_beetle:
Perhaps there's just an upper limit to the size/number of `featureCollection` la… yers that can be added to a map?...
**mapbox-gl-js version**: 0.44.0
### Steps to Trigger Behavior
1. Visit https://citystrides.com/users/5560/map with Safari or Chrome on a Mac (I don't have a Windows computer to test with, and the page loads successfully with Firefox)
2. The base Mapbox map loads, but the red lines do not
3. View the console & see the error
Compared to a functional page...
1. Visit https://citystrides.com/users/1/map
2. View base Mapbox map along with the red lines
### Expected Behavior
A map should display with tons of red lines on it. The red lines are a bunch of encoded polyline layers.
### Actual Behavior
The layers don't draw & the console contains an error.
Error as reported in Chrome:
```
evented.js:109 Error: RangeError: Maximum call stack size exceeded
at Actor.receive (actor.js:81)
Evented.fire @ evented.js:109
```
Error as reported in Safari:
```
[Error] Error: RangeError: Maximum call stack size exceeded.
receive — actor.js:81
[native code]
fire (mapbox-gl.js:521:1250)
fire (mapbox-gl.js:521:1091)
fire (mapbox-gl.js:521:1091)
(anonymous function) (mapbox-gl.js:199:1411)
(anonymous function) (mapbox-gl.js:199:2541)
receive (mapbox-gl.js:501:894)
(anonymous function)
```
### Relevant Site Code
While all of this code is available within the page source itself, I've included the relevant section of code I'm using to generate this view below for easier review.
The `<%= raw @encoded_polylines %>;` bit is an array of many encoded polylines as constructed within my Rails app.
```
mapboxgl.accessToken = 'TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: center_value,
zoom: zoom_value
});
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
var encodedPolylines = <%= raw @encoded_polylines %>;
var arrayLength = encodedPolylines.length;
var mapZoom = null;
var mapCenter = null;
var featureCollection = [];
for (var i = 0; i < arrayLength; i++) {
featureCollection.push({
type: 'Feature',
geometry: polyline.toGeoJSON(encodedPolylines[i])
});
}
map.on('style.load', function(){
map.addSource('polylineCollection', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: featureCollection
}
});
map.addLayer({
id: 'polylineCollection',
type: 'line',
source: 'polylineCollection',
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#DD251E',
'line-width': 2
}
});
});
```
### Further Details
- Raw encoded polyline array for non-functional page: [polylines.txt](https://github.com/mapbox/mapbox-gl-js/files/1691906/polylines.txt)
- The user for the [functional page](https://citystrides.com/users/1/map) linked above has more individual encoded polylines than the non-functional user, so it doesn't seem to be a count limit
- Since it's likely not a layer count issue, the only two possibilities I can think of are
- **size** - perhaps the non-functional user has larger individual encoded polylines than the functional user
- **data integrity** - perhaps the non-functional user has one/some encoded polylines that are 'broken' somehow
Small Update: I’ve found that it’s something within Mapbox’s code… An older version of their plugin works properly, while later versions do not. I’ve left the old version in place - so you should all be able to see your LifeMap again. I’ll continue working with Mapbox to see if I can help figure this out for their future versions.
2 Likes
