Немного непонятен вопрос.
1. Любая схема транспорта есть заранее известная структура. Примерно такого рода:
{
Линия_метро_1: {
Станция_метро_1: {
Имя: '',
...
},
Станция_метро_2: {
Имя: '',
...
},
...
},
Линия_метро_2: {
Станция_метро_1: {
Имя: '',
...
},
Станция_метро_2: {
Имя: '',
...
},
...
},
...
}
С другим транспортом тоже всё ясно — только вместо линий метро будут номера маршрутов, а станции метро заменятся на остановки.
2. Обработав такую схему, формируем группы флажков (+ label) и (при необходимости) дополнительные html-элементы (можно и svg). Стили пишутся отдельно, исходя из макета интерфейса.
3. Клик на label приводит к смене статуса флажка и соответствующему визуальному представлению этого элемента и связанного с ним дополнительного (если такой был создан).
4. Клик на флажке, отвечающим за группу, проделывает ту же операцию, но с каждым флажком из группы. Можно просто вызвать клик на всех флажках группы.
Примерно так
codepen.io/cleric/pen/aBkrl 
