Basic HTML/Javascript to load a default map and a single isochrone. F…

…ixes #1
Liverpool-UK · May 30, 2020 · 1d7ccce · 1d7ccce
1 parent 4da0b05
commit 1d7ccce
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+   crossorigin=""/>
+  <style type="text/css">
+    #mainmap { height: 500px }
+  </style>
+
+  <!-- Make sure you put this AFTER Leaflet's CSS -->
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+   crossorigin=""></script>
+  <!-- Load the isochrone GeoJSON.
+       This should get moved to an AJAX call to pull the raw JSON in long-term -->
+  <script src="tmpiso.js"></script>
+
+</head>
+<body>
+  <h1>Should Liverpool be a 15 Minute City?</h1>
+  <div id="mainmap">
+  </div>
+  <script>
+    var mainMap;
+    window.onload = function() {
+      mainMap = L.map('mainmap').setView([53.4105095,-2.9704659], 12)
+      //mainMap = L.map('mainmap').setView([51.505, -0.09], 13);
+      var mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
+      var ocmlink = '<a href="http://thunderforest.com/">Thunderforest</a>';
+      L.tileLayer(
+        'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=545d2bceafc34e60af2dd48c5ea3d00c', {
+        attribution: '&copy; '+mapLink+' Contributors & '+ocmlink,
+        maxZoom: 18,
+        }).addTo(mainMap);
+      // Load the isochrones
+      var isochrone = JSON.parse(iso);
+      console.log(isochrone);
+      L.geoJSON(isochrone).addTo(mainMap);
+    }
+  </script>
+</body>
+</html>
diff --git a/tmpiso.js b/tmpiso.js