POC: Navigable world in HTML5, 2 level of hierarchy

I need a working example with of navigable 2d map and 3d city block a browser window without using any plugins: no Java, no Flash, no Silverlight, no JavaFX. Which leaves HTML5, open to other options if there are any. Optimize for speed and fluency of motion. NEED FULL RIGHTS TO THE DELIVERED CODE. Use JQuery if it helps. ==================================== 2d Map: Will serve as navigable overview of the 3d city blocks described. The user should be able to navigate the map using keyboard or pointer device (mouse/stylus/touch) and zoom into a maze choice with keyboard or a pointer. Prefer everything defined in JavaScript data structures, but if performance requires, can hard code actual Canvas parts, in which case we will dyn-render it on the server side in the next project step. Render ego as a sprite of your choice from a small free stock image: .png preferred. Possible data structures: [{x:, y:, 'maze1', x:, y:, 'maze2',...}] {'maze1':{'color':,shape:{}}} ==================================== 3d City Block Should be in perspective, feel like walking a street. Absolutely no fancy graphics, just plain prim shapes (rects, triangles, boxes), shaded, colored, if possible, with gradients and transparency (alphas). The layout should be defined in JavaScript objects. Do not worry about pre-optimizing data in JavaScript on the browser, this will have to be done later in a different project on the server side. The navigable boundary must be made clear to the user by seeting up a perimeter wall: can be rectangle, a polygon appreciated if it's easy. Example: * var boundary = [polygon points]; // draw the boundary wall * var buildings = [{color:,shapes:[color:,shape:{},coord:{}],coord:{}}, ...]