HTML5 Canvas Scheme of the suburban movement of the railway communication of Moscow and Moscow Region
Another railway traffic scheme using the capabilities of Canvas and dbCartajs.
In the original, it is called Moscow Underground and Commuter Rail Map , it can be seen in the vestibules of Moscow Region electric trains. Initially, I wanted to implement this particular card as the next demo for the dbCartajs project, but on the Web I found only a copy of the card taken on a mobile phone with poor quality. But with ease I found a dozen schemes of the Moscow metro. The most beautiful, in my opinion, on Wikipedia, for some reason, Yandex was the most unsightly with its capabilities. Actually, I redid the SVG version from Wikipedia under Canvas, which I wrote about in the previous article .
After some time, I found two versions of the schemes in the JPEG format on the forums and decided to implement the initial idea. I lost references to sources, so once again I posted these pictures in the original, if anyone is interested, here: mosrailmap and vkontur .
The online version of my version of the map can be seen on dbcartajs.appspot.com . Due to restrictions on the number of views on a free hosting site may be blocked, so I advise you to take and watch the project from github .
')
I tried to take into account user comments to the previous metro scheme: fonts and centering. In this version, the font size is scaled to the width of the map; when centering, the sight is drawn to the selected station from vertical and horizontal lines. You can study the layout of stations, hubs of transplants.
All demos, including this one, are written entirely in JavaScript. I tried to simplify the code as much as possible and did not use third-party libraries like jQuery, ExtJs. The goal is to explore the possibilities of creating images on Canvas.
For those who first see the dbCarta widget, let me remind you about card management:
* Left click centers the point on the map in flat projections, turns the globe in spherical projections;
* The [+ | -] zoom buttons are located on the right side of the map.
In addition, navigation is possible through the list of stations.
In general, as they say, the residents of Podolsk, Lyubertsy and Lukhovits are welcome, please do not disturb the Muscovites.
In the original, it is called Moscow Underground and Commuter Rail Map , it can be seen in the vestibules of Moscow Region electric trains. Initially, I wanted to implement this particular card as the next demo for the dbCartajs project, but on the Web I found only a copy of the card taken on a mobile phone with poor quality. But with ease I found a dozen schemes of the Moscow metro. The most beautiful, in my opinion, on Wikipedia, for some reason, Yandex was the most unsightly with its capabilities. Actually, I redid the SVG version from Wikipedia under Canvas, which I wrote about in the previous article .
After some time, I found two versions of the schemes in the JPEG format on the forums and decided to implement the initial idea. I lost references to sources, so once again I posted these pictures in the original, if anyone is interested, here: mosrailmap and vkontur .
The online version of my version of the map can be seen on dbcartajs.appspot.com . Due to restrictions on the number of views on a free hosting site may be blocked, so I advise you to take and watch the project from github .
')
I tried to take into account user comments to the previous metro scheme: fonts and centering. In this version, the font size is scaled to the width of the map; when centering, the sight is drawn to the selected station from vertical and horizontal lines. You can study the layout of stations, hubs of transplants.
All demos, including this one, are written entirely in JavaScript. I tried to simplify the code as much as possible and did not use third-party libraries like jQuery, ExtJs. The goal is to explore the possibilities of creating images on Canvas.
For those who first see the dbCarta widget, let me remind you about card management:
* Left click centers the point on the map in flat projections, turns the globe in spherical projections;
* The [+ | -] zoom buttons are located on the right side of the map.
In addition, navigation is possible through the list of stations.
In general, as they say, the residents of Podolsk, Lyubertsy and Lukhovits are welcome, please do not disturb the Muscovites.
Source: https://habr.com/ru/post/203462/
All Articles