Custom Interactive Maps Implementation On Canvas Using KineticJS

  • Post published:August 11, 2015

In last few years, a lot of progress has been made into web technologies and browsers are no more just browsers they have become a platform. We can now have very interactive applications that can provide excellent usability features to the users. To achieve that interactivity in an application, we now have HTML 5 Canvas that is one of the famous developments in browsers and is supported by all the available browsers. It is in fact an alternative of Adobe’s Flash and Microsoft’s Silverlight.

vteam #550 was assigned a task to implement a graphical representation of data with click-able spots to populate more information. It was a kind of Google-Maps functionality that was the key feature of the application. We had already implemented tabular implementation of the data so now we had to find an efficient way to map that information to the HTML 5 Canvas.

Implementation:

There are many Canvas libraries available and after doing some investigation, KineticJS was chosen. KineticJS provides an excellent framework to draw information whether its text, shapes or an image. The library also provides functions to retrieve the canvas data in JSON format. Dumping JSON data in to the database was not difficult but the problem was that the continuous updates of the data were reflecting on the canvas. Our team decided to overcome this problem in the following way:

  • Only store JSON representing the Canvas of non changing data
  • Understand the Canvas’ JSON representation
  • Upon loading the map, traverse the JSON and update/inject the dynamic information at a proper place
    .

Our team also implemented following features that made the application more interactive:

  1. Zoom In/Out using mouse wheel along with the map image and placed holders on it
  2. Users can drag item from list to the map and can re-position them in editing mode
  3. Click-able items on the map to load detailed information/characteristics of the item
  4. Custom filters using drop-downs and check-boxes to show the relevant information on the Map