CODEWITHSUNDEEP
javascriptleafletmappinggisweather
JMR
JMR

Reputation: 3

How to properly display weather station JSON data on Leaflet map from Synoptic API?

I'm trying to display a map of weather stations in Alaska from a MesoWest (now Synoptic) API with their temperature and wind speed on a Leaflet map. I've seen some examples online but they're all very old and result in errors.

Here is what I have in my .js:

var map = L.map('map').setView([64.666, -147.101], 8);
var basemap = L.tileLayer.provider('Stamen.Terrain').addTo(map);

var mesoMarkersGroup=new L.LayerGroup(); 
$.getJSON('https://api.synopticdata.com/v2/stations/latest?&token=[MY TOKEN]&within=1440&obtimezone=utc&output=json&units=temp|f,speed|mph&state=ak&country=us&status=active&vars=air_temp,wind_speed&varsoperator=and', function (data) {
    L.geoJson(data).addTo(map);
});
map.addLayer(mesoMarkersGroup);

The link should return raw .JSON data.

Here is a snippet of some of what the link shows if I limit it to one station:

{"UNITS":{"wind_speed":"Miles\/hour","air_temp":"Fahrenheit"},"QC_SUMMARY":{"QC_CHECKS_APPLIED":["sl_range_check"],"TOTAL_OBSERVATIONS_FLAGGED":0.0,"PERCENT_OF_TOTAL_OBSERVATIONS_FLAGGED":0.0},"STATION":[{"STATUS":"ACTIVE","MNET_ID":"1","PERIOD_OF_RECORD":{"start":"2002-11-05T00:00:00Z","end":"2021-12-09T07:15:00Z"},"ELEVATION":"433","NAME":"Fairbanks, Fairbanks International Airport","DISTANCE":0.0,"STID":"PAFA","SENSOR_VARIABLES":{"wind_speed":{"wind_speed_value_1":{"period_of_record":{"start":"","end":""}}},"air_temp":{"air_temp_value_1":{"period_of_record":{"start":"","end":""}}}},"ELEV_DEM":"419.9","LONGITUDE":"-147.87611","STATE":"AK","OBSERVATIONS":{"wind_speed_value_1":{"date_time":"2021-12-09T07:53:00Z","value":0.0},"air_temp_value_1":{"date_time":"2021-12-09T07:53:00Z","value":10.94}},"RESTRICTED":false,"QC_FLAGGED":false,"LATITUDE":"64.80389","TIMEZONE":"America\/Anchorage","ID":"4620"}],"SUMMARY":{"DATA_QUERY_TIME":"1.08480453491 ms","RESPONSE_CODE":1,"RESPONSE_MESSAGE":"OK","METADATA_RESPONSE_TIME":"152.322053909 ms","DATA_PARSING_TIME":"0.256776809692 ms","TOTAL_DATA_TIME":"1.34587287903 ms","NUMBER_OF_OBJECTS":1}}

I just want a dot on the map that shows wind and temperature :(

Upvotes: 0

Views: 609

Answers (1)

Grzegorz T.
Grzegorz T.

Reputation: 4133

As I mentioned above, it is enough to add the appropriate parameter to the api output=geojson call. Below is the use of api:

var map = L.map("map").setView([0, 0], 13);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

fetch("https://api.synopticdata.com/v2/stations/latest?radius=KHOU,50&limit=10&output=geojson&vars=air_temp&within=100&token=70c1dfd9b68d4511a0a8283cc6f0f972")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    const jsonLayer = L.geoJSON(data);
    jsonLayer.addTo(map);
    map.fitBounds(jsonLayer.getBounds(), {padding: [50, 50]});
  });
*,
:after,
:before {
  margin: 0;
  box-sizing: border-box;
}

html,
body,
#map {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  padding: 0;
}
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<div id="map"></div>

Upvotes: 1

Related Questions