Skip to content

Update multiple samples #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rbrundritt merged 6 commits into from
Mar 21, 2025
Merged

Update multiple samples #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a28e9cb
Update Animate along a route path.html
rbrundritt Jul 31, 2024
25beae6
Update Large GeoJSON Files.html
rbrundritt Aug 5, 2024
7261d18
minor typo fixes
rbrundritt Aug 21, 2024
6939c2d
Minor updates
rbrundritt Aug 22, 2024
5d07669
Update legend control version
rbrundritt Aug 23, 2024
d098f31
Merge branch 'Azure-Samples:main' into main
rbrundritt Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions Samples/Animations/Animate along a route path/Animate along a route path.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@
//Create an array of point features with timestamp information to define a route to animate along.
//To animate a route, there must be a _timestamp property that has a value from Date.getTime().
var routePoints = [
new atlas.data.Feature(new atlas.data.Point([-122.34758, 47.62155]), { _timestamp: new Date('Tue, 18 Aug 2020 00:53:53 GMT').getTime() }),
new atlas.data.Feature(new atlas.data.Point([-122.34764, 47.61859]), { _timestamp: new Date('Tue, 18 Aug 2020 00:54:53 GMT').getTime() }),
new atlas.data.Feature(new atlas.data.Point([-122.33787, 47.61295]), { _timestamp: new Date('Tue, 18 Aug 2020 00:56:53 GMT').getTime() }),
new atlas.data.Feature(new atlas.data.Point([-122.34217, 47.60964]), { _timestamp: new Date('Tue, 18 Aug 2020 00:59:53 GMT').getTime() })
new atlas.data.Feature(new atlas.data.Point([-122.34758, 47.62155]), { timestamp: new Date('Tue, 18 Aug 2020 00:53:53 GMT').getTime() }),
new atlas.data.Feature(new atlas.data.Point([-122.34764, 47.61859]), { timestamp: new Date('Tue, 18 Aug 2020 00:54:53 GMT').getTime() }),
new atlas.data.Feature(new atlas.data.Point([-122.33787, 47.61295]), { timestamp: new Date('Tue, 18 Aug 2020 00:56:53 GMT').getTime() }),
new atlas.data.Feature(new atlas.data.Point([-122.34217, 47.60964]), { timestamp: new Date('Tue, 18 Aug 2020 00:59:53 GMT').getTime() })
];

function getMap() {
Expand Down Expand Up @@ -119,10 +119,13 @@
pin = new atlas.Shape(routePoints[0]);
pinSource.add(pin);

//Extract timestamp information from a custom property of the point features.
//By default the `moveAlongRoute` function looks for a `_timestamp` property on the point features that is a Date.getTime() value.
//If your points already have a `_timestamp` property with the correct value type, you can skip this extraction step.
routePoints = atlas.animations.extractRoutePoints(route, 'timestamp');

//Create the animation.
animation = atlas.animations.moveAlongRoute(routePoints, pin, {
//Specify the property that contains the timestamp.
timestampProperty: 'timestamp',

//Capture metadata so that data driven styling can be done.
captureMetadata: true,
Expand Down
19 changes: 17 additions & 2 deletions Samples/Controls/Legend control options/Legend control options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,12 @@
minimized: elm.checked
});
}

function updateMaxWidth(elm) {
legend.setOptions({
maxWidth: parseFloat(elm.value)
});
}
</script>
<style>
.sidePanel {
Expand Down Expand Up @@ -206,7 +212,7 @@
<tr title="The global title of the legend control.">
<td>Title:</td>
<td>
<input type="text" oninput="setTitle(this)" title="Title" />
<input type="text" oninput="setTitle(this)" title="Title" />
</td>
</tr>
<tr title="How multiple legends are laid out.">
Expand All @@ -215,7 +221,7 @@
<select onchange="setLayout(this)" title="Layout">
<option>accordion</option>
<option selected="selected">carousel</option>
<option>list</option>
<option>list</option>
</select>
</td>
</tr>
Expand Down Expand Up @@ -246,6 +252,15 @@
<td>Container:</td>
<td><input type="checkbox" onclick="setContainerId(this)" title="Container" /> show in test area</td>
</tr>
<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.'>
<td>Max width:</td>
<td>
<form oninput="maxWidth.value=MaxWidth.value">
<input type="range" id="MaxWidth" value="1000" min="50" max="1000" step="50" oninput="updateMaxWidth(this)" />
<output name="maxWidth" for="MaxWidth">1000</output>
</form>
</td>
</tr>
</table>

<fieldset style="width:320px;margin-bottom:10px;">
Expand Down
5 changes: 4 additions & 1 deletion Samples/Demos/Large GeoJSON Files/Large GeoJSON Files.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

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

//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a popup.
popup = new atlas.Popup();

//Create a data source to store the data in.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
Expand Down
2 changes: 1 addition & 1 deletion Samples/Map/Swipe between two maps/Swipe between two maps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@

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

//Choropleth based on suze of labor force in the US counties.
//Choropleth based on size of the labor force in the US counties.
secondaryMap.layers.add(new atlas.layer.PolygonLayer(secondaryDataSource, null, {
fillColor: [
'step',
Expand Down
2 changes: 1 addition & 1 deletion Samples/Map/Swipe map with fullscreen support/Swipe map with fullscreen support.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@

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

//Choropleth based on suze of labor force in the US counties.
//Choropleth based on size of the labor force in the US counties.
secondaryMap.layers.add(new atlas.layer.PolygonLayer(secondaryDataSource, null, {
fillColor: [
'step',
Expand Down
4 changes: 2 additions & 2 deletions Samples/Popups/Popup templates/Popup templates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
label: 'Code samples',
hideLabel: true,
hyperlinkFormat: {
lable: 'Go to code samples!',
label: 'Go to code samples!',
target: '_blank'
}
},
Expand Down Expand Up @@ -152,7 +152,7 @@
{
propertyPath: 'imageLink',
label: 'Image',
hideImageLabel: true,
hideLabel: true,
hyperlinkFormat: {
isImage: true
}
Expand Down
11 changes: 4 additions & 7 deletions Samples/Vector tiles/Vector tile heat map/Vector tile heat map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@
});
map.sources.add(datasource);

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

Expand All @@ -73,11 +73,8 @@
filter: ['<', ['get', 'traffic_level'], 0.80]
});

//Add the traffic flow layer below the labels to make the map clearer.
map.layers.add(flowLayer, 'labels');

//Add a click event to the layer to display details about the traffic flow line.
map.events.add('click', flowLayer, featureClicked);
//Add the traffic flow heat map layer below the labels to make the map clearer.
map.layers.add(heatMapLayer, 'labels');
});
}

Expand Down
29 changes: 21 additions & 8 deletions Static/lib/azure-maps/azure-maps-layer-legend.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,8 @@ MIT License
Utils.getMapLayers = function (map, layerFilter) {
var userLayers = [];
if (map) {
var mapLayers = map.layers.getLayers();
//Workaround: get user defined layers, not all layers (including basemap layers).
var mapLayers = map.layers['_getUserLayers']().map(function (l) { return l.layer; });
var layers_1 = [];
var filter_1 = [];
if (layerFilter && layerFilter.length > 0) {
Expand Down Expand Up @@ -1513,6 +1514,10 @@ MIT License
opt.layout = options.layout;
self._needsRebuild = true;
}
if (options.maxWidth > 0 && opt.maxWidth !== options.maxWidth) {
opt.maxWidth = options.maxWidth;
self._adjustSize();
}
if (options.showToggle !== undefined && opt.showToggle !== options.showToggle) {
opt.showToggle = options.showToggle;
if (!options.showToggle) {
Expand Down Expand Up @@ -1577,13 +1582,13 @@ MIT License
var opt = self._baseOptions;
var container = self._container;
if (self._map) {
var maxWidth_1 = 'unset';
var maxWidth_1 = opt.maxWidth ? opt.maxWidth + 'px' : 'unset';
var maxHeight_1 = 'unset';
//When legend is displayed within the map, need to restrict the size of the legend content.
if (!opt.container) {
var rect = self._map.getCanvasContainer().getClientRects()[0];
//Subtract 20 pixels to account for padding around controls in the map.
maxWidth_1 = (rect.width - 20) + 'px';
//Subtract 20 pixels to account for padding around controls in the map.
maxWidth_1 = Math.min(opt.maxWidth || 10000, rect.width - 20) + 'px';
var maxContainerHeight = rect.height - 20;
var cp = self._controlPosition;
if (cp && cp !== '' && cp !== 'non-fixed') {
Expand Down Expand Up @@ -1843,14 +1848,14 @@ MIT License
container.setAttribute('aria-expanded', !minimized + '');
var classList = container.classList;
if (showBtnBg) {
if (!classList.contains(btnCss)) {
classList.add(btnCss);
}
classList.remove(btnCss);
btn.style.display = '';
container.style.cursor = '';
}
else {
classList.remove(btnCss);
if (!classList.contains(btnCss)) {
classList.add(btnCss);
}
btn.style.display = 'none';
if (minimized) {
container.style.cursor = 'pointer';
Expand Down Expand Up @@ -1992,6 +1997,7 @@ MIT License
case 'container':
case 'layout':
case 'zoomBehavior':
case 'maxWidth':
//@ts-ignore
opt[key] = val;
break;
Expand Down Expand Up @@ -2496,6 +2502,12 @@ MIT License
var textStyle = void 0;
var barWidth = void 0;
var barHeight = void 0;
//Ensure all stops have an offset value.
legendType.stops.forEach(function (item) {
if (typeof item.offset !== 'number') {
item.offset = 0;
}
});
//Ensure stops are sorted by offset.
legendType.stops.sort(function (a, b) {
return a.offset - b.offset;
Expand Down Expand Up @@ -2720,6 +2732,7 @@ MIT License
case 'container':
case 'layout':
case 'zoomBehavior':
case 'maxWidth':
//@ts-ignore
opt[key] = val;
break;
Expand Down
2 changes: 1 addition & 1 deletion Static/lib/azure-maps/azure-maps-layer-legend.min.js
View file
Open in desktop

Large diffs are not rendered by default.