CODEWITHSUNDEEP
jquerycsshtmlcanvassvg
Joe
Joe

Reputation: 11

Suggestions for an implementation of a map-like navigation interface?

Hello I'm trying to implement a HTML5 based Google Map like navigation interface for rooms within a building. I am thinking of having a SQL database containing information about room locations (such as pixel coordinates) within a static 2D image of the building layout.

What is the best way to render navigation lines and respond to click/touch events. I want the user to touch a room on the 2D map and have a colored navigation route drawn over the 3D map image to show the user how to get there.

Would CANVAS or SVG be an appropriate solution? How about using only CSS3? Flash is not allowed as I need to this work within a browser on the iPad.

Joe

Upvotes: 1

Views: 1284

Answers (2)

user631644
user631644

Reputation: 1696

SVG creates nodes accessible through the DOM, canvas does not. because canvas doesn't create DOM nodes, it tends to render faster than SVG in most browsers. If you are pulling information from a database based on user actions, it may be easier to manage events and manipulate the map using SVG. That said, you can also handle user events in canvas by simply keeping track of mouse position relative to the canvas. That would mean mapping coordinates for the rooms, etc, to (x,y) coordinates on the canvas, which could be a pain if your requirements should change for any reason.

Just thinking off the cuff, but it may be possible to place each room as a separate image individually on the canvas -- essentially compositing the rooms together to build the building map. Where the image should be placed and the path to the image file for each room could be stored in the DB as room attributes, adding some flexibility for unforeseen contingencies down the road. You could then draw your routes w/ context moveto and lineTo on top of the composited images pretty easily.

Upvotes: 2

Erik Dahlström
Erik Dahlström

Reputation: 61046

If you're looking for something Google Maps-like, check out polymaps which provides all the javascript code for you to read/fork.

Just drawing lines on top of an image can be done with either canvas or svg. A CSS-only solution sounds like more work to me.

Upvotes: 0

Related Questions