From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
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:
When clicking on a level or when clicking on a space in the sidebar, the respective level opens and the pins show:
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:
We hope you enjoy this little experiment and find it inspiring!
Simple amazing !! 🙂
Awesome as usually
Awesome (y)
Wow, great demo, I love it!
Amazing and functional.
Great thought!!
Wow!!! :O
Awesome work. you are great.
Awesome!!!
Beautiful, simple and efficient ! Great work as usual. When I see interactive screens in some malls and their poor performances… You are light years ahead of them.
Good job again !
This is so awesome! Keep up the good work, very cool and inspiring to see.
Wow! Awesome work!
Wow. Fantastic work.
Nice oneeeeeeeeee
how can i change the pics and put the map for my building
It should switch to a more “plane” mode on mobiles in portrait mode, since a map becomes too small while there are a lot of empty space.
This is very good. I really like the neat design.
Well done!
So good! Usable, clean, organized and edgy without being techie! Briliant work 🙂
Just Awesome
WOW Thanks really really Amazing!
you do amazing work!
Great piece of work!
:~ you’re such an incredible developer!
This is awesome!
Inspiring! I am not a coder, but still love your stuff
This is fantastic, great work! Thanks for sharing on Github, will look at creating a floorplan of our building for new (and old!) employees to reference.
Pretty awesome!!!
Could you tell me what program you used to create these svg floor layer images? inkscape? illustrator? sketch? Great work!
thanks, excellent work, congratulations…
Thank you all! I really appreciate it! Cheers, ML
Hi Mary Lou,
Hope you are doing great!
Really need your help on this one.
Is there a way you can add a link in the content_details that will trigger / open up another pin?
Thank you so much.
Great work, as usual!
So nice!
so awesome and talented on so many levels
Wow… awesome!!!
Great work!
Brilliant!!
The idea and execution both are marvelous. Hats off!
Very nice design and concept. Great Work.
Congratulations for you work, I had a question, how you draw the plans (the floors layers)? to hand or use some software
This is some of the most impressive work I’ve seen here period (.)
Great work!
Is there a way to bind the pins to the svg paths withouth specify the placement in the css class?
Beautiful indeed!
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
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?
Excellent work 🙂
Awesome… I will use the idea for historical areas
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
Great!
Great job Mary Lou ,i love all your work
GREAT JOB
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