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:
- Use plain images and image maps for the layovers.
- Use canvas(utilizing Google's Javascript solution for browsers without support). Load the image in the canvas tag and dynamically create the layovers.
- Use SVG
What is the best option for cross-browser compatability?