We create a mobile web application for monitoring transport of St. Petersburg with minimal effort

Prehistory

After the appearance of a topic about an Android application that allows you to follow the work of public transport in St. Petersburg, I got the idea to create a convenient and universal way to access this information as much as possible from a larger number of devices.

The idea to create an application for each of the platforms disappeared immediately - it will take a lot of time and I do not have the opportunity to test my programs on all these devices. Therefore, the option of a web application running in a browser was selected. This opens up the possibility of its work in most mobile operating systems that have a browser with support for JavaScript. Thus, we get a rather big list: Android, iPhone, iPad and other iOS devices, Maemo, Windows 7 phone, webOS, MeeGo, Moblin ... and so on (in theory). There are still regular, non-touch phones, on which OperaMini is usually used. For her, we will try to adapt the interface of the same application.

The result is this: spbtransport.ru
Android SPB Transport application
')
UPD 1. Some time after the publication of the article, the server of the public organization “Transport Organizer” left for prophylactic works. I hope he will soon be back in operation and the show of transport will resume.
UPD 2. Server SHCU "Organizer of traffic" back in service.

Creating an application

So, first you need to evaluate what we have. On the server of the St. Petersburg GKU "Organizer of Traffic" is located MapServer , capable of generating maps of the size and scale we need, in the form of png pictures with a transparent background. I did not find a way to receive information in text form. It was decided to use Open Layers as a library for displaying maps. To solve common problems on the page - jQuery mobile .

In my case, I was lucky, and on the Open Layers website the examples already had a page using jquery. I took it as a basis.

As maps, I left Open Street Map: they are quite detailed, which is a definite plus for the user who wants to orient himself on the terrain. The search provider has chosen the Nominatim service from Open Street Map. It allows you to search in the selected part of the map and contains a large number of marks - you can search by the name of stops, subways, shops and many other landmarks.
Among other possibilities, there is automatic positioning, a choice of displayed layers is available.

Now it remains to choose what to use for the server part. AWS Elastic Beanstalk service with Apache Tomcat jsp scripts is used to process card requests. This will allow the system to automatically scale based on load.

Android version

At first, I didn’t want to make versions of the program for specific OSs, but most of the page turned out to be static, and it made sense to download the application to the device, and load the data from the server.

Using the manual and putting the page code in the assets, it turned out the application is already for Android. This can kill two birds with one stone: the program code is located locally and is not loaded from the server every time. The second is that maps are saved in the application cache, which also significantly reduces traffic.

Version for non-touch devices

Here I mean Opera Mini. For it you need to provide buttons for moving around the map and remove the button for determining the position.

In fairness, it should be noted that this approach works extremely poorly and the mobile version will have to be redone. Especially on many devices there are problems with the display of compressed images.

Total

As with any project, there are also disadvantages to this. Beacons are not installed on all vehicles yet, but every day they are getting more and more. Despite the fact that this idea is just an experiment, I think the service will be able to provide the necessary information to a large circle of users. It is possible that in the future we will cooperate with the GKU Organizer of Transportation to obtain relevant information in textual form. This would allow you to install your own card generation servers and reduce the load on the map server used now.

I hope that both the article and the service itself will be useful and will find their users.