# Adding Layout Drawing menu to your component (Floorplan & Spatial Drawing)

{% embed url="<https://app.tango.us/app/embed/601784aa-a12b-4edb-8aff-c74acf7a7455?iframe=true>" %}

***

​

#### 1. Navigate to your 2D Scene. Click on Environment Options from the admin component

![Navigate to your 2D Scene. Click on Environment Options from the admin component](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/4f457358-709b-491f-b1fe-3ff937458e44/7c8a48c7-3e42-4c46-8042-11499c1ca2d1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1322\&fp-y=0.3862\&fp-z=2.3320\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=190\&mark-y=295\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNjAmaD04NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 2. Click on Menu Options

![Click on Menu Options](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/0907a0d4-251d-4de8-aa36-dc81ecf8e01c/bf7514da-dbea-4acd-9dbf-548c74e40900.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1482\&fp-y=0.3496\&fp-z=2.2140\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=192\&mark-y=285\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDMmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 3. Click on Show Layout Drawing Menu

![Click on Show Layout Drawing Menu](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/1c56e3b1-ef48-4efb-8a2f-eab03fa66153/eee45f67-b783-4ec4-b915-8489ae7915a2.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4009\&fp-y=0.4424\&fp-z=2.9951\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=567\&mark-y=303\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NiZoPTY4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)

#### 4. Optionally, if you want non-admin users to be able to draw, click on Show Non-Admin User Layout Drawing Menu Help Info

![Optionally, if you want non-admin users to be able to draw, click on Show Non-Admin User Layout Drawing Menu Help Info](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/5c2f07db-d422-4527-b9bf-a1e5817e6350/a1129c35-363e-438f-9adb-15124024dfe7.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3832\&fp-y=0.4807\&fp-z=2.9966\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=919\&mark-y=316\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NiZoPTY5JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)

#### 5. If you want your end-users to have a 3D preview of your layouts by clicking a button, Click on Show 3D Preview button Info

![If you want your end-users to have a 3D preview of your layouts by clicking a button, Click on Show 3D Preview button Info](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/53ed9e65-8362-43f6-9473-7caa23021539/c815262c-09a4-4a72-9960-a7b7caf8bf88.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4154\&fp-y=0.5111\&fp-z=1.9966\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=509\&mark-y=403\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NCZoPTQ2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)

#### 6. Click on Update to close the window.

![Click on Update to close the window.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/f4f84362-b4e2-45ff-b1d4-8738e25d95aa/46c7bc40-0a71-4ffc-8e4e-d42f664a4855.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0922\&fp-y=0.8537\&fp-z=2.7356\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=195\&mark-y=355\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMTUmaD0xMDAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)

#### 7. Now we notice a Layout menu Item

![Now we notice a Layout menu Item](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/6bf34df7-f5bc-4c86-a95b-17adf53d53e8/2934b16c-dd0f-4365-ab25-86da5aa13892.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.5705\&fp-z=1.8132\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=13\&mark-y=294\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDcmaD04NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 8. Layouts consist of Areas and Walls. Areas are typically representative of rooms

![Layouts consist of Areas and Walls. Areas are typically representative of rooms](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/00cf01a8-b817-4a7a-a202-38f4e15a0721/2a41abe7-d9a9-44a1-b5ae-963140c26238.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.6301\&fp-z=1.8754\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=34\&mark-y=293\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MjUmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 9. Walls can be drawn and resized. A measurement of the length of the wall is shown alongside the wall. This measurement can be changed to metric in the environment setup of this component.

![Walls can be drawn and resized. A measurement of the length of the wall is shown alongside the wall. This measurement can be changed to metric in the environment setup of this component.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/0813751c-dd30-4e87-a3bf-27419a6ca291/3604c858-36cb-4d96-b327-5ba9e54227a3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.7507\&fp-z=1.8754\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=34\&mark-y=315\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MjUmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 10. To draw as an admin, Click Start Drawing Walls in the left side menu.

![To draw as an admin, Click Start Drawing Walls in the left side menu.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/303a026e-b669-4098-8bff-e422c67c1480/a52a9897-dd41-44f1-92a3-2088978d3976.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3649\&fp-y=0.6410\&fp-z=1.3699\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=40\&mark-y=467\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDAmaD01MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 11. Simply click and drag to create a wall. Once done, you can let go of your cursor.

![Simply click and drag to create a wall. Once done, you can let go of your cursor.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/a7d49a08-5da6-4baf-944c-4d8444cd71a9/a4184103-cf66-4c6e-bdd1-ec2ea42f199e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.6227\&fp-y=0.7547\&fp-z=1.3360\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=5\&mark-y=147\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkwJmg9NjEzJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)

#### 12. If you added 3D preview, Here's where your users will see it

![If you added 3D preview, Here's where your users will see it](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/6e9703e2-6393-48f8-a933-ab538dab7c21/f0d71a14-4a8f-4f41-8d6c-91c69a10958a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4295\&fp-y=0.3862\&fp-z=2.5010\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=450\&mark-y=292\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMDAmaD05MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)

#### 13. Now we see our layout in 3D, walls and linked 3D models

![Now we see our layout in 3D, walls and linked 3D models](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/33d7f4ca-1fd0-4f1c-b584-53835eab4dc3/068db2d6-b861-4ed6-b69f-d7b5e508b651.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.6227\&fp-y=0.6633\&fp-z=1.3360\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=5\&mark-y=64\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkwJmg9NjE1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D)

#### 14. Don't forget to save your settings. Click on Save to ensure the menus are set up properly for your user experience.

![Don't forget to save your settings. Click on Save to ensure the menus are set up properly for your user experience.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/e7f692d6-3d51-4d28-9c4f-e776853b2743/9679d91e-4ad2-464e-92f3-307d8843aa05.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2153\&fp-y=0.9702\&fp-z=2.8239\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=508\&mark-y=567\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xODMmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)