A CodePen by Rick.

index.html

<div class="container">
  <h1>Hello</h1>
  <p> <strong>Status:</strong><div class="status"> Not ready. </div></p>
  <p> <strong>Note:</strong> Lorem epson dolorm epset.</p>
<div class="row">
  <form>
    <input class='input' name='waypoint' value='name'><br/>
    <input class='input lat' name='lat' type='text' value='1'><br/>
    <input class='input lng' name='lng' type='text' value='1'><br/>
  </form>
  <div class="button">Send</div>
</div>
</div>

script.coffee

$ ->
  showLocation = (position) ->
    #add these values to hidden elements
    latitude = position.coords.latitude
    longitude = position.coords.longitude
    $('.lat').val(latitude)
    $('.lng').val(longitude)
    $('.status').html("Ready to send")
  errorHandler = (err) ->
    if err.code is 1
      $('.status').html("Access to GPS denied")
    else $('.status').html("Can't find location.")  if err.code is 2
  getLocation = ->
    if navigator.geolocation
      options = timeout: 10000
      navigator.geolocation.getCurrentPosition showLocation, errorHandler, options
    else
      $('.status').html("App requires GPS connectivity. Try another device.")
  getLocation()
  $('.button').click ->
    getLocation()
    $.ajax
      type: "POST"
      url: 'localhost/send'
      data: $('form').serialize()
      success: ->(alert 'good')
      dataType: 'json'
    alert('sent')

style.css

.container{
  border: solid 1px #98ba3f;
  padding: 4px;
  border-radius: 8px;
  background-color: #ff9;
  display: inline-block;
  position: absolute;
/*  left: 20%;
  top: 20%;*/
}
.container p{
  margin: 6px;
}
.container h1{
  font-size: 12pt;
  margin: 6px;
  border-bottom: 1px solid #98ba3f;
}
.input {
  background-color: #98ba3f;
  border-color: #98ba3f;
  border-radius: 8px;
  padding: 3px;
  margin: 3px;
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
}
.button{
  border: solid 1px #98ba3f;
  height: 16px;
  border-radius: 5px;
  margin: 6px;
  padding: 3px;
  text-align: center;
  float: left;
  font-family: Arial;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background-color: #98ba3f;
}

.button:hover {
  background-color: #245191;
}

.row{
  display: table;
}
.status{
  display: block;
}