Moscow metro map on Canvas

    The idea to try to draw a map came up after viewing the metro map on Wikipedia in SVG format . In Firefox, it opens for a long time, in addition, at a resolution of 1600x1300 it does not fit on the screen, and scrolling on it also works for a very long time. It became interesting, but will it also slow down in Canvas? I decided to draw my version of the metro map as another demo for the dbCartajs project .

    image


    Canvas does not support all the features that are available in SVG. For example, as it turned out, it partially supports drawing dotted lines: the setDashLine method supports only Chrome, and Firefox uses its mozDash property . But Canvas supports Bezier Curve for rendering smooth bends.
    I added the possibility to use the bezierCurveTo method in dbCartajs, if the 'Q' character is the third parameter in the three coordinates, for example, for an object with the coordinates [[1,1, 'Q'], [2,2, 'Q'], [3 , 3, 'Q'], [4,4, 'Q'], [5,5, 'Q'], [6,6, 'Q']] the bezierCurveTo method will be called 2 times. Also added a check to support Dash Line, which can be set as a dash property in mopt.

    The pixel coordinates of lines, stations, canals, rivers, railway tracks are converted to degrees with longitude and latitude. The new coordinates of the objects are saved in the mosmetro.js file.

    A drop-down list is formed from the stations. Selecting a station in it centers it on the map.

    In general, it turns out that in Canvas the map is drawn much faster than in SVG.

    Also popular now: