Skip to content

Commit 34c2e69

Browse files
rbrundrittrbrundritt
authored
Merge pull request #174 from rbrundritt/main
Update multiple samples
2 parents 7b7d887 + d098f31 commit 34c2e69

9 files changed

Lines changed: 60 additions & 29 deletions

File tree

‎Samples/Animations/Animate along a route path/Animate along a route path.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@
2626
//Create an array of point features with timestamp information to define a route to animate along.
2727
//To animate a route, there must be a _timestamp property that has a value from Date.getTime().
2828
var routePoints = [
29-
new atlas.data.Feature(new atlas.data.Point([-122.34758, 47.62155]), { _timestamp: new Date('Tue, 18 Aug 2020 00:53:53 GMT').getTime() }),
30-
new atlas.data.Feature(new atlas.data.Point([-122.34764, 47.61859]), { _timestamp: new Date('Tue, 18 Aug 2020 00:54:53 GMT').getTime() }),
31-
new atlas.data.Feature(new atlas.data.Point([-122.33787, 47.61295]), { _timestamp: new Date('Tue, 18 Aug 2020 00:56:53 GMT').getTime() }),
32-
new atlas.data.Feature(new atlas.data.Point([-122.34217, 47.60964]), { _timestamp: new Date('Tue, 18 Aug 2020 00:59:53 GMT').getTime() })
29+
new atlas.data.Feature(new atlas.data.Point([-122.34758, 47.62155]), { timestamp: new Date('Tue, 18 Aug 2020 00:53:53 GMT').getTime() }),
30+
new atlas.data.Feature(new atlas.data.Point([-122.34764, 47.61859]), { timestamp: new Date('Tue, 18 Aug 2020 00:54:53 GMT').getTime() }),
31+
new atlas.data.Feature(new atlas.data.Point([-122.33787, 47.61295]), { timestamp: new Date('Tue, 18 Aug 2020 00:56:53 GMT').getTime() }),
32+
new atlas.data.Feature(new atlas.data.Point([-122.34217, 47.60964]), { timestamp: new Date('Tue, 18 Aug 2020 00:59:53 GMT').getTime() })
3333
];
3434

3535
function getMap() {
@@ -119,10 +119,13 @@
119119
pin = new atlas.Shape(routePoints[0]);
120120
pinSource.add(pin);
121121

122+
//Extract timestamp information from a custom property of the point features.
123+
//By default the `moveAlongRoute` function looks for a `_timestamp` property on the point features that is a Date.getTime() value.
124+
//If your points already have a `_timestamp` property with the correct value type, you can skip this extraction step.
125+
routePoints = atlas.animations.extractRoutePoints(route, 'timestamp');
126+
122127
//Create the animation.
123128
animation = atlas.animations.moveAlongRoute(routePoints, pin, {
124-
//Specify the property that contains the timestamp.
125-
timestampProperty: 'timestamp',
126129

127130
//Capture metadata so that data driven styling can be done.
128131
captureMetadata: true,

‎Samples/Controls/Legend control options/Legend control options.html‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,12 @@
177177
minimized: elm.checked
178178
});
179179
}
180+
181+
function updateMaxWidth(elm) {
182+
legend.setOptions({
183+
maxWidth: parseFloat(elm.value)
184+
});
185+
}
180186
</script>
181187
<style>
182188
.sidePanel {
@@ -206,7 +212,7 @@
206212
<tr title="The global title of the legend control.">
207213
<td>Title:</td>
208214
<td>
209-
<input type="text" oninput="setTitle(this)" title="Title" />
215+
<input type="text" oninput="setTitle(this)" title="Title" />
210216
</td>
211217
</tr>
212218
<tr title="How multiple legends are laid out.">
@@ -215,7 +221,7 @@
215221
<select onchange="setLayout(this)" title="Layout">
216222
<option>accordion</option>
217223
<option selected="selected">carousel</option>
218-
<option>list</option>
224+
<option>list</option>
219225
</select>
220226
</td>
221227
</tr>
@@ -246,6 +252,15 @@
246252
<td>Container:</td>
247253
<td><input type="checkbox" onclick="setContainerId(this)" title="Container" /> show in test area</td>
248254
</tr>
255+
<tr title='Specifies the maximium width the legend control can expand to. If greater than the width of the map, the legend control will have a max width of the maps width minus 20 pixels.'>
256+
<td>Max width:</td>
257+
<td>
258+
<form oninput="maxWidth.value=MaxWidth.value">
259+
<input type="range" id="MaxWidth" value="1000" min="50" max="1000" step="50" oninput="updateMaxWidth(this)" />
260+
<output name="maxWidth" for="MaxWidth">1000</output>
261+
</form>
262+
</td>
263+
</tr>
249264
</table>
250265

251266
<fieldset style="width:320px;margin-bottom:10px;">

‎Samples/Demos/Large GeoJSON Files/Large GeoJSON Files.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
1818

1919
<script>
20-
var map, datasource, infopane, completed = 0, featureCnt = 0, totalFileSize = 0;
20+
var map, datasource, popup, infopane, completed = 0, featureCnt = 0, totalFileSize = 0;
2121
var geoJsonData = [
2222
{ name: 'Parcel Boundaries', url: '/data/geojson/parcels.json', fileSizeMB: 80, geomType: 'polygons' },
2323
{ name: 'Streets', url: '/data/geojson/streets.json', fileSizeMB: 16, geomType: 'lines' },
@@ -53,6 +53,9 @@
5353

5454
//Wait until the map resources are ready.
5555
map.events.add('ready', function () {
56+
//Create a popup.
57+
popup = new atlas.Popup();
58+
5659
//Create a data source to store the data in.
5760
datasource = new atlas.source.DataSource();
5861
map.sources.add(datasource);

‎Samples/Map/Swipe between two maps/Swipe between two maps.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090

9191
secondaryDataSource.importDataFromUrl('/data/geojson/US_County_Unemployment_2017.geojson');
9292

93-
//Choropleth based on suze of labor force in the US counties.
93+
//Choropleth based on size of the labor force in the US counties.
9494
secondaryMap.layers.add(new atlas.layer.PolygonLayer(secondaryDataSource, null, {
9595
fillColor: [
9696
'step',

‎Samples/Map/Swipe map with fullscreen support/Swipe map with fullscreen support.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999

100100
secondaryDataSource.importDataFromUrl('/data/geojson/US_County_Unemployment_2017.geojson');
101101

102-
//Choropleth based on suze of labor force in the US counties.
102+
//Choropleth based on size of the labor force in the US counties.
103103
secondaryMap.layers.add(new atlas.layer.PolygonLayer(secondaryDataSource, null, {
104104
fillColor: [
105105
'step',

‎Samples/Popups/Popup templates/Popup templates.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
label: 'Code samples',
121121
hideLabel: true,
122122
hyperlinkFormat: {
123-
lable: 'Go to code samples!',
123+
label: 'Go to code samples!',
124124
target: '_blank'
125125
}
126126
},
@@ -152,7 +152,7 @@
152152
{
153153
propertyPath: 'imageLink',
154154
label: 'Image',
155-
hideImageLabel: true,
155+
hideLabel: true,
156156
hyperlinkFormat: {
157157
isImage: true
158158
}

‎Samples/Vector tiles/Vector tile heat map/Vector tile heat map.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@
5757
});
5858
map.sources.add(datasource);
5959

60-
//Create a layer for traffic flow lines.
61-
var flowLayer = new atlas.layer.HeatMapLayer(datasource, null, {
60+
//Create a layer for a traffic flow heat map.
61+
var heatMapLayer = new atlas.layer.HeatMapLayer(datasource, null, {
6262
//The name of the data layer within the data source to pass into this rendering layer.
6363
sourceLayer: 'Traffic flow',
6464

@@ -73,11 +73,8 @@
7373
filter: ['<', ['get', 'traffic_level'], 0.80]
7474
});
7575

76-
//Add the traffic flow layer below the labels to make the map clearer.
77-
map.layers.add(flowLayer, 'labels');
78-
79-
//Add a click event to the layer to display details about the traffic flow line.
80-
map.events.add('click', flowLayer, featureClicked);
76+
//Add the traffic flow heat map layer below the labels to make the map clearer.
77+
map.layers.add(heatMapLayer, 'labels');
8178
});
8279
}
8380

‎Static/lib/azure-maps/azure-maps-layer-legend.js‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -376,7 +376,8 @@ MIT License
376376
Utils.getMapLayers = function (map, layerFilter) {
377377
var userLayers = [];
378378
if (map) {
379-
var mapLayers = map.layers.getLayers();
379+
//Workaround: get user defined layers, not all layers (including basemap layers).
380+
var mapLayers = map.layers['_getUserLayers']().map(function (l) { return l.layer; });
380381
var layers_1 = [];
381382
var filter_1 = [];
382383
if (layerFilter && layerFilter.length > 0) {
@@ -1513,6 +1514,10 @@ MIT License
15131514
opt.layout = options.layout;
15141515
self._needsRebuild = true;
15151516
}
1517+
if (options.maxWidth > 0 && opt.maxWidth !== options.maxWidth) {
1518+
opt.maxWidth = options.maxWidth;
1519+
self._adjustSize();
1520+
}
15161521
if (options.showToggle !== undefined && opt.showToggle !== options.showToggle) {
15171522
opt.showToggle = options.showToggle;
15181523
if (!options.showToggle) {
@@ -1577,13 +1582,13 @@ MIT License
15771582
var opt = self._baseOptions;
15781583
var container = self._container;
15791584
if (self._map) {
1580-
var maxWidth_1 = 'unset';
1585+
var maxWidth_1 = opt.maxWidth ? opt.maxWidth + 'px' : 'unset';
15811586
var maxHeight_1 = 'unset';
15821587
//When legend is displayed within the map, need to restrict the size of the legend content.
15831588
if (!opt.container) {
15841589
var rect = self._map.getCanvasContainer().getClientRects()[0];
1585-
//Subtract 20 pixels to account for padding around controls in the map.
1586-
maxWidth_1 = (rect.width - 20) + 'px';
1590+
//Subtract 20 pixels to account for padding around controls in the map.
1591+
maxWidth_1 = Math.min(opt.maxWidth || 10000, rect.width - 20) + 'px';
15871592
var maxContainerHeight = rect.height - 20;
15881593
var cp = self._controlPosition;
15891594
if (cp && cp !== '' && cp !== 'non-fixed') {
@@ -1843,14 +1848,14 @@ MIT License
18431848
container.setAttribute('aria-expanded', !minimized + '');
18441849
var classList = container.classList;
18451850
if (showBtnBg) {
1846-
if (!classList.contains(btnCss)) {
1847-
classList.add(btnCss);
1848-
}
1851+
classList.remove(btnCss);
18491852
btn.style.display = '';
18501853
container.style.cursor = '';
18511854
}
18521855
else {
1853-
classList.remove(btnCss);
1856+
if (!classList.contains(btnCss)) {
1857+
classList.add(btnCss);
1858+
}
18541859
btn.style.display = 'none';
18551860
if (minimized) {
18561861
container.style.cursor = 'pointer';
@@ -1992,6 +1997,7 @@ MIT License
19921997
case 'container':
19931998
case 'layout':
19941999
case 'zoomBehavior':
2000+
case 'maxWidth':
19952001
//@ts-ignore
19962002
opt[key] = val;
19972003
break;
@@ -2496,6 +2502,12 @@ MIT License
24962502
var textStyle = void 0;
24972503
var barWidth = void 0;
24982504
var barHeight = void 0;
2505+
//Ensure all stops have an offset value.
2506+
legendType.stops.forEach(function (item) {
2507+
if (typeof item.offset !== 'number') {
2508+
item.offset = 0;
2509+
}
2510+
});
24992511
//Ensure stops are sorted by offset.
25002512
legendType.stops.sort(function (a, b) {
25012513
return a.offset - b.offset;
@@ -2720,6 +2732,7 @@ MIT License
27202732
case 'container':
27212733
case 'layout':
27222734
case 'zoomBehavior':
2735+
case 'maxWidth':
27232736
//@ts-ignore
27242737
opt[key] = val;
27252738
break;

‎Static/lib/azure-maps/azure-maps-layer-legend.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)