Interactive 3D Mall Map

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

By in Playground on
Demo Code

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

InteractiveMallMap_03

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Creating an Interactive Mouse Effect with Instancing in Three.js

Exploring 3D Effects with 2D Optical Illusions

Hover Animations for Terminal-like Typography

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 92

Comments are closed.

  1. 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

  2. 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

  3. 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?

  4. 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

  7. 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.

  8. 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

  9. 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.

  13. hello I really love this project, I want to apply on my website. But my knowledge of css and jquery is really small. Can you help me to modify it? I need five floors than 4 floors. Please help me!
    Thanks a lot.

  14. Hi, excellent work. Is it possible to apply it using a map of my town?
    Thank you for your answer

  15. Oh, this is great for a website map, and that’s what I am doing right now. Can anyone be more talented than the Codrops guys?

  19. First at all, I Apologize for my bad english, and excuse me , ¿what software you use to draw SVG the icons and the levels and take the coordinates and put them in html? or ¿how you do that?, any information is usefull, thank you in advance

  22. brillant, would be terrific to be able to modify the map with an easy way ? Any tips or hints ? thanks

  28. Hi!

    Thanks for sharing this project!

    How would it be possible to make it work on IE11+?

    Thanks!

  29. Hey
    ma’am can you help me customize it how did you make the inner blocks and is there any framework you used

  30. nice Work!!! i really want to do something at least cloaser on that! where can i find more steps of this ‘tutorial’ plz? 😛

  31. 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?

  32. 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