Add cycling isochrones, limit to just 15 minutes, add basic key. Part…

… of #3

_includes/sidebar.html

@@ -1,3 +1,8 @@
 <h1>Could Liverpool be a 15 Minute City?</h1>
 <p>A website to explore a Liverpool where your everyday needs are within a 15 minute walk or cycle.</p>
 <p><strong>This site is a work-in-progress</strong>.  See <a href="https://github.com/Liverpool-UK/somebody-should/issues/35">this discussion</a> or talk to <a href="https://twitter.com/amcewen">Adrian McEwen</a> to find out more.</p>
+<h3>Key</h3>
+<ul>
+  <li style="color: #cc5e3f">Area within 15 minutes' walk</li>
+  <li style="color: #3fadcc">Area within 15 minutes' cycling</li>
+</ul>

_plugins/generateIsochrones.rb

@@ -13,11 +13,16 @@ def generate(site)
           else
             area = site.data[site.config['isochrone_dataset']][sf]
             puts area['name']
-            isourl = "http://trips.mcqn.com:8080/otp/routers/default/isochrone?fromPlace=#{area['lat']},#{area['lon']}&mode=WALK&cutoffSec=300&cutoffSec=600&cutoffSec=900"
-            isochrone = URI.open(isourl).read
-            isofile = IsochroneFile.new(site, site.source, "isochrones", site.data[site.config['isochrone_dataset']][sf]['name'], isochrone)
-            site.data[site.config['isochrone_dataset']][sf]['url'] = isofile.url
-            site.static_files << isofile
+            ["WALK", "BICYCLE"].each do |transport|
+              #isourl = "http://trips.mcqn.com:8080/otp/routers/default/isochrone?fromPlace=#{area['lat']},#{area['lon']}&mode=#{transport}&cutoffSec=300&cutoffSec=600&cutoffSec=900"
+              isourl = "http://trips.mcqn.com:8080/otp/routers/default/isochrone?fromPlace=#{area['lat']},#{area['lon']}&mode=#{transport}&cutoffSec=900"
+              # Adding wheelchair=yes and walkSpeed=SOMETHING m/s to this will give a reduced mobility option (WALK defaults to a walkSpeed that's ~3mph)
+              #isourl = "http://trips.mcqn.com:8080/otp/routers/default/isochrone?fromPlace=#{area['lat']},#{area['lon']}&mode=#{transport}&cutoffSec=300&cutoffSec=600&cutoffSec=900"
+              isochrone = URI.open(isourl).read
+              isofile = IsochroneFile.new(site, site.source, "isochrones", "#{site.data[site.config['isochrone_dataset']][sf]['name']}-#{transport.downcase}", isochrone)
+              site.data[site.config['isochrone_dataset']][sf]["#{transport.downcase}url"] = isofile.url
+              site.static_files << isofile
+            end
           end
         end
       else

index.markdown

@@ -8,9 +8,15 @@ layout: default
   </div>
   <script>
     var walkingStyle = {
-      "color": "#ff7800",
+      //"color": "#ff7800",
+      "color": "#cc5e3f",
       "weight": 1.5,
-      "opacity": 0.75
+      "opacity": 0.85
+    };
+    var bikingStyle = {
+      "color": "#3fadcc",
+      "weight": 1.5,
+      "opacity": 0.65
     };
     var mainMap;
     var areas = {% data_to_json areas %};
@@ -25,22 +31,30 @@ layout: default
         maxZoom: 18,
         }).addTo(mainMap);
       // Load the isochrones
-      for (var i =0; i < areas.length; i++) {
-        console.log(areas[i].name + " "+areas[i].url);
-        if (areas[i].url) {
-          const xhr = new XMLHttpRequest();
-          xhr.open('GET', areas[i].url);
-          xhr.responseType = 'json';
-          xhr.area_idx = i;
-          xhr.onload = function(e) {
-            if (this.status == 200) {
-              areas[this.area_idx].isochrone = this.response;
-              // Add it to the map
-              L.geoJSON(areas[this.area_idx].isochrone, { style: walkingStyle }).addTo(mainMap);
-            }
-          };
-          xhr.send();
+      //var travelTypes = ["walk", "bike", "reduced"];
+      var travelTypes = [
+        { "prefix": "bicycle", "style": bikingStyle },
+        { "prefix": "walk", "style": walkingStyle }
+      ];
+      travelTypes.forEach(function(tt) {
+        for (var i =0; i < areas.length; i++) {
+          console.log(areas[i].name + " "+areas[i][tt.prefix+"url"]);
+          if (areas[i][tt.prefix+"url"]) {
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', areas[i][tt.prefix+"url"]);
+            xhr.responseType = 'json';
+            xhr.area_idx = i;
+            xhr.tt = tt;
+            xhr.onload = function(e) {
+              if (this.status == 200) {
+                areas[this.area_idx][this.tt.prefix+"isochrone"] = this.response;
+                // Add it to the map
+                L.geoJSON(areas[this.area_idx][this.tt.prefix+"isochrone"], { style: this.tt.style }).addTo(mainMap);
+              }
+            };
+            xhr.send();
+          }
         }
-      }
+      });
     }
   </script>