Skip to content

Commit ca72c08

Browse files
rbrundrittrbrundritt
committed
deck.gl V9 updates
Updated deck.gl layers to support V9 of deck gl
1 parent 0578bea commit ca72c08

2 files changed

Lines changed: 172 additions & 105 deletions

File tree

‎Samples/3D-layer/deck.gl/deck.gl.html‎

Lines changed: 69 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,16 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
1010
<meta name="description" content="This sample shows how to create a custom 3D layer with Deck.gl." />
1111
<meta name="keywords" content="3D, Microsoft maps, map, gis, API, SDK, thematic, choropleth, heatmap, heat map, animation, animate, animations, county, population, data-driven, data driven styling, temporal, temporal analysis" />
12-
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
12+
<meta name="author" content="Microsoft Azure Maps" />
13+
<meta name="version" content="1.0" />
1314
<meta name="screenshot" content="screenshot.jpg" />
1415

1516
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
1617
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
1718
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
1819

1920
<!-- deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets. -->
20-
<script src="https://unpkg.com/deck.gl@^8/dist.min.js"></script>
21+
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
2122

2223
<script>
2324
var map;
@@ -30,19 +31,19 @@
3031
style: "grayscale_dark",
3132
antialias: true,
3233

33-
// Add authentication details for connecting to Azure Maps.
34+
//Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/maps
3435
authOptions: {
35-
// Use Azure Active Directory authentication.
36+
//Use Azure Active Directory authentication.
3637
authType: 'anonymous',
37-
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', // Your Azure Maps client id for accessing your Azure Maps account.
38+
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
3839
getToken: function (resolve, reject, map) {
39-
// URL to your authentication service that retrieves an Azure Active Directory Token.
40+
//URL to your authentication service that retrieves an Azure Active Directory Token.
4041
var tokenServiceUrl = "https://samples.azuremaps.com/api/GetAzureMapsToken";
4142

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

45-
// Use an Azure Maps key. Get an Azure Maps key at https://azuremaps.com/. NOTE: The primary key should be used as the key.
46+
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
4647
//authType: 'subscriptionKey',
4748
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
4849
}
@@ -54,19 +55,21 @@
5455
fetch("https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/arc/counties.json")
5556
.then((response) => response.json())
5657
.then(({ features }) => {
57-
// Add the layer to the map
58-
map.layers.add(
59-
new DeckGLLayer({
60-
id: "arc",
61-
data: calculateArcs(features),
62-
getSourcePosition: (d) => d.source,
63-
getTargetPosition: (d) => d.target,
64-
getSourceColor: [255, 0, 0],
65-
getTargetColor: [0, 255, 0],
66-
getWidth: 2,
67-
type: deck.ArcLayer
68-
})
69-
);
58+
59+
// Add the overlay to the map
60+
map.controls.add(new DeckGLOverlay({
61+
layers: [
62+
new deck.ArcLayer({
63+
id: "arc",
64+
data: calculateArcs(features),
65+
getSourcePosition: (d) => d.source,
66+
getTargetPosition: (d) => d.target,
67+
getSourceColor: [255, 0, 0],
68+
getTargetColor: [0, 255, 0],
69+
getWidth: 2
70+
})
71+
]
72+
}));
7073
});
7174

7275
// Add controls
@@ -115,31 +118,51 @@
115118
return arcs;
116119
}
117120

118-
// A custom implementation of WebGLLayer
119-
class DeckGLLayer extends atlas.layer.WebGLLayer {
121+
// A custom control for adding DeckGL to Azure Maps.
122+
class DeckGLOverlay {
120123
constructor(options) {
121-
super(options.id);
122-
// Create an instance of deck.gl MapboxLayer what is compatible with Azure Maps
123-
// https://deck.gl/docs/api-reference/mapbox/mapbox-layer
124-
this._mbLayer = new deck.MapboxLayer(options);
125-
126-
// Create a renderer
127-
const renderer = {
128-
renderingMode: "3d",
129-
onAdd: (map, gl) => {
130-
this._mbLayer.onAdd?.(map["map"], gl);
131-
},
132-
onRemove: (map, gl) => {
133-
this._mbLayer.onRemove?.(map["map"], gl);
134-
},
135-
prerender: (gl, matrix) => {
136-
this._mbLayer.prerender?.(gl, matrix);
137-
},
138-
render: (gl, matrix) => {
139-
this._mbLayer.render(gl, matrix);
140-
}
141-
};
142-
this.setOptions({ renderer });
124+
this.id = options.id;
125+
126+
// Create an instance of deck.gl MapboxOverlay what is compatible with Azure Maps
127+
// https://deck.gl/docs/api-reference/mapbox/mapbox-overlay
128+
this._mbOverlay = new deck.MapboxOverlay(options);
129+
}
130+
131+
onAdd(map, options) {
132+
this.map = map;
133+
return this._mbOverlay.onAdd(map["map"]);
134+
}
135+
136+
onRemove() {
137+
this._mbOverlay.onRemove();
138+
}
139+
140+
getCanvas() {
141+
this._mbOverlay.getCanvas();
142+
}
143+
144+
getId() {
145+
return this.id;
146+
}
147+
148+
pickObject(params) {
149+
return this._mbOverlay.pickObject(params);
150+
}
151+
152+
pickMultipleObjects(params) {
153+
return this._mbOverlay.pickMultipleObjects(params);
154+
}
155+
156+
pickObjects(params) {
157+
return this._mbOverlay.pickObjects();
158+
}
159+
160+
setProps(props) {
161+
this._mbOverlay.setProps(props);
162+
}
163+
164+
finalize() {
165+
this._mbOverlay.finalize();
143166
}
144167
}
145168
</script>
@@ -152,6 +175,8 @@
152175
This sample creates a WebGL layer that integrates the layers from <a href="https://deck.gl/">Deck.gl</a>.
153176
Deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
154177
Deck.gl allows complex visualizations to be constructed by composing existing layers and makes it easy to package and share new visualizations as reusable layers.
178+
<br/><br/>
179+
If using an older version of deck.gl, you can find an older version of this sample <a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/978458eef14881df9cc7316d2fdbb67b9cb09653/Samples/3D-layer/deck.gl/deck.gl.html" target="_blank">here</a>.
155180
</fieldset>
156181
</body>
157182
</html>

‎Samples/3D-layer/newyork/newyork.html‎

Lines changed: 103 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,40 @@
99
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
1010
<meta name="description" content="This sample creates a WebGL trips layer in Manhattan, NY using Deck.gl 3D framework for Azure Maps." />
1111
<meta name="keywords" content="3D, Microsoft maps, map, gis, API, SDK, thematic, choropleth, heatmap, heat map, animation, animate, animations, county, population, data-driven, data driven styling, temporal, temporal analysis" />
12-
<meta name="author" content="Microsoft Azure Maps" /><meta name="version" content="1.0" />
12+
<meta name="author" content="Microsoft Azure Maps" />
13+
<meta name="version" content="1.0" />
1314
<meta name="screenshot" content="screenshot.gif" />
1415

1516
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
1617
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
1718
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
1819

1920
<!-- deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets. -->
20-
<script src="https://unpkg.com/deck.gl@^8/dist.min.js"></script>
21+
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
2122

2223
<script>
23-
var map;
24+
var map, deckOverlay;
25+
26+
//Define animation options.
27+
const loopLength = 1800; // unit corresponds to the timestamp in source data
28+
let animationSpeed = 5;
29+
let time = 500;
30+
let shouldRotate = true;
31+
let rotation = 0;
32+
33+
//Initialize the trip layer options.
34+
let tripLayerOptions = {
35+
id: "trips",
36+
data: "/3d-layer/newyork/trips-v7.json",
37+
getPath: (d) => d.path,
38+
getTimestamps: (d) => d.timestamps,
39+
getColor: (d) => (d.vendor === 0 ? [250, 250, 93] : [50, 230, 50]),
40+
opacity: 0.3,
41+
widthMinPixels: 2,
42+
trailLength: 180,
43+
currentTime: time,
44+
shadowEnabled: false
45+
};
2446

2547
function GetMap() {
2648
map = new atlas.Map("map", {
@@ -30,26 +52,35 @@
3052
style: "grayscale_dark",
3153
antialias: true,
3254

33-
// Add authentication details for connecting to Azure Maps.
55+
//Add your Azure Maps subscription client ID to the map SDK. Get an Azure Maps client ID at https://azure.com/maps
3456
authOptions: {
35-
// Use Azure Active Directory authentication.
57+
//Use Azure Active Directory authentication.
3658
authType: 'anonymous',
37-
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', // Your Azure Maps client id for accessing your Azure Maps account.
59+
clientId: 'e6b6ab59-eb5d-4d25-aa57-581135b927f0', //Your Azure Maps client id for accessing your Azure Maps account.
3860
getToken: function (resolve, reject, map) {
39-
// URL to your authentication service that retrieves an Azure Active Directory Token.
61+
//URL to your authentication service that retrieves an Azure Active Directory Token.
4062
var tokenServiceUrl = "https://samples.azuremaps.com/api/GetAzureMapsToken";
4163

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

45-
// Use an Azure Maps key. Get an Azure Maps key at https://azuremaps.com/. NOTE: The primary key should be used as the key.
67+
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
4668
//authType: 'subscriptionKey',
4769
//subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
4870
}
4971
});
5072

5173
// Wait until the map resources are ready
5274
map.events.add("ready", function () {
75+
//Add the overlay to the map.
76+
deckOverlay = new DeckGLOverlay({
77+
layers: [
78+
new deck.TripsLayer(tripLayerOptions)
79+
]
80+
});
81+
82+
// Add the overlay to the map
83+
map.controls.add(deckOverlay);
5384

5485
animate();
5586

@@ -70,35 +101,19 @@
70101
});
71102
}
72103

73-
const loopLength = 1800; // unit corresponds to the timestamp in source data
74-
75-
let trailColor0 = [250, 250, 93];
76-
let trailColor1 = [50, 230, 50];
77-
let animationSpeed = 5;
78-
let trailLength = 180;
79-
let time = 500;
80-
let shouldRotate = true;
81-
let rotation = 0;
82-
83104
const animate = () => {
84105
time = (time + animationSpeed) % loopLength;
85-
//remove("trips");
86-
map.layers.add(
87-
new DeckGLLayer({
88-
id: "trips",
89-
type: deck.TripsLayer,
90-
data: "/3d-layer/newyork/trips-v7.json",
91-
getPath: (d) => d.path,
92-
getTimestamps: (d) => d.timestamps,
93-
getColor: (d) => (d.vendor === 0 ? trailColor0 : trailColor1),
94-
opacity: 0.3,
95-
widthMinPixels: 2,
96-
rounded: true,
97-
trailLength,
98-
currentTime: time,
99-
shadowEnabled: false
100-
})
101-
);
106+
107+
//Update the time of the trips layer.
108+
tripLayerOptions.currentTime = time;
109+
110+
//Update the properties of the deck overlay.
111+
deckOverlay.setProps({
112+
layers: [
113+
new deck.TripsLayer(tripLayerOptions)
114+
]
115+
});
116+
102117
if (shouldRotate) {
103118
map["map"].rotateTo((rotation++ / 5) % 360, { duration: 0 });
104119
}
@@ -114,33 +129,54 @@
114129
shouldRotate = !shouldRotate;
115130
}
116131

117-
// A custom implementation of WebGLLayer
118-
class DeckGLLayer extends atlas.layer.WebGLLayer {
132+
// A custom control for adding DeckGL to Azure Maps.
133+
class DeckGLOverlay {
119134
constructor(options) {
120-
super(options.id);
121-
// Create an instance of deck.gl MapboxLayer what is compatible with Azure Maps
122-
// https://deck.gl/docs/api-reference/mapbox/mapbox-layer
123-
this._mbLayer = new deck.MapboxLayer(options);
124-
125-
// Create a renderer
126-
const renderer = {
127-
renderingMode: "3d",
128-
onAdd: (map, gl) => {
129-
this._mbLayer.onAdd?.(map["map"], gl);
130-
},
131-
onRemove: (map, gl) => {
132-
this._mbLayer.onRemove?.(map["map"], gl);
133-
},
134-
prerender: (gl, matrix) => {
135-
this._mbLayer.prerender?.(gl, matrix);
136-
},
137-
render: (gl, matrix) => {
138-
this._mbLayer.render(gl, matrix);
139-
}
140-
};
141-
this.setOptions({ renderer });
135+
this.id = options.id;
136+
137+
// Create an instance of deck.gl MapboxOverlay what is compatible with Azure Maps
138+
// https://deck.gl/docs/api-reference/mapbox/mapbox-overlay
139+
this._mbOverlay = new deck.MapboxOverlay(options);
140+
}
141+
142+
onAdd(map, options) {
143+
this.map = map;
144+
return this._mbOverlay.onAdd(map["map"]);
145+
}
146+
147+
onRemove() {
148+
this._mbOverlay.onRemove();
149+
}
150+
151+
getCanvas() {
152+
this._mbOverlay.getCanvas();
153+
}
154+
155+
getId() {
156+
return this.id;
157+
}
158+
159+
pickObject(params) {
160+
return this._mbOverlay.pickObject(params);
161+
}
162+
163+
pickMultipleObjects(params) {
164+
return this._mbOverlay.pickMultipleObjects(params);
165+
}
166+
167+
pickObjects(params) {
168+
return this._mbOverlay.pickObjects();
169+
}
170+
171+
setProps(props) {
172+
this._mbOverlay.setProps(props);
173+
}
174+
175+
finalize() {
176+
this._mbOverlay.finalize();
142177
}
143178
}
179+
144180
</script>
145181
</head>
146182
<body onload="GetMap()">
@@ -173,9 +209,15 @@
173209

174210
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
175211
<legend>Yellow Cab vs Green Cab Trips in Manhattan</legend>
176-
This sample creates a WebGL trips layer in Manhattan, NY using <a href="https://deck.gl/">Deck.gl</a> 3D framework for Azure Maps.
212+
This sample creates a WebGL trips layer in Manhattan, NY using
213+
<a href="https://deck.gl/">Deck.gl</a> 3D framework for Azure Maps.
177214
Trips are taken from June 16, 2016 21:00 to 21:30
178-
Trip data source: <a href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml">NYC Taxi & Limousine Commission Trip Records</a>.
215+
Trip data source:
216+
<a href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml">NYC Taxi & Limousine Commission Trip Records</a>.
217+
<br />
218+
<br />
219+
If using an older version of deck.gl, you can find an older version of this sample
220+
<a href="https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/978458eef14881df9cc7316d2fdbb67b9cb09653/Samples/3D-layer/newyork/newyork.html" target="_blank">here</a>.
179221
</fieldset>
180222
</body>
181223
</html>

0 commit comments

Comments
 (0)