hackity hack hack tiles

voicegardens/static/styles.css

@@ -1,5 +1,10 @@
 /* Custom CSS styles */
 
-canvas {
+html * {
   border: 1px black solid;  /* TODO: experimenting for now */
 }
+
+canvas {
+  opacity: 0;
+  z-index: 10000000000;
+}

voicegardens/static/voicegardens.js

@@ -9,6 +9,7 @@ var canvasColour = "white";
 var canvasHeight = 400;
 var canvasWidth = 800;
 var frameRate = 30;
+var mappa = new Mappa("Leaflet");
 var microphone;
 var newSoundJustRecorded = false;
 var playButton;
@@ -18,6 +19,12 @@ var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
 var shapes = [];
 var stopButton;
+var tileMapOptions = {
+  lat: 0,
+  lng: 0,
+  zoom: 5,
+  style: "/static/tiles/{z}/{x}/{y}.png"
+};
 
 function record() {
   /**
@@ -210,7 +217,12 @@ function setup() {
   /**
    * The p5.js initial setup function.
    **/
-  createCanvas(canvasWidth, canvasHeight);
+  var canvas = createCanvas(canvasWidth, canvasHeight);
+  canvas.parent("canvasContainer");
+
+  var tileMap = mappa.tileMap(tileMapOptions);
+  tileMap.overlay(canvas);
+
   setupRecording();
   frameRate(frameRate);
 }

voicegardens/templates/index.html

@@ -23,6 +23,8 @@
       <li><a href="/archive">Archive</a></li>
     </ul>
 
+    <div id="canvasContainer"></div>
+
     <script src="/static/leaflet/leaflet-src.js" charset="utf-8"></script>
     <script src="/static/mappajs/mappa.min.js" charset="utf-8"></script>
     <script src="/static/p5js/p5.min.js" charset="utf-8"></script>