Comments (2)
The average won't be able to be calculated as a cluster property. You would have to calculate the sum, and then in a data drive style calculate the average using the point count (or calculate it before presenting it in a popup). Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script>
var map, datasource, popup;
//GeoJSON feed of all earthquakes from the past 30 days. Sourced from the USGS.
var earthquakeFeed = 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
zoom: 2,
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//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.
authType: 'subscriptionKey',
subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a reusable popup.
popup = new atlas.Popup();
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource(null, {
cluster: true,
//The radius in pixels to cluster points together.
clusterRadius: 50,
//Calculate the sum of the magnitudes.
clusterProperties: {
'magnitudes': ['+', ['get', 'mag']]
}
});
map.sources.add(datasource);
//Create a bubble layer for rendering clustered data points.
var clusterBubbleLayer = new atlas.layer.BubbleLayer(datasource, null, {
radius: 20,
//Set the color based on the average magnitude of all the points in the cluster.
color: [
'step',
//Calculate the average by dividing the total magnitudes but the point count for the cluster.
['/', ['get', 'magnitudes'], ['get', 'point_count']],
'limegreen',
2, 'green',
3, 'yellow',
4, 'orange',
5, 'red'
],
strokeWidth: 0,
filter: ['has', 'point_count'] //Only rendered data points which have a point_count property, which clusters do.
});
//Add a click event to the layer so a popup can be displayed to show details about the cluster.
map.events.add('click', clusterBubbleLayer, clusterClicked);
//Add the clusterBubbleLayer and two additional layers to the map.
map.layers.add([
clusterBubbleLayer,
//Create a symbol layer to render the count of locations in a cluster.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'none' //Hide the icon image.
},
textOptions: {
//Calculate the average and display it.
textField: [
'number-format',
['/', ['get', 'magnitudes'], ['get', 'point_count']],
{ 'max-fraction-digits': 2 }
],
offset: [0, 0.4],
color: 'white'
}
}),
//Create a layer to render the individual locations.
new atlas.layer.SymbolLayer(datasource, null, {
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
})
]);
//Import the GeoJSON data into the data source.
datasource.importDataFromUrl(earthquakeFeed);
});
}
function clusterClicked(e) {
if (e && e.shapes && e.shapes.length > 0 && e.shapes[0].properties.cluster) {
//Get the clustered point from the event.
var cluster = e.shapes[0];
//Update the options of the popup and open it on the map.
popup.setOptions({
position: cluster.geometry.coordinates,
content: `<div style="padding:10px;">Average magnitude: ${cluster.properties.magnitudes/cluster.properties.point_count}</div>`
});
popup.open(map);
}
}
</script>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
</body>
</html>
from azuremapscodesamples.
Made a PR that adds the above sample to this project.
from azuremapscodesamples.
Related Issues (20)
- Fill Address Form with Autosuggest Uncaught (in promise) TypeError: Failed to fetch running sample code HOT 3
- Map 3.0.0 Preview 8-->10 Drawing Manager Issues after changing the map style HOT 1
- Drawing Manager Event Fires for an drawn shape when clicking outside of the shape HOT 1
- Map Popup with HTML Bootstrap 5 Components wont Interact HOT 3
- [How To] How to generate tokens without RBAC? HOT 2
- [HowTo] Bring back old map styles HOT 1
- atlas.io.read does not load icons from the kmz file HOT 1
- New layers... who dis? HOT 5
- Missing npm package azuremaps-maplibre-gl HOT 5
- Missing supported type on BoundingBox.fromData HOT 4
- invalid HTML in sample HOT 1
- Usage of the ['id'] data expression HOT 4
- Choosing popup locale for formatting data HOT 3
- Changing map style changes layering HOT 10
- I am unable to access some resources. HOT 3
- Adding method to data source to allow string Geojson HOT 4
- Image based Choropleth HOT 3
- I have a problem with running debugging this azuremapscodesample app it won't run I get this error shown in screenshot HOT 18
- How do I make a uwp app like google earth using Azure maps web SDK via a WebView in mainpage.xml MainPage.xaml.cs with search bar on visual studio 2022
- How do I make a web app like google earth using the Azure Maps Web SDK via a WebView in mainpage.xml mainpage.xml.cs with search bar on visual studio 2022
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from azuremapscodesamples.