Map of Moscow Metro and the whole world for Android

    CHAPTER 1. Ambition


    End of February 2018



    We, as adherents of the ideology of free software and the free market, believe that monopoly is bad.

    A huge number of people need convenient and fast navigation in the subway. It is strange that there is not a single worthy competitor to the Yandex.Metro application. We decided to create it ourselves, doing it in our free time as a hobby.

    Team: at different times from 2 to 4 people.

    The story covers only the Android application, due to the fact that it was launched first and all the basic mechanisms were run on it. Of course, the iOS version is currently available.

    CHAPTER 2. The route in the darkness


    March - June 2018.

    Need a map. We take SVG, shove it in SVGView , everything is fine. Lies terribly, but we are joyful. How to draw separate routes? No one knows.

    In the SVG format, there is no information about layering, whether an element belongs to any line, or other information that is critically necessary for building a route. So we came to the use of a database to store all the elements for rendering.

    In addition, we needed the application to run as fast as possible. Using WebView immediately disappears, you need a GL-surface. We decided to try with SurfaceView(opengl surface that can be used as canvas) - it's not that. It can make changes within itself, blinking in black, as it is simply poorly implemented and can not withstand the load more than rendering a 20x20 cube. It can increase, disappearing once. We needed a different solution, but one that would not be so far from SurfaceView, since it was completely suitable for us on the interface.

    image
    Briefly about driver bugs on Android

    We tried implementation on TextureView . And, oh gods, most of the problems are gone. Despite the fact that TextureView is a SurfaceView on steroids, it is normally implemented without magic bugs and epileptic seizures of the video adapter.

    We still have errors in synchronizing streams and adjusting views in the form of unreadable segmentation errors, but this was better than a black blinking spot. Accordingly, any use of View not as it should be, forces to redefine almost all methods of View itself. This was especially problematic with TextureView because this component consists of 2 parts: View and Surface. They can’t live without each other, but at the same time they simply can’t send the Surface death event inside the View, which is why you have to do manual checks after almost every action.

    The problems started when we had to increase the view. Canvas draws everything pixel by pixel, so if we specify a size of 400x400, then elements from 0 to 400 will be visible, but not outside. 400 is very small, in reality we need a map of about 5000x5600 pixels on good devices. But how to fit 5000x5600 on a 1920x1080 (16: 9) screen?

    We create a canvas map with a size and scale that will increase with the screen resolution, and decrease with a decrease in screen resolution. Thus, we solved the problem of very large and crookedly drawn maps on devices with a large screen and too small maps on small screens.

    When we started testing the card, it turned out that on phones with the same resolution, the card is displayed differently. Well, as differently: on one it is displayed, on the second a white / black spot. Logs lead to a Qualcomm bug tracker to a bug with Adreno 330/300 chips with the 'wontfix' status. Wonderful.

    The only way to defeat this bug is to underestimate the size of the card on phones with a certain video chip so that there is no white square instead of the card. But how do we know the model of the video chip? We need to create a GLSurfaceView with a size of 1x1 pixel when starting the application, get information about the video chip from it and only then draw a map.

    “- But it's a crutch.” Yes, it's a crutch. This is a crutch of a galactic scale, but it's better than cutting a large number of devices and hoping that Qualcomm will fix the bug of its drivers and send the update to all OEMs so that we can use the card on phones with these crooked drivers. Thanks to our users, we were able to find a solution that works on all devices.

    image
    We built, built and finally built!

    Also a very interesting task was the layering of elements. Due to the fact that the red branch should be drawn on top of the green, green on top of the blue, yellow on top of the red, etc., we entered the layer numbers, and our (at first glance simple) application became similar to Adobe Photoshop :)

    Decided how to draw routes. Now it was necessary to decide how to find the best among them. To find all the paths between the vertices we use the Floyd-Warshall algorithm, to find the shortest path we use the Dijkstra algorithm, for alternative paths the Yen algorithm. Anyone interested in the details, ask questions in the comments.

    CHAPTER 3. The route in the sunshine


    June - December 2018

    At this stage, we already knew what to do. Improve the product. We drew new maps, added new languages, fixed bugs, accelerated work, fastened features, assembled a user feedback and did not spend a dime on promoting the application.

    On June 15, we rolled out our application to the release, supplementing it with a St. Petersburg metro map. On this map we decided to designate reservoirs and bridges. Somewhat later, Yandex showed a redesign with a similar layout of cards. Not bad, we thought.

    image

    In total, we added 10 cities: St. Petersburg, Barcelona, ​​Prague, Baku, Kazan, Kiev, Minsk, Nizhny Novgorod, Samara, Novosibirsk. In developing a metro map of Paris and New York, the plans - the whole world.

    In July, a backend was deployed to update station information and quickly update maps.

    In September, we already had a strong product that could be carried to the masses. At the same time, we met with the developer of the application "Metro and MCC - station diagrams" Nikolai. In his application, he assembled station diagrams that allow you to quickly navigate and find the desired exit. Very cool, but this application did not allow to build a route and had an outdated design. And therefore, for a wide audience, it turned out to be weaker than Yandex.Metro.
    We agreed to implement station designs in our application, and the company management supported and funded the idea. It has become a feature killer. Our users were thrilled.

    January - March 2019

    After conducting about 10 experiments with the app page in google play and spending 18 (!) Thousand rubles for marketing, we put the applications in the top 3 google play at the request of the “metro” and “metro of Moscow”.

    In March, the iOS version of the application was published, which also successfully ranked in the top 5 app store at the request of Moscow Metro.

    Download Android: Moscow Metro - station maps, routes, exits
    Download iOS: Moscow Metro + station maps

    Also popular now: