Idea: Use your own Mapbox style

The current map style is great, but it would be cool to be able to customize it further by being able to insert a mapbox:// link to a custom map style for our LifeMap. This way users can completely customize their map if they wish - dark mode, font sizes, labels, high contrast, etc.
I’m thinking this could be something you could paste in to the Settings page, maybe under an “Advanced” field. Maybe users could even share their map styles if they create something cool.


can you give more examples? Because just from your description its quite difficult for me to understand what you want to get.

Using the mapbox studio, you can create your own mapbox styles. Jim made his own style for citystrides: mapbox://styles/citystrides/ck715k6n703ou1ipfztozwd1m, which works great but it would be cool to be able to enter your own map style ID and customize the look of the map. For example, here are a couple of map styles I made running on CityStrides:

1 Like

That’s funny - these are very similar to some work-in-progress styles I have going on. I plan on swapping out the satellite toggle with a selection, which will let you choose between (undecided on naming) normal/grey/dark/satellite.
I’m on the fence on adding Mapbox style URL/ID entries, with the worry that I’ll end up adding general Mapbox Studio support to my plate.

1 Like

How did you manage to use them on the live site? I had a brief look at this in the past but couldn’t quickly enough figure out what JavaScript incantation to use. If we pour that into a userscript or browser add-on, then the handful of people that would be interested could do so without adding support headache for @JamesChevalier (though that would only be a solution for desktop).

Alternatively, if you made that through image editing instead, maybe there’s an unofficial official endpoint/intercept call/whatever that @JamesChevalier could add that an add-on might hook on to. (Just spitballing ideas here)

I essentially made a browser extension that replaces the mapbox style when it requests the application script. I don’t know if this would be feasible as something others could use, however, since I’m hard-coding the new script into the extension (so when new features are released the extension breaks).

One way this could (maybe) be enabled as an extension is if James just adds a check to see if a certain key is set in localStorage to the application code, loading in the style if set. This would not have any visible effect for CityStrides users, but if users want to they could do something like localStorage.setItem('mapStyle', 'mapbox://myUser/myStyle'); and then the app would load the new map style. This way, it could be easily enabled with an extension and could also be more of a “use at your own risk” feature that isn’t something James needs to guarantee support for. But maybe this would be getting to complicated - like how does it interact with the existing toggle for satellite view, etc.?