MediaLayer with interactive georeferencing

This sample demonstrates how to enable and configure the interactive georeferencing tools for MediaLayers in a 3D SceneView.

A web scene has been setup with a MediaLayer containing an ImageElement that has not been completely georeferenced yet. Try to use the interactive tools to align the image with the rest of the scene. If you want to know more about how to add an image and setup control points with a media layer, then have a look at the control points sample.

The image is a site plan for a development near Hardeeville, South Carolina. The source points have already been set to the corners of the buildings and are indicated in red in the image below. The interactive tool allows users to line up those points with the corresponding features in the scene.

site-plan-with-source-points.png

How it works

First, we extract the layer and the corresponding MediaLayerView from the scene.

Use dark colors for code blocksCopy
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
          // The sample scene already contains a media layer with the element we are trying to position
          const mediaLayer = scene.layers.find((item) => item.title == "Hearthstone Lakes Stage 5 Site Plan");
          const mediaLayerView = await view.whenLayerView(mediaLayer);

Setting MediaLayerView.interactive to true enables interactivity on the layer view. This enables a user to click on an image to select it. You can also set the selected element programmatically using the selectedElement property.

Use dark colors for code blocksCopy
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
          // Enable interactivity and select the image
          mediaLayerView.interactive = true;
          mediaLayerView.selectedElement = mediaLayer.source;

There are two tools available for georeferencing media elements. The active tool defaults to "transform" but can be controlled by specifying interactionOptions.tool on the layer view. The following section adds buttons to toggle between them.

Use dark colors for code blocksCopy
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
          transformButton.addEventListener("click", () => {
            transformButton.active = true;
            reshapeButton.active = false;

            mediaLayerView.interactionOptions.tool = "transform";
          });

          reshapeButton.addEventListener("click", () => {
            transformButton.active = false;
            reshapeButton.active = true;

            mediaLayerView.interactionOptions.tool = "reshape";
          });

The "transform" tool is useful for simple positioning of the image and allows moving, scaling and rotating. With the "reshape" tool, the user can directly move the control points on the map for more precise alignment. The control points will snap to nearby features, such as the corners of the green 3d models already present in this scene. Either tool can be used on all georeference types.

tool-comparison.png

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