Strange thing happening several times today. Using Safari on my ipad. Going back and forth between various pages with maps, and suddemly the map just disappears. First screen shot I was planning a route with Route Builder, suddenly looks like this.
Tried going back to main page to start over, no luck. Killed this tab and opened a new one. Tried LifeMap, looks like this
This happened twice before, then I rebooted Ipad, and was ok, for a while. Any idea?
I notice in your first screenshot that the map controls are displayed way over to the left side where they definitely shouldn’t be. That placement makes me think something happened on the LifeMap page which blocked quite a bit of later code. That placement of the Route Builder UI is just fully wrong as well in a weird way that I can’t think of a possible reason/cause.
If my guess is right, then I would have expected a new tab to resolve the issue. At least until whatever set of steps that causes it was repeated.
If you do get into this situation again, I’d be interested if things are reset by closing open CityStrides tabs & visiting your profile page & then navigating to either an activity or a city page from there.
It feels like this is tied to the LifeMap page in some way, given the weird controls & the broken LifeMap screenshot…
Can you describe a set of steps that semi-reliably reproduces this issue?
Well, couple of hours since I wrote that post, not quite sure what I did after that, but now when I read your reply, and returned to the CS tab, map was missing. So I closed the tab, and opened my profile page again, and my last run. Looks like this
But! Here’s a twist! I just opened StreetFerret, and looked at my recent city. Blank map!
Never had this happen in either CS or SF before. Are they also using MapBox? Some problem between my ipad and Mapbox?
Maybe I should try browsing around on my iphone and laptop to see if it’s device dependent…
The timing here is tough as well, because I just released changes that revert the map. I’d suggest closing CityStrides tabs and trying again (though you do mention closing the tab & receiving the same result).
I’ll grab my iPad to see if it’s doing anything similar…
I’ll do more testing tomorrow, time to sleep now to get an early stride tomorrow
I am experiencing the same issue, using Chrome browser on windows desktop PC.
My LifeMap is completely blank. I cleared all my cache, all my cookies from all time, then closed all citystrides tabs and reloaded everything. The map is still blank for me. Everything else displays properly including my home screen though. If I click on an individual run, it will show me the stats for that but the map for the run itself is also still blank.
If you can share the browser console output from opening an activity page in a new tab, that might be helpful. If you could also share the URL for the activity you test, that will also help.
Thanks James, I’ll do that. I am back on a different windows PC also using Chrome browser and on this PC, the lifemap works.
I will check at my other PC tomorrow and post browser console output if the problem persists
Ok, had a run this morning, navigating with iphone, everything looked fine, the improved map was great!
Back home used Ipad for a while, also looked good browsing around, checking my run etc. And then I just opened another city - no map again. Closed Safari, and started it again, no map. Reboot ipad,worked for a while, then lost map again. Tried Chrome on ipad, seems to be ok.
Regarding the left side icons, at first they are in the correct place like this:
But the I click the bottom right icon for full screen map:
So the icons are in the right place, it’s just that the underlying screen is wrong here.
So I also tried StreetFerret again. Same thing, black map. Then in CS I noticed the bottom line ”Improve this map”, haven’t noticed that before. Clicked the link Improve this Map
And got this, no map
Tried mapbox and SF in Chrome, looks fine
Hi James - To update, on my other desktop PC running Chrome my map is still completely blank. However it shows up fine on chrome on my phone. For the PC, here’s the run I click in to:
When I do that, the activity itself shows up on the left hand side of the screen. It lists out the roads too but the map itself is blank. When I click to hide/show one of the roads on the blank map it gives this error:
Error: “TypeError: Cannot read properties of undefined (reading ‘getSource’)”
These errors and issues occurs in a Chromenormal window, in a Chrome incogneto window, and in the Microsoft edge browser as well
When I go back to my home screen and click to see my lifemap it is completely blank. I will post the browser console output in the next comment as the forum is not letting a new user post more than two links in one post.
Hi James, I still cant post the text of the browser output when my lifemap shows up completely blank. (says I can’t post more than two URLs in a comment) so here are screenshots of the console output:
For what it’s worth, I also went to the “Override software rendering list” flags in chrome and enabled this feature. I also enabled all the other WebGL related flags. This did not solve the problem though
I’ve been trying various things on my Ipad, sometimes I can work for a longer while without problems, sometimes it reappears quiote quickly. It seems like it starts when I’m in a map, and using two fingers to zoom in and out several times, suddenly the map won’t react, but I can see the little scale thing changing like 500 m - 100 m- 1 km etc.
I went into Settings on my Ipad - Safari- Advanced -web data and cleared only CityStrides, after that OK, also on Mapbox and StreetFerret. Next time, I just cleared for Mapbox, and all of them were OK. But next time I cleared the data for a completely different site - and also all sites worked fine after that!
Sorry the forum is so picky about new members & what they post - these screenshots help a lot, though. These help me connect the dots between your errors & stuff reported in my error tracker … I still don’t how to fix things, but
Failed to initialize WebGL
Can you tell me if this page - WebGL Report - displays “✓ This browser supports WebGL 2” for you?
Hi James - Here’s what I get. My Chrome is fully updated as are my video drivers. And I already enabled the flags in chrome relating to WebGL and turned hardware acceleration on:
× This browser supports WebGL 2, but it is disabled or unavailable.
Sometimes this is the result of older video drivers being rejected by the browser. Try updating your video drivers if possible.
Also check out Get WebGL, or try installing the latest version of [Chrome], or [Firefox]
When I browse to chrome://gpu/ the following is listed: “WebGL2: Unavailable”
I’m almost certain that’s the issue because Migrate to Mapbox GL JS v3 | Mapbox GL JS | Mapbox notes:
- Discontinued WebGL 1 support. WebGL 2 now mandatory for GL JS v3 usage, aligned with universal browser support.
I don’t know why the maps work at all without WebGL 2 support, but there must be some point in time where Mapbox just “nopes” out if it’s not available.
If you go to
chrome://settings/system and toggle the second option under System that says ‘Use Hardware acceleration when available’ … does that help?
Similarly, does the info in https://get.webgl.org/webgl2/enable.html help?
Edit: If you visit https://get.webgl.org/webgl2/ it includes the message “You should see a spinning cube. If you do not, please visit the support site for your browser.” and that link brings you to a page specific to your browser - that might be the most helpful, since it will be relevant to exactly your browser/device
Update: I also added an error popup if the compatibility check that Mapbox provides fails
Strange update to report. When going to this link:
webgl 2.0 returns no results when searching my flags, and there is no “WebGL 2.0 Prototype:” at all.
- In Chrome
- Go to
- Press Ctrl-F or Cmd-F and search for
WebGL 2.0 Prototype and click
- restart Chrome
I had already previously turned hardware acceleration on (when available). I toggled that to off and now the map shows and it works! With hardware acceleration off. No idea why and that is not what I would have expected…
Thanks for your responsiveness and help in this. I would (guess?) others are experiencing this too but really have no idea. I haven’t become a CityStrides supporter yet as I only just signed up, but I think I’m going to
It seems I can reproduce the errornow. It will always appear after doing many resizes of a map, zooming in and out repeatedly. Sometimes quick quickly, other times I have to keep on resizing a ling time, but eventually it freezes the map, and going back to profile and trying a new map, it’s just blank.
And I go to Settings - Safari - Advanced - Website Data, I delete any random entry, go back, and the map is OK again!
I can see the spinning cube referred to in WebGL above, their examples only mention Chrome and Firefox, not Safari. Maybe I should migrate to Chrome…
This is the message I’m getting on my iPad
Are you doing this on a page that displays your LifeMap? If so, I’d be interested in you testing this on a page that that not have your LifeMap displayed - one of your activities or the main cities page (both with your LifeMap not toggled on)
Don’t migrate to Chrome, especially just for this.
That ‘enable’ page only mentions Firefox/Chrome, but when you visit the main https://get.webgl.org/webgl2/ page it shows a browser-specific link.
Also, since you see the spinning cube & you’re not presented the same alert that Catriona shared below, this is not the cause of your issue.
If you visit https://get.webgl.org/webgl2/ I expect you won’t see the spinning cube.
It looks like Safari 15 was the version that introduced WebGL support. It looks like that corresponds to iOS/iPadOS 15. If you’re not on 15 (Settings → General → About → iOS Version at the top), are you able to update your device to 15?
My next IOS update is to 17 so I think I’ve gone past 15