Geohash example

In this example below you will see how to do a Geohash example with some HTML / CSS and Javascript

This pen shows an example of how you can define geohash grids for users' locations.

Thumbnail
This awesome code was written by PubNub, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright PubNub ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Geohash example</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
  <h1>Geohash Example</h1>
  <p>An example of how you can define geohash grids for users' locations</p>
</header>

<p>Your location
  <br><span id="coords">---</span></p>
<p>Geohash grid
  <br><span id="geohash">---</span></p>

<h2>This particular geohash method works this way:</h2>
<p>The precision increases as you increase the resolution.</p>

<p>At resolution 0, each grid size is approx 111km x 111km (circumference of the earth 40,075km/360deg). Resolution 1 gives 11km x 11km grids.
</p>
<p>The example below is for SoMa district in San Francisco at lat: 37.7834462, lon: -122.39952480000001 (Geohash grid is <strong>37-123</strong>).</p>

<img src="https://dl.dropboxusercontent.com/u/1330446/geohash.png">
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/PubNub/geohash-example-eNxxQW */
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1em;
  background: #fff;
  color: #293950;
  font-size: 1.2em;
}

header {
  margin-bottom: 2.4em;
}

header h1,
header p, h2 {
  text-rendering: optimizeLegibility;
  font-weight: normal;
  margin: 0;
}

header p {
  text-transform: uppercase;
}

img {
  width: 1517px;
}

#geohash {
  color: #ce1126;
  font-weight: 600;
}

/*Downloaded from https://www.codeseek.co/PubNub/geohash-example-eNxxQW */
var lat, lon;

navigator.geolocation.getCurrentPosition(function(position) {
  lat = position.coords.latitude;
  lon = position.coords.longitude;

  document.getElementById('coords').textContent = 'lat: ' + lat + ', lon: ' + lon;

  document.getElementById('geohash').textContent = geohash(lat, 0) + '' + geohash(lon, 0);
});

function geohash(coord, resolution) {
  var rez = Math.pow(10, resolution || 0);
  return Math.floor(coord * rez) / rez;
}

Comments