Interactive AutoCAD in Website

31 Oct

I have previously shown how to put a drawing in a website using DWF and OpenLayers. This time I will show how to use an image map created by Qgis.

Save your drawing as a DXF. I am interested in room polygons so here is my drawing:

Bring this drawing in to Qgis as a polygon using the dxf2shp converter plugin.

You now have a shapefile:

Open the editor and add a column for room names. I also added a column for URLs which will be used for a popup later.

Now we can export the drawing to an image map based website using the HTML Image Map Plugin.

Configure the webpage using the options provided. I am using the URL field for “href attr” option. This will make it a link that can be clicked. I will ignore the onlclick, and stick with a hover.




I opened up the HTML code and added a title, my face, and put the hover <DIV> at the bottom of the page. When you hover over a room, you will see the type of room displayed on the bottom of the page and as a tooltip. If you click a room, you will be taken to a website. You can fully customize this website. And I suggest you do.

Here are all my files in a ZIP if you want to play with the webpage or see my awesome DXF. The File is named “Files.DOC” I had to do this to upload them. Rename the file to “Files.ZIP” and it will work fine. FYI – this is a cool trick to hide files. Windows reads the extension and makes it look like the extension. But it is really whatever you created originally.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: