Miscellaneous tools (to evaluate)

Kinetic.js: http://kineticjs.com/

• Pros
  • Kinetic stages are made up of user defined layers. Each layer has two canvas renderers, a scene renderer and a hit graph renderer. The scene renderer is what you can see, and the hit graph renderer is a special hidden canvas that's used for high performance event detection. Each layer can contain shapes, groups of shapes, or groups of other groups. The stage, layers, groups, and shapes are virtual nodes, similar to DOM nodes in an HTML page.
  • Polygon Example: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/
  • Line Example: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-line-tutorial/
  • Interactive Map Example: http://dev.filkor.org/2013/04/14/create-an-interactive-map-using-javascript-and-html-5-canvas/
  • Zoom and panning support: https://code.google.com/p/kineticjs-viewport/
  • Multi-touch scaling: http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/, http://nightlycoding.com/index.php/2013/08/zoom-to-point-and-scale-kineticjsmousewheel/
• Cons
  • HTML5 Overlay

jvectormap: http://jvectormap.com

• Pro
  • supports zooming, panning, region highlighting, circle makers/annotation,
  • json I/O "F102":{"name":"Nike","path":"M13.74 162.23L30.83 160.72L36.51 151.85L31.53 65.98L23.53 59.28L7.96 60.36"}
  • fill, stroke, fill-opacity, stroke-opacity for markers and regions and r (radius)
  • interaction: onRegionOver, onRegionOut, onRegionClick, onMarkerLabelShow, onMarkerOver, onMarkerOut
  • map of the mall: http://jvectormap.com/examples/mall/
  • region selection: http://jvectormap.com/examples/regions-selection/
  • SVG converter: https://github.com/bjornd/jvectormap-svg-converter
• Con
  • not sure if it works for curve / path natively, but I think we can render <path> manually
  • not sure if kinectic could work over it.
  • the functionality provided by jvectormap is not so rich.

openlayers: http://openlayers.org/

• Pro
  • built around layers (various formats) http://openlayers.org/dev/examples/
  • supports zooming, panning, point annotations, some basic drawing routines (http://openlayers.org/dev/examples/select-feature.html, http://openlayers.org/dev/examples/snap-split.html), some styling options
  • has some basic XML I/O
  • multi-touch supported: http://docs.openlayers.org/library/mobile.html
  • http://docs.openlayers.org/ http://www.terrestris.de/wp-media/downloads/openlayers_cheatsheet.pdf

Raphael: http://raphaeljs.com/

• Pro
  • Tutorial: http://return-true.com/2011/06/using-raphaeljs-to-create-a-map/
  • Zooming and panning: http://raphaeljs.com/reference.html#Paper.setViewBox https://github.com/escobar5/raphael-pan-zoom https://github.com/semiaddict/raphael-zpd https://code.google.com/p/svgpan/
  • Based on SVG
• Con
  • It's a drawing engine. Though it has many possibilities, it is lower-level than other libraries.

Dojo.js: http://demos.dojotoolkit.org/demos/

• http://demos.dojotoolkit.org/demos/shippingRoutes/demo.html
• http://demos.dojotoolkit.org/demos/mobileGeoCharting/demo.html

PolyMaps (http://polymaps.org/ex/streets.html)

• Just a rendering engine for SVG maps.

Extra:

• HandeleBars.js: http://handlebarsjs.com/ For coordinated windows.
• CoffeeScript: http://coffeescript.org/ Code simplification quicker prototyping.
• LessCSS: http://lesscss.org/ Global CSS value variable defining.
• Backbone: http://backbonejs.org/ Easier Data handling.
• JQuery: http://jquery.com/ General JS utilities.
• Chart.js: http://www.chartjs.org/ Stylish charting library that we could coordinate with handlebars.

IDE:

• Webstorm: http://www.jetbrains.com/webstorm/
• Aptana: http://www.aptana.com/ (eclipse plugin or standalone)