Interactive 3D Mall Map

Demo     Download

Today we’d like to share a little 3D experiment with you. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces. When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs.

The responsiveness of this concept is powered by the viewport unit vmin which allows us to use the smallest viewport side for sizing our elements.

This concept can be applied to any kind of floor map actually; any building that has several floors and spaces could be an interesting use case for this.

Attention: This is a highly experimental proof-of-concept. 3D and viewport units support is needed for this to work.

For the filtering and ordering of the spaces list in the sidebar we are using List.js, a great library for adding search, sort, filters and flexibility to tables, lists and various HTML elements.

The following is the initial view of the mall:

interactivemallmap_01

When clicking on a level or when clicking on a space in the sidebar, the respective level opens and the pins show:

interactivemallmap_02
Clicking on a pin will open the details for that space:

interactivemallmap_03
We hope you enjoy this little experiment and find it inspiring!

Demo     Download

Interactive 3D Mall Map

| CSS3, Javascript, jQuery Animation, jQuery Plugins, Slider, SVG | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.