JSFiddle - React, Tailwind, and code Playground

by Bryan McIntosh

HTML

<button id="btn-getGeoLocation">What's the weather?</button>

<div id="id-weather">
</div>

JavaScript

$("#btn-getGeoLocation").click(function(e) {
  e.preventDefault();
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(getPosSuccess);
  } else {
    alert('geolocation not available in this browser');
  }
});

function getPosSuccess(pos) {
  // Get the coordinates of the current possition.
  var geoLat = String(pos.coords.latitude.toFixed(5));
  var geoLng = String(pos.coords.longitude.toFixed(5));
  var iSource = "//forecast.io/embed/#lat=" + geoLat + "&lon=" + geoLng + "&name=Woot&color=#00aaff";
  alert(iSource);
  $('<iframe>') // Creates the element
    .attr('src', iSource) // Sets the attribute spry:region="myDs"
    .attr('height', 245)
    .attr('width', "100%")
    .appendTo('#id-weather');
}