Edit KML ground overlay

View inWPFUWPFormsiOSAndroid
View on GitHub

Edit the values of a KML ground overlay.

Image of edit KML ground overlay

Use case

KML ground overlays are used for showing aerial imagery, symbology, or other images draped over a scene. Changing the geometry, rotation, and other attributes of a ground overlay after it has been loaded allows for live editing. For example, editing the geometry and opacity of a historical image draped over present day satellite imagery makes it possible to view change over time.

How to use the sample

Use the slider to adjust the opacity of the ground overlay.

How it works

  1. Create an Envelope defining the geometry of the overlay.
  2. Create a KmlIcon using a Uri linking to an image.
  3. Create a KmlGroundOverlay using the envelope and icon.
  4. Set the value ofKmlGroundOverlay.Rotation.
  5. Create a KmlDataset using the ground overlay.
  6. Create a KmlLayer using the dataset.
  7. Add the KML layer to the scene.
  8. Listen for changes to the opacity slider and change the KmlGroundOverlay.Color value appropriately.

Relevant API

  • KmlDataset
  • KmlGroundOverlay
  • KmlIcon
  • KmlLayer

Offline data

This sample uses an .jpg image downloaded from ArcGIS Online.

About the data

The image used in this sample is an aerial view of the campus of the University of Oregon. This imagery was taken in 1944 by the U.S. Army Corps of Engineers. It is publicly available as Online Aerial Imagery hosted by Oregon University Library. It is also available as a Portal item on ArcGIS Online as University of Oregon Campus Aerial Imagery - 1944.

Tags

imagery, Keyhole, KML, KMZ, OGC

Sample Code

EditKmlGroundOverlay.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
// Copyright 2019 Esri.
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific
// language governing permissions and limitations under the License.

using ArcGISRuntime;
using ArcGISRuntime.Samples.Managers;
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Ogc;
using Esri.ArcGISRuntime.UI.Controls;
using Foundation;
using System;
using UIKit;

namespace ArcGISRuntimeXamarin.Samples.EditKmlGroundOverlay
{
    [Register("EditKmlGroundOverlay")]
    [ArcGISRuntime.Samples.Shared.Attributes.Sample(
        name: "Edit KML ground overlay",
        category: "Layers",
        description: "Edit the values of a KML ground overlay.",
        instructions: "Use the slider to adjust the opacity of the ground overlay.",
        tags: new[] { "KML", "KMZ", "Keyhole", "OGC", "imagery", "Featured" })]
    [ArcGISRuntime.Samples.Shared.Attributes.OfflineData("1f3677c24b2c446e96eaf1099292e83e")]
    public class EditKmlGroundOverlay : UIViewController
    {
        // Hold references to UI controls.
        private SceneView _mySceneView;
        private UISlider _slider;
        private UILabel _valueLabel;

        // Uri of the image for the ground overlay.
        private readonly Uri _imageryUri = new Uri(DataManager.GetDataFolder("1f3677c24b2c446e96eaf1099292e83e", "1944.jpg"));

        // The ground overlay KML node.
        private KmlGroundOverlay _overlay;

        public EditKmlGroundOverlay()
        {
            Title = "Edit KML ground overlay";
        }

        private void Initialize()
        {
            // Create a scene for the sceneview.
            Scene myScene = new Scene(BasemapStyle.ArcGISImageryStandard);
            _mySceneView.Scene = myScene;

            // Create a geometry for the ground overlay.
            Envelope overlayGeometry = new Envelope(-123.066227926904, 44.04736963555683, -123.0796942287304, 44.03878298600624, SpatialReferences.Wgs84);

            // Create a KML Icon for the overlay image.
            KmlIcon overlayImage = new KmlIcon(_imageryUri);

            // Create the KML ground overlay.
            _overlay = new KmlGroundOverlay(overlayGeometry, overlayImage);

            // Set the rotation of the ground overlay.
            _overlay.Rotation = -3.046024799346924;

            // Create a KML dataset with the ground overlay as the root node.
            KmlDataset dataset = new KmlDataset(_overlay);

            // Create a KML layer for the scene view.
            KmlLayer layer = new KmlLayer(dataset);

            // Add the layer to the map.
            _mySceneView.Scene.OperationalLayers.Add(layer);

            // Move the viewpoint to the ground overlay.
            _mySceneView.SetViewpoint(new Viewpoint(_overlay.Geometry, new Camera(_overlay.Geometry.Extent.GetCenter(), 1250, 45, 60, 0)));

            // Set the default value for the slider.
            _slider.Value = 255;
        }

        private void SliderValueChanged(object sender, EventArgs e)
        {
            // Change the color of the KML ground overlay image to edit the alpha-value. (Other color values are left as-is in the original image.)
            _overlay.Color = System.Drawing.Color.FromArgb((int)((UISlider)sender).Value, 0, 0, 0);

            // Display the value.
            _valueLabel.Text = ((int)((UISlider)sender).Value).ToString();
        }

        public override void LoadView()
        {
            // Create the views.
            View = new UIView { BackgroundColor = ApplicationTheme.BackgroundColor };

            _mySceneView = new SceneView();
            _mySceneView.TranslatesAutoresizingMaskIntoConstraints = false;

            UILabel opacityLabel = new UILabel() { Text = "Opacity ", TranslatesAutoresizingMaskIntoConstraints = false };

            _slider = new UISlider()
            {
                MinValue = 0,
                MaxValue = 255,
                TranslatesAutoresizingMaskIntoConstraints = false
            };

            _valueLabel = new UILabel() { Text = "255", TranslatesAutoresizingMaskIntoConstraints = false };

            UIToolbar toolbar = new UIToolbar();
            toolbar.TranslatesAutoresizingMaskIntoConstraints = false;
            toolbar.Items = new[]
            {
                new UIBarButtonItem {CustomView = opacityLabel},
                new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
                new UIBarButtonItem {CustomView = _slider, Width = 200},
                new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace),
                new UIBarButtonItem {CustomView = _valueLabel}
            };

            // Add the views.
            View.AddSubviews(_mySceneView, toolbar);

            // Lay out the views.
            NSLayoutConstraint.ActivateConstraints(new[]
            {
                _mySceneView.TopAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.TopAnchor),
                _mySceneView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
                _mySceneView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
                _mySceneView.BottomAnchor.ConstraintEqualTo(toolbar.TopAnchor),

                toolbar.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor),
                toolbar.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor),
                toolbar.BottomAnchor.ConstraintEqualTo(View.SafeAreaLayoutGuide.BottomAnchor)
            });
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            Initialize();
        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            // Subscribe to events.
            _slider.ValueChanged += SliderValueChanged;
        }

        public override void ViewDidDisappear(bool animated)
        {
            base.ViewDidDisappear(animated);

            // Unsubscribe from events, per best practice.
            _slider.ValueChanged -= SliderValueChanged;
        }
    }
}

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