HTML5 Canvas Map - implementation of the mapping engine

As part of a large interactive web-based project (more about which is possible in another post) I am developing a cartographic engine implemented on HTML5 CANVAS. Its development has reached the beta stage and, with the approval of my leadership, there was a desire to show these cards to the public.

General information

The engine was developed without the use of any specialized libraries or frameworks. The only library used is jQuery.

Image maps - tiles - generated using our utility. There is still something to strive for, since we have not yet been engaged in their optimization.
')
Everything is drawn on CANVAS, with the exception of such elements as the toolbar of additional tools and popup tags (although in the demo there is no link in the link below).

Implementation

The implementation is modular and consists of the following main parts, the purpose of which I think is clear from their names: CanvasDragger, CanvasEventer, CanvasImgLoader, CanvasMapper, CanvasMarker, CanvasMiniMapper, CanvasResizer, CanvasTools, CanvasZoomer.

In order to connect the cards it is enough in the right place of html'a to write the following line:

<canvas id="map2d"></canvas> 

Further in the JS code we perform initialization (as an example):

 $(function() { mWrap = new MapsWrapper({ mapDivId: "map2d" //   ID canvas'a,      }); }); MapsWrapper = function(properties) { this.initialize(properties); }; $.extend(MapsWrapper.prototype, { v2DMapDiv : null, v2DMapComponent : null, initialize: function(prop){ this.v2DMapDiv = prop.mapDivId; this.initMap(); }, initMap: function(){ var GlobalParams = { staticMapUrl: ["http://gate.looxity.ru:8088/map.html", "http://zain.looxity.ru:8088/map.html", "http://kaph.looxity.ru:8088/map.html"], initCrd : {x: 7445, y: 9925}, initZoom : 0.25, zoomList : [1, 0.5, 0.25, 0.1, 0.05, 0.025], miniMap : true, tools : {scaler: true, polygoner: true} }; this.v2DMapComponent = new CanvasMapper (this.v2DMapDiv); this.v2DMapComponent.initialize(GlobalParams); } }); 

Let us dwell on the parameters:

• staticMapUrl - hosts from which map tiles are loaded
• initCrd - the initial coordinates in the Gauss-Kruger projection, in this case approximately correspond to the zero kilometer of roads, which is near the Manege Square.
• miniMap - connect the minimap module
• tools - connection of the module of additional tools

Internal mechanics

Or what is behind this or that user action. Go through the main events.

We start

When initializing the maps, the number of tiles that must be shown to fully cover the canvas is calculated. Knowing the dimensions of the canvas, with a given tile size of 256x256, we perform this operation.

Are moving

Further, when the card moves - dragg - we check the situation if we move the card to such a distance that we need to load a new tile. Also check if all the tiles are in scope, if not, then the “garbage collector” is started:

 unVisibleTilesCollector: function() { for(var cnt = 0; cnt < this.__TILES__.length; cnt++) { if( (this.__TILES__[cnt].canvX + this.tileSize) < 0 || this.__TILES__[cnt].canvX > this.canvas.width || this.__TILES__[cnt].canvY > this.canvas.height || (this.__TILES__[cnt].canvY + this.tileSize) < 0 ) { this.__TILES__.splice(cnt, 1); cnt--; } } } 

Scale (zoomIn, zoomOut)

When a mousewheel event is triggered, the following basic actions occur sequentially:

• copy the current position of all tiles

 $.extend(this.__ANIM_TILES__, this.mapper.__TILES__) 

• by means of canvas and with the help of mathematics there is a decrease or increase in tiles (depending on how we spin the mouse wheel) from a copy made in nn1

 for(cnt; cnt < this.animSteps; cnt++){ setTimeout(function(){ _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height); _this.ctxMarker.clearRect(0,0,_this.canvas.width,_this.canvas.height); animScale += scale*stepScale; _this.drawAllAnimTiles(evt, { animScale: animScale, stepCurrNum: Math.round(Math.abs(animScaleStart-animScale)/stepScale), stepScale: stepScale }); }, delay*cnt); } 

• from above, as they are loaded, new tiles are superimposed, in accordance with the new scale

 MapsWrapper.v2DMapComponent.update() 

Browser operation

The work was tested in FireFox, Chrome, Safari, Opera and IE of the latest versions.
For those who are still not in the know once again emphasize the following. Since canvas is used, all browsers that do not support this technology are automatically dropped, and this is IE version 8 and below and very old versions of the browsers listed above.

TODO List by card

1. Reducing the size of the map tiles (should give a tangible increase in the speed of work);
2. Slider zoom;
3. A tool for obtaining information on a point on the map (building address, coordinates, and so on);
four. ???

Demo : share.arkada-sw.ru/canvasmap

ps all rights to the program code and cards belong to the company in which I work

pps if this article takes interest, then my next post will be a description of an example of the actual use of these maps