Map with projections from Proj4js to Canvas

Idea

I decided to write a post about the popular Canvas HTML5 now and about my dbCartajs project using it. Why Canvas? A bit of history. Before, to create images that illustrate various computational models (for example, drawing a circle radially and centered in coordinates, drawing a polygon with the number of vertices N and area S, drawing a circle to a sphere, etc.), I and my colleagues at the Institute used various controls from different development environments: PictureBox, their VB6, QPainter and QCanvas from Qt, Canvas from Tk and, finally, creating images using the mapfile from MapServer. Later, after exploring the possibilities of HTML5, I decided to switch to using Canvas and Web development with JavaScript. Conveniently - only a browser is needed for debugging and development. Having gathered strength and armed with documentation from W3C, I rewrote some of the functionality of the components that we use in our work, in JavaScript, having made it into the dbCartajs project on GitHub. The code is implemented as a dbCarta object in order to use it as a widget on pages without copying parts of the source code.



Widgets with dbCarta



Actually, ideally dbCartajs is ported from the dbCarta project to googlecode implemented in Python and Tkinter.

How it works

dbCartajs uses Canvas to display objects by coordinates (longitude, latitude in degrees) or points. The project includes the Proj4js library, which implements recalculations of map projections. From it, several projections are set up for use - these are spherical nsper, ortho, laea and mercator (as in the popular Google Maps - Google Mercator). By default, a canvas with a width-height ratio of 2: 1 is used, which corresponds to the flat projection of longlat from Proj4js. If proj4js-combined.js is loaded, then other projections are available through the changeProject or initProj interfaces of the dbCarta object.





Projection Mercator

')

Of course, not all the features of Canvas are implemented in dbCartajs, but I tried to pay attention to some. The first is fonts. When scaling, they do not change. The second is the use of the isPointInPath method, which allows you to implement an analogue of using MAP, AREA and IMG elements. And third, it is the possibility of combining objects from different projections. In the StarrySky demo, the spherical projection nsper is used to derive the boundaries of the Earth, the contours of the continents, and the flat longlat projection is used to output stars and spacecraft orbits. To change the projections, use the methods initProj (indicating the projection parameters for Proj4js) or changeProject (without parameters).





The combination of projections in StarrySky.

About management

Moving around the map is available by clicking (a point within the map is centered by clicking). The map is scaled via the scaleCarta interface or the ± buttons on the right. In spherical projections, the globe is rotated via the initProj interface.

Where to look

Project examples can be viewed at dbcartajs.appspot.com . Sources are available in the GiHub project dbCartajs .