Interactive Floor Plans in HTML5

Question

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 techniques and technologies best suited to implement this in HTML5. I will have to support all common browsers (IE starting with 7).

Requirements:

• The user is presented with several static outdoor views of the building, between which he can switch with a simple widget.
• They will be able to select a floor on this outside view. On mouseover (click for touch devices) the floor will be highlighted.
• Upon clicking on the floor you switch to a floor plan, which - again on mouseover/onclick - provides detailed information about the apartment.
• Some animations should be involved, but nothing too fancy.

I have been thinking of the options for implementing this. I will also need a quick way of selecting polygons for the floors (overview) an the apartments (floor plan) to allow non-developers to create new buildings.

The options I came up with:

1. Use plain images and image maps for the layovers.
2. Use canvas(utilizing Google's Javascript solution for browsers without support). Load the image in the canvas tag and dynamically create the layovers.
3. Use SVG

What is the best option for cross-browser compatability?

Answer 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.

Answer 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 :)