Interactive 3D Mall Map

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

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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!

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

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. Could you tell me how I would use my own SVG file- I tried some simple shapes, and although it’s easy to swap the shapes- the JS that hides the descriptive content of the markers and the Titles of the content fail when I used my own svg- I’m assuming your SVG’s have id’s that are JS hooks that add display:none classes or- initializes an animation- maybe class=”map__space”… Tried a bunch of things but can’t get it to work

  2. Very strong work. Maybe there’s some way to speed up the design of the floors, may be invented any plugin for visual modeling of floors?

  3. Clever! I like the user interface.

    At Micello, we make indoor maps. It might be cool to explore connecting our data as an input to your visualization tool.

    Ankit

  4. Good morning,
    I try to make changes but without success.
    how to display only the icon pin of the selected name in the liste and hide all others pin?

    Thank you

  5. Amazing! sometime ago i did one with a lot of photos like “google maps street view” and people can visit shops in the mall, but your idea its more practical, a map with references and people can see it better

  6. Awesome work. Thanks for tutorial, i’m initiating on SVG and have some questions: Which tools use to design svg (corel/freehand/other)?? How to work with result.. any web with tuts??
    Many thanks in advance

  7. This is such a good work, that can’t even express my feelings!!! Trying to change few bits and pieces to suit my needs (smarthouse) however it’s not that easy. Would be perfect to make configurator option with SVG editor, so anyone can build whatever he need…

    By the way how to add expand button to the content menu, there is close button, but no expand, also whateve I put in content woun’t fit, how to configure that area, so roller would appear it the content does not fit?

  8. Awesome ! I had exactly the same idea for a project recently, and you just did it ! 🙂 Thank you for this amazing work.

    • I think this is such a great piece of work and so glad this has been posted here.I just wondered if someone provide a brief tutorial on how to work with these files? Where I go to customise my very own building map etc. Any help would be greatly appreciates

  9. Awesome work, much appreciated! Have added a small fix to main.js to remove content__item–hover when the content area is closed and for when you switch between pins so that the title is hidden again. Other than that, it’s excellent to work with and get running.

  10. 2 questions
    1. How do you view replies to comments? I see the # of reply but have no way of viewing them.
    2. I am trying to use my own VGA images for map but when I export out of AI and view my VGA code vs you VSG code they look completely different.
    How can I get this done using my images?

    Cheers
    Ruben

    • Disregard question 1. I see the number above the Reply = # of comment not # of replies

  11. This is great! I’m trying to figure out how do do something similar on a 2D scale for a dealers hall and artist alley for a small convention.