Wind speed text labels using custom GeoJSON
This example demonstrates how to query wind speed data from custom GeoJSON locations and display their values on the map.
The custom GeoJSON data is set up as a geojson data source on the map, and the wind speed data is queried for each location using the wind-speeds weather layer. The wind speed data is then displayed as text labels on the map.
query-layer-static-geojson.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MapsGL SDK - Wind speed text labels using custom GeoJSON</title>
<meta name="description" content="Query wind speed data from custom GeoJSON locations and display their values on the map." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.css" rel="stylesheet" />
<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.js"></script>
<link href="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.css" rel="stylesheet" />
<script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.addEventListener('load', () => {
mapboxgl.accessToken = 'MAPBOX_TOKEN';
const map = new mapboxgl.Map({
container: document.getElementById('map'),
style: 'mapbox://styles/mapbox/light-v9',
center: [-122.33207, 47.60621],
zoom: 8
});
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
controller.on('load', () => {
// Add wind speeds layer which will be used to query the data from
const windsLayer = controller.addWeatherLayer('wind-speeds', {
data: {
quality: aerisweather.mapsgl.DataQuality.high
}
});
// Add a custom GeoJSON source that loads in the top 20 cities near Seattle which will be used as the
// points to query the weather data for
const cityData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.33207,
47.60621
]
},
"properties": {
"place": {
"name": "Seattle",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.44429,
47.25288
]
},
"properties": {
"place": {
"name": "Tacoma",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.20068,
47.61038
]
},
"properties": {
"place": {
"name": "Bellevue",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.23484,
47.38093
]
},
"properties": {
"place": {
"name": "Kent",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.20208,
47.97898
]
},
"properties": {
"place": {
"name": "Everett",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.21707,
47.48288
]
},
"properties": {
"place": {
"name": "Renton",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.31262,
47.32232
]
},
"properties": {
"place": {
"name": "Federal Way",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.20874,
47.68149
]
},
"properties": {
"place": {
"name": "Kirkland",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.22845,
47.30732
]
},
"properties": {
"place": {
"name": "Auburn",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.17708,
48.05176
]
},
"properties": {
"place": {
"name": "Marysville",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.12151,
47.67399
]
},
"properties": {
"place": {
"name": "Redmond",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.51846,
47.17176
]
},
"properties": {
"place": {
"name": "Lakewood",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.34152,
47.75565
]
},
"properties": {
"place": {
"name": "Shoreline",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.27012,
47.14121
]
},
"properties": {
"place": {
"name": "South Hill",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.0804,
47.64177
]
},
"properties": {
"place": {
"name": "Sammamish",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.34679,
47.47038
]
},
"properties": {
"place": {
"name": "Burien",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.90169,
47.04491
]
},
"properties": {
"place": {
"name": "Olympia",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.82319,
47.03426
]
},
"properties": {
"place": {
"name": "Lacey",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-122.2054,
47.76232
]
},
"properties": {
"place": {
"name": "Bothell",
"state": "WA",
"stateFull": "Washington",
"country": "US",
"countryFull": "United States",
"region": "usnw",
"regionFull": "Pacific Northwest",
"continent": "na",
"continentFull": "North America"
}
}
}
]
};
const citiesSource = controller.addSource('cities', {
type: 'geojson',
data: cityData
});
// Add a custom layer that queries the temperature data for each city and displays the temperature in Fahrenheit
const textLayer = controller.addLayer('cities-text', {
type: 'query',
source: citiesSource.id,
queryLayer: {
id: windsLayer.id
},
paint: {
text: [{
value: {
property: '{dataProp}',
transform: (value) => {
if (Number.isNaN(value)) {
return '';
}
return Math.round(1.8 * value + 32);
}
},
size: 24,
color: '#000',
outlineColor: '#fff',
weight: 'bold'
}, {
value: {
property: 'place.name'
},
size: 12,
color: '#000',
outlineColor: '#fff',
weight: 'regular',
offset: { x: 0, y: 20 }
}],
symbol: {
allowOverlap: true,
fadeOpacity: false,
pitchWithMap: false,
rotateWithMap: false
}
}
});
});
});
</script>
</body>
</html>