Cities on map

.gitignore

@@ -2,3 +2,4 @@ _site
 .sass-cache
 *~
 _json
+geo.json

.travis.yml

@@ -1,5 +1,8 @@
 language: ruby
-cache: bundler
+cache:
+  bundler: true
+  directories:
+  - _cache/
 rvm:
 - 2.2
 

Gemfile

@@ -3,3 +3,4 @@ source "https://rubygems.org"
 gem "jekyll", "~>2.5"
 gem "html-proofer", "~>2.5"
 gem "kramdown", "~>1.9"
+gem 'open-uri-cached', "0.0.5"

Gemfile.lock

@@ -62,6 +62,7 @@ GEM
       mini_portile2 (~> 2.0.0.rc2)
     octokit (4.2.0)
       sawyer (~> 0.6.0, >= 0.5.3)
+    open-uri-cached (0.0.5)
     parallel (1.6.1)
     parslet (1.5.0)
       blankslate (~> 2.0)
@@ -92,6 +93,7 @@ DEPENDENCIES
   html-proofer (~> 2.5)
   jekyll (~> 2.5)
   kramdown (~> 1.9)
+  open-uri-cached (= 0.0.5)
 
 BUNDLED WITH
    1.10.6

_cache/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

_couches/kekorgin.md

@@ -1,6 +1,6 @@
 ---
 name: Kovalam Ezhuthu Kalari
-city: Thiruvanthapuram
+city: Thiruvananthapuram
 country: IN
 region: Poonkulam
 email: hello@kek.org.in

_includes/footer.html

@@ -8,6 +8,7 @@
         <ul class="contact-list">
           <li>{{ site.title }}</li>
           <li>{{ site.couches | size }} Hackers, {{site.couches|group_by:'country'|size}} Countries</li>
+          <li><a href="/map.html">View cities on map</a></li>
         </ul>
       </div>
 

_plugins/to_geojson.rb

@@ -0,0 +1,50 @@
+require 'open-uri/cached'
+require 'json'
+
+OpenURI::Cache.cache_path = '_cache'
+
+module Jekyll
+  class GeoJsonGenerator <  Generator
+    BASE_URL = 'http://nominatim.openstreetmap.org/search/'
+
+    def generate(site)
+      result = Hash[
+        'type'=> 'FeatureCollection',
+        'features'=> []
+      ]
+
+      for couch in site.collections['couches'].docs
+        data = couch.data
+        url = BASE_URL + "#{data['country']}/#{data['city']}?format=json"
+        puts "Hitting #{url}"
+        api_url = URI::encode(url)
+
+        response = open(api_url)
+        raise 'Invalid response from nominatim' if response.status[0] != '200'
+        response = JSON.parse(response.read)
+
+        if response[0] then
+          lon = response[0]['lon']
+          lat = response[0]['lat']
+          loc = "#{data['city']}, #{data['country']}"
+          result['features'] << Hash[
+            'type'=> 'Feature',
+            'geometry'=> Hash[
+              'type'=> 'Point',
+              'coordinates'=> [lon, lat],
+            ],
+            'properties'=> Hash[
+              'loc'=> loc
+            ]
+          ]
+        end
+      end
+
+      # Write the json to a file
+      File.open('geo.json', 'w') do |file|
+        json = JSON.pretty_generate(result)
+        file.write(json)
+      end
+    end
+  end
+end

map.html

@@ -0,0 +1,39 @@
+---
+layout: default
+---
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
+<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
+<div id="map" style="height:550px;"></div>
+<div id="note">
+	<br />
+	<b>Note</b>:<br />
+	The markers on the map are on city basis, they might not represent the exact location.<br />
+	Some cities may be missing due to error in getting the geocode.<br />
+	Geocoding API used is licenced under <a href="http://www.openstreetmap.org/copyright" title="OpenStreetMap.org" target="_blank">Data © OpenStreetMap contributors, ODbL 1.0.</a>
+</div>
+<script>
+	var map = L.map('map').setView([0, 5], 2);
+
+	//getting and adding map tiles from mapbox api
+	L.tileLayer('https://api.tiles.mapbox.com/v4/krsoninikhil.ohf7bn0p/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoia3Jzb25pbmlraGlsIiwiYSI6ImNpaW5kNXlldDAxZHF1ZGtuaXRjd3BkcmoifQ.QmQvqCD3eQu40QaB48nejg', {
+	    attribution: 'Map data &copy; <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com" target="_blank">Mapbox</a>',
+	    id: 'krsoninikhil.ohf7bn0p',
+	    accessToken: 'pk.eyJ1Ijoia3Jzb25pbmlraGlsIiwiYSI6ImNpaW5kNXlldDAxZHF1ZGtuaXRjd3BkcmoifQ.QmQvqCD3eQu40QaB48nejg'
+	}).addTo(map);
+
+	//loading geojson data and applying the layer(marker) on map
+	var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function() {
+	    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
+			data = JSON.parse(xmlHttp.responseText);
+			L.geoJson(data, {
+			    onEachFeature: function (feature, layer) {
+			        layer.bindPopup(feature.properties.loc);
+			    }
+			}).addTo(map);
+	    }
+	}
+    xmlHttp.open("GET", 'geo.json', true); // true for asynchronous
+    xmlHttp.send(null);
+
+</script>