On http://sl.se there is a map displaying the public transport network in Stockholm.

The default view looks like this:

enter image description here

showing mostly train and underground stations as well as boat stops.

Zooming in one step results in this:

enter image description here

showing many, but not all, bus stops too. It is not until you zoom in another step all (?) bus stops are displayed.

On the other end, if you zoom out four steps (at least on my screen) you see the whole area SL covers with public transports but now just train stations and boat stops are visible.

For screen shot purposes I would like to zoom out four steps to view the whole area AND display all stations and stops the way they are displayed on the second image above (yes, it is gonna be super cluttered, but that is the purpose). I know some basic CSS and Javascript but have been unable to figure out how this map determines the zoom level and what to display at that resolution. Can someone help me achieve this? That is, tell me what I need to manipulate using the web inspector or similar.

A special bonus if I can replace the symbols for trains, boats and so on with a generic symbol that is the same for all types of vehicles. Some dot or ring would be perfect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.