API Component Example

The example of the previous pages uses the “component” version of the WeatherSTEM API, which inserts live weather data into HTML <span> tags that have custom data attributes that target desired sensors. It pulls the current sensor readings from the selected WeatherSTEM station and is the easiest to implement. If you already know how to make web pages, simply copy and paste the code from the example below into a test web page of your choosing, and upload it to see a working example of the WeatherSTEM API on your site!

Live Weather Conditions from :
Current Temperature: °F
Current Humidity: %
Current Rainfall: in/hr
Current Dew Point: °F
Current Pressure: inHg
Copy
<!-- Meta data for API key and station identifier -->
<meta name="WeatherSTEM-api-key" content="3zxaakeb"> <!-- IMPORTANT! REPLACE "3zxaakeb" WITH YOUR REGISTERED API KEY -->
<meta name="WeatherSTEM-station" content="monroe/broadkey"> <!-- Replace "monroe/broadkey" with your county/station -->

<!-- JavaScript -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <!-- jQuery needs to load before the API file -->
<script src="//static.weatherstem.com/api.min.js"></script> <!-- API file (must load after jQuery) -->

<!-- HTML snippet (data-sensor attribute can be the name of any installed sensor) -->
<div>
  <div> Live Weather Conditions from <span data-station-property="name"></span>: </div>
  <div> Current Temperature: <span data-sensor="Thermometer"></span> °F </div>
  <div> Current Humidity: <span data-sensor="Hygrometer"></span>% </div>
  <div> Current Rainfall: <span data-sensor="Rain Rate"></span> in/hr </div>
  <div> Current Dew Point: <span data-sensor="Dewpoint"></span> °F </div>
  <div> Current Pressure: <span data-sensor="Barometer"></span> inHg </div>
</div>