Create and save KML file

View inWPFUWPFormsiOSAndroid
View on GitHub

Construct a KML document and save it as a KMZ file.

Image of create and save KML file

Use case

If you need to create and save data on the fly, you can use KML to create points, lines, and polygons by sketching on the map, customizing the style, and serializing them as KML nodes in a KML Document. Once complete, you can share the KML data with others that are using a KML reading application, such as ArcGIS Earth.

How to use the sample

Tap on one of the buttons in the middle row to start adding a geometry. Tap on the map view to place vertices. Tap the "Complete Sketch" button to add the geometry to the KML document as a new KML placemark. Use the style interface to edit the style of the placemark. If you do not wish to set a style, tap the "Don't Apply Style" button. When you are finished adding KML nodes, tap on the "Save KMZ file" button to save the active KML document as a .kmz file on your system. Use the "Reset" button to clear the current KML document and start a new one.

How it works

  1. Create a KmlDocument
  2. Create a KmlDataset using the KmlDocument.
  3. Create a KmlLayer using the KmlDataset and add it to Map.OperationalLayers.
  4. Create Geometry using SketchEditor.
  5. Project that Geometry to WGS84 using GeometryEngine.Project.
  6. Create a KmlGeometry object using that projected Geometry.
  7. Create a KmlPlacemark using the KmlGeometry.
  8. Add the KmlPlacemark to the KmlDocument.
  9. Set the KmlStyle for the KmlPlacemark.
  10. When finished with adding KmlPlacemark nodes to the KmlDocument, save the KmlDocument to a file using the SaveAsAsync method.

Relevant API

  • GeometryEngine.Project
  • KmlDataset
  • KmlDocument
  • KmlGeometry
  • KmlLayer
  • KmlNode.SaveAsASync
  • KmlPlacemark
  • KmlStyle
  • SketchEditor

Tags

Keyhole, KML, KMZ, OGC

Sample Code

CreateAndSaveKmlFile.xamlCreateAndSaveKmlFile.xaml.cs
                                                                                                                     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<ContentPage
    x:Class="ArcGISRuntimeXamarin.Samples.CreateAndSaveKmlFile.CreateAndSaveKmlFile"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:Windows.UI.Xaml.Controls;assembly=Windows.Foundation.UniversalApiContract"
    xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms"
    xmlns:local="clr-namespace:ArcGISRuntimeXamarin.Samples.CreateAndSaveKmlFile">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:ImageConverter x:Key="imageConverter" />
            <local:ColorConverter x:Key="colorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <Grid>
        <Grid x:Name="MainUI">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <esriUI:MapView
                x:Name="MyMapView"
                Grid.Row="0"
                Grid.RowSpan="2" />
            <Grid x:Name="StatusGrid" BackgroundColor="DimGray">
                <Label
                    x:Name="Status"
                    Grid.Row="0"
                    Margin="5"
                    HorizontalOptions="FillAndExpand"
                    Text="Select the type of feature you would like to add."
                    TextColor="White" />
            </Grid>
            <Grid Grid.Row="2">
                <Grid x:Name="ShapeGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Button
                        Grid.Column="0"
                        Clicked="Edit_Click"
                        Text="Point" />
                    <Button
                        Grid.Column="1"
                        Clicked="Edit_Click"
                        Text="Polyline" />
                    <Button
                        Grid.Column="2"
                        Clicked="Edit_Click"
                        Text="Polygon" />
                </Grid>
                <Button
                    x:Name="CompleteButton"
                    Clicked="Complete_Click"
                    IsVisible="False"
                    Text="Complete Geometry" />
            </Grid>
            <Grid x:Name="SaveResetGrid" Grid.Row="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button
                    Grid.Column="0"
                    Clicked="Save_Click"
                    Text="Save" />
                <Button
                    Grid.Column="1"
                    Clicked="Reset_Click"
                    Text="Reset" />
            </Grid>
        </Grid>
        <Grid x:Name="StyleUI" IsVisible="False">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <Label
                Grid.Row="0"
                Margin="5"
                HorizontalTextAlignment="Center"
                Text="Select a style for the placemark." />
            <ListView
                x:Name="IconPicker"
                Grid.Row="1"
                ItemSelected="Apply_Style_Click">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ImageCell ImageSource="{Binding Path=., Converter={StaticResource imageConverter}}" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <ListView
                x:Name="ColorPicker"
                Grid.Row="1"
                IsVisible="False"
                ItemSelected="Apply_Style_Click">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <BoxView Color="{Binding Path=., Converter={StaticResource colorConverter}}" />
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <Button
                Grid.Row="3"
                Clicked="No_Style_Click"
                Text="Dont Apply Style" />
        </Grid>
    </Grid>
</ContentPage>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.