AzureMapsCodeSamples/Samples/3D-layer/WebGL/WebGLLayer.html at main · Azure-Samples/AzureMapsCodeSamples · GitHub

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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!doctype html>
<html lang="en">
<head>
    <title>Simple 2D WebGL layer - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <link href="/favicon.ico" rel="shortcut icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="This sample showcases the creation of a custom WebGL layer that draws a 2D triangle directly on the map." />
    <meta name="keywords" content="Microsoft, Azure, Maps, 3D, 2D, WebGL" />
    <meta name="author" content="Microsoft Azure Maps" />
    <meta name="version" content="3.0" />
    <meta name="screenshot" content="screenshot.jpg" />

    <link href="https://samples.azuremaps.com/samples.min.css" rel="stylesheet" />

    <!-- Add references to the Azure Maps Map control JavaScript and stylesheet files -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
</head>
<body>
    <div id="map"></div>

    <div id="panel">
        <table>
            <tr title="An integer specifying the minimum zoom level to render the layer at.">
                <td>Min Zoom:</td>
                <td>
                    <form oninput="minz.value=MinZoom.value">
                        <input type="range" id="MinZoom" value="0" min="0" max="24" step="1" onchange="setOptions()" />
                        <output name="minz" for="MinZoom">0</output>
                    </form>
                </td>
            </tr>
            <tr title="An integer specifying the maximum zoom level to render the layer at.">
                <td>Max Zoom:</td>
                <td>
                    <form oninput="maxz.value=MaxZoom.value">
                        <input type="range" id="MaxZoom" value="24" min="0" max="24" step="1" onchange="setOptions()" />
                        <output name="maxz" for="MaxZoom">24</output>
                    </form>
                </td>
            </tr>
            <tr title="Specifies if the layer is visible or not.">
                <td>Visible:</td>
                <td>
                    <input id="Visible" type="checkbox" onclick="setOptions()" checked="checked" />
                </td>
            </tr>
        </table>
    </div>

    <fieldset id="info">
        <legend>Simple 2D WebGL layer</legend>
        This sample showcases the creation of a custom WebGL layer that draws a 2D triangle directly on the map.
    </fieldset>

    <script>
        // Create GLSL source for vertex shader
        const vertexSource = `
            uniform mat4 u_matrix;
            attribute vec2 a_pos;

            void main() {
                gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
            }
        `;

        // Create GLSL source for fragment shader
        const fragmentSource = `
            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
            }
        `;

        // Create a renderer that implements atlas.WebGLRenderer
        const renderer = {
            // Method called when the layer is added to the map
            onAdd: function (map, gl) {
                // Create a vertex shader
                const vertexShader = gl.createShader(gl.VERTEX_SHADER);
                gl.shaderSource(vertexShader, vertexSource);
                gl.compileShader(vertexShader);

                // Create a fragment shader
                const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                gl.shaderSource(fragmentShader, fragmentSource);
                gl.compileShader(fragmentShader);

                // Link the two shaders into a WebGL program
                this.program = gl.createProgram();
                gl.attachShader(this.program, vertexShader);
                gl.attachShader(this.program, fragmentShader);
                gl.linkProgram(this.program);

                this.aPos = gl.getAttribLocation(this.program, "a_pos");

                // Define vertices of the triangle to be rendered in the custom style layer
                const mercator = [
                    ...atlas.data.MercatorPoint.fromPosition([25.004, 60.239]).slice(0, 2), // Helsinki
                    ...atlas.data.MercatorPoint.fromPosition([13.403, 52.562]).slice(0, 2), // Berlin
                    ...atlas.data.MercatorPoint.fromPosition([30.498, 50.541]).slice(0, 2), // Kyiv
                ];

                // Create and initialize a WebGLBuffer to store vertex and color data
                this.buffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(mercator), gl.STATIC_DRAW);
            },

            // Method called on each animation frame
            render: function (gl, matrix) {
                gl.useProgram(this.program);
                gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
                gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
                gl.enableVertexAttribArray(this.aPos);
                gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
                gl.enable(gl.BLEND);
                gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
                gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
            },
        };

        // Create an Azure Maps map object
        var map = new atlas.Map('map', {
            zoom: 3,
            center: [7.5, 58],
            antialias: true,

            // Add authentication details for connecting to Azure Maps
            authOptions: {
                // Use SAS token for authentication
                authType: 'sas',
                getToken: function (resolve, reject, map) {
                    // URL to your authentication service that retrieves a SAS Token
                    var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsSasToken';

                    fetch(tokenServiceUrl).then(r => r.text()).then(token => resolve(token));
                }

                // Alternatively, use an Azure Maps key in development
                // Get an Azure Maps key at https://azuremaps.com/
                // NOTE: The primary key should be used as the key
                //authType: 'subscriptionKey',
                //subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
            }
        });

        var layer;

        // Wait until the map resources are ready
        map.events.add('ready', function () {

            // Create a WebGL layer
            layer = new atlas.layer.WebGLLayer('highlight', { renderer });

            // Add the layer below map labels
            map.layers.add(layer, 'labels');

            // Add map controls
            map.controls.add([
                new atlas.control.ZoomControl(),
                new atlas.control.PitchControl(),
                new atlas.control.CompassControl(),
                new atlas.control.StyleControl({
                    mapStyles: ['road', 'satellite', 'satellite_road_labels', 'night', 'grayscale_light', 'grayscale_dark', 'road_shaded_relief', 'high_contrast_light', 'high_contrast_dark']
                })
            ], {
                position: 'top-right'
            });

        });

        // Update layer options
        function setOptions() {
            layer.setOptions({
                minZoom: parseFloat(document.getElementById('MinZoom').value),
                maxZoom: parseFloat(document.getElementById('MaxZoom').value),
                visible: document.getElementById('Visible').checked
            });
        }
    </script>

</body>
</html>