• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
Silverlight
  • Product Platforms
  • More
Silverlight
Silverlight Displaying AutoCAD drawings using xamWebMap
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
Silverlight requires membership for participation - click to join
  • Silverlight
  • Auto-Detail Zoom with MapLayers
  • Building the oMovies Browser: Netflix oData using Infragistics NetAdvantage Silverlight Controls
  • Conditional Formatting With The XamWebGrid
  • Custom Commands with Infragistics Silverlight Commanding Framework
  • +Data Display using xamWebMap
  • Displaying AutoCAD drawings using xamWebMap
  • Extension Methods for Navigating the xamDataChart
  • faceOut - A Silverlight Reference Implementation
  • Red vs. Blue: Conditional Formatting in xamWebMap
  • Styling the xamWebGrid Group By Area
  • Using the VirtualCollection for Server-Side xamWebGrid Paging

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 

Technorati Tags: xamWebMap,Silverlight,Data Visualization,NetAdvantage
  • Data Visualization
  • NetAdvantage
  • Silverlight
  • xamWebMap
  • Share
  • History
  • More
  • Cancel
Related
Recommended