in Playground on

Interactive 3D Mall Map

An interactive 3D mall map concept with a sidebar search and pin indicators for every level.
InteractiveMallMap_800x600
View demo Download Source

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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!

Find this project on Github

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

ScrollingLettersAnimation_Featured

Scrolling Letters Animation

InteractiveRepulsionEffect_featured

Interactive Repulsion Effect with Three.js

ProximityFeedback_featured

Ideas for Proximity Feedback with Progressive Hover Effects

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 92

Comments are closed.

  1. Hi,
    Can you help to me to show the image in the normal mode after a floor is selected? Or getting the xor y axis for dynamically placing the markers?

  2. do you have an update in IE? Also Firefox is not showing the map. If you have a paid version or something that completes this free version please tell.

    • Hello Karla,

      Early checks indicate that IE11 visitors probably have to be shown a simpler version of this map. We’re currently looking into adopting this concept and developing it into a full solution for one of our customers. Contact me at interactive.maps@journeyworks.nl if you’re interested.

      Regards,
      Wouter van Dam

    • Hello Sean,

      We’re currently looking into converting this concept into a solution for one of our customers. Perhaps we can develop this into a paid version. Contact me at interactive.maps@journeyworks.nl if you’re interested.

      Regards,
      Wouter van Dam