How is this project made?

[tur-ing]

The 3D Mall Map is an astonishing project. Is there some tool out there that generates the svg code for you?

Because customizing the project by hand seems very very complex.

Thanks,

Marcel

[matthankins]

Agreed, would love to know more about generating the svg elements.

[crnacura]

Each level's SVG was first drawn in Illustrator, then exported and embedded into the markup. Class names were exchanged (the AI SVG export allows for "Internal CSS" styling) and the styles are then defined in the CSS (style.css). The pin levels were also initially SVGs with the same dimensions of each floor but we couldn't use 3D transforms so it needed to be an HTML element instead. But creating an SVG first (using each floor as reference) gives you all the pin coordinates which are simply defined as relative positions using viewport units (we can do that because all levels have the fluid size of the viewport) in the CSS. Hope this makes sense somehow, let me know if it answers your question.

[ylcnky]

Thanks for the above explanation for the workflow. I am trying to load the floors (as svg files) with an <object></object> tag to inline the svg and interact with the individual rooms in the plan. In my svg files, every room has a unique identification number stored in "id" of each <g>. So I can interact with them via jQuery. I see the floor when I load with an <img> tag. However, I could not see my floors when I use <object>. Do you have any idea about how should I progress?. Thanks

[DanielGithb]

Would also like to thank the Info above. I am having a problem with getting more <data-space=""> attributes that the map numbers originally had, e.g level 1 had 9 pins = 9 <data-space=""> attributes. So only 9 <data-space=""> attr can change color when associated pin is clicked, the 10th and higher do not change selected <data-space=""> color anymore. Please help.

[hzhou81]

@crnacura would you provide a single level's SVG for download?

[crnacura]

Yes of course, here it is.