Interactive Floor Plans In Html5

I have to develop interactive floor plan navigator and viewer for apartment buildings, which will succeed its Flash-based predecessor. I am now in the process of evaluating techniq

Solution 1:

Either SVG or Canvas will suit your needs. You'll probably have an easier time developing this in SVG simply because of how much is already done for you.

Here are some other considerations:

• Canvas works in all "modern" browsers, but not IE7/8
• SVG works in all modern browser, and VML (very close) is in IE7/8
• Text rendering in Canvas can look pretty different per-browser right now
• Canvas works in Android and iOS to an extent (minor things like text gradients still mess up)
• SVG does not work in android (at least it didn't a year ago. Anything change?) It does work in iOS
• The accessibility of SVG is FAR better. Text is searchable, therefore SEO-friendly, blind-friendly, copy-and-paste friendly, etc. Interacting with the rest of the DOM is a lot more natural.
• Canvas performance is better, but you don't need that.

At this point they are pretty equal compatibility-wise, save for older versions of IE. You can get those to work with Canvas using the excanvas library, but it kinda sucks, especially if anything is going to be moving.

I'd recommend SVG solely because you will be able to get off the ground developing it much much faster for a floor-plan type of app. Everything is already a DOM object. Events, mouse handling, etc, is already done for you.

But if you really want it to work on (older?) android phones, Canvas may be the better bet for now.

Solution 2:

I'm planning something similar for indoor navigation :)

I ended up using OpenLayers (http://openlayers.org/)

Actually OpenLayers was invented for GIS Stuff (Maps etc.) but you can easily define a X-Y-Z metric coordinate system and simply feed it with vector data.

The big benefit is that it comes with many features like drawing, different vector overlays, collision detection, distance measuring, tooltips, marks etc:

For OpenLayers 2.x (originally) see:

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

For OpenLayers 3.x see:

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/draw-features.html

You can communicate over GeoJSON, GML etc. with the backend. We used PostGIS as backend to store the vector data. There's also a spatial extension for mysql (http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html).

Just define a simple X-Y-Z coordinate system with a well chosen reference point :)