Displaying AutoCAD drawings using xamWebMap

As has been described in other articles, the xamWebMap uses shapeFiles as is its source for shape data.  While the free shapefiles you find on the internet are generally geography related, there are other file formats that can be converted to shapefile format, allowing you to expand the possibilities of what you can plot in the Map.  In this article, I am going to show you how you can use Visio and some free shapefile conversion tools to create and show an AutoCAD drawing using the xamWebMap.

Creating an AutoCAD file

I don’t have AutoCAD, but thankfully Visio allows my to save drawings to AutoCAD’s dxf format.  So what I want to do is create a new Visio drawing of everyone's favorite shape, the office cubicle.  Visio makes it easy to draw this by including some default cubicle shapes as part of its Map and Floor Plan drawing templates.

image

Once I have added the cubicle shape to my drawing all I have to do is save the drawing in the dxf format.  I do this by choosing the Save As option, and selecting the AutoCAD Interchange option from the Save as type dropdown:

image

Thats it!  I now have an AutoCAD file that I can convert into a shapefile.

Shapefile Conversion and Fixups

Now that I have an AutoCAD drawing of my cube, I need to convert it to the shapefile format.  A good tool for creating and editing shapefiles is MapWindow GIS (http://www.mapwindow.org/), a free and open source desktop application that lets me view and edit GIS data in lots of different formats, including shapefile.  Unfortunately, AutoCAD files are not something MapWindow GIS reads natively but using MapWindow GIS’s plug-in modal I can add something like Christopher Michaelis’ DXF to Shapefile converter to MapWindow GIS and import the AutoCAD drawing that way.

Once I get the converter plug-in installed, it shows up in the Importers menu in MapWindow:

image

All I have to do is open the converter, give it the appropriate input and output paths, click covert and viola!, a new shapefile is born.

image

Once the shapefile is created, I need to do some fixups to it in order to get the specific shape combinations that I want.  For example, when the cubicle is initially imported, items like the chairs and computer are all made up of individual lines, but I want to treat those items as single units, so I need to merge those individual shapes into a single shape, which MapWindow allows me to do.

The MapWindow toolbar contains two tools I need to combine shapes together, the selection tool and the merge shapes tool:

image

I use the selection tool to select all of the shapes I want to merge, such as all of the shapes that comprise the computer, then click the Merge tool button.

Now all that's left is adding the shapefile to a Silverlight project and displaying using the Map.

Displaying the Cubicle in the Map

Now that I have my shapefile created, I want to display it using the xamWebMap.  To do that I use the same basic techniques for loading and viewing any other shapefile.  First I add the shapefiles .shp and .dbf to my project ClientBin folder, then in XAML create a MapLayer and use the ShapeFileReader to import my cubicle shapefile:

<UserControl x:Class="SilverlightApplication30.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:igMap="clr-namespace:Infragistics.Silverlight.Map;
        assembly=Infragistics.Silverlight.DataVisualization.Map.v9.1"
    Width="800" Height="600">
    <Border CornerRadius="10" BorderThickness="2" BorderBrush="Black">
        <Grid x:Name="LayoutRoot" Background="White" Margin="10,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <igMap:XamWebMap x:Name="XamWebMap1" Grid.Row="0" 
                         ElementClick="XamWebMap1_ElementClick" 
                         ViewportBackground="White">
                <igMap:XamWebMap.Layers>
                    <igMap:MapLayer StrokeThickness="2">
                        <igMap:MapLayer.Reader>
                            <igMap:ShapeFileReader Uri="cubicle" 
                                DataMapping="Name=NAME;PartNo=PARTNO" />
                        </igMap:MapLayer.Reader>
                    </igMap:MapLayer>
                </igMap:XamWebMap.Layers>
            </igMap:XamWebMap>

            <TextBlock Grid.Row="1" Margin="0,5,0,0" 
                       FontSize="16" x:Name="lblDescription" 
                       Text="Part Description: Nothing Selected" />
        </Grid>
    </Border>
</UserControl>

Note that I am mapping some additional field from the shapefile into the map using the DataMapping property (see my article on data binding in the map for more info).  Using the Element Click event, I can update the text in the TextBlock at the bottom of the app:

private void XamWebMap1_ElementClick(object sender, 
    Infragistics.Silverlight.Map.MapElementClickEventArgs e)
{
    this.lblDescription.Text = 
        string.Format("Description: {0} ({1})", 
            e.Element.Name, 
            e.Element.GetProperty("PartNo").ToString()
        );
}

Now when I run the app, it displays my cubicle drawing in the Map and I get all of the same functionality I get showing a geographic map, like panning and zooming and shape hover and click events:

image 

Related
Recommended