Yay!

static/js/main.js

@@ -1,13 +1,34 @@
 (function () {
+  "use strict";
+
   // set up background map
   var map = L.map('map').setView([52.50, 13.40], 11);
-  var layer = new L.StamenTileLayer("toner-lite");
+  var layer = new L.StamenTileLayer('toner-lite');
   map.addLayer(layer);
 
-  $.get('/articles')
+  // get response from server and draw the map
+  var response;
+  $.getJSON('/articles/')
     .fail(console.error.bind(console))
     .then(function (data) {
       console.log('Got data successfully!');
-      console.log(data);
+      response = data;
+
+      displayAll();
     });
+
+  // logic for drawing follows
+
+  var markers = [];
+
+  /**
+   * Display all incidents at once
+   */
+  function displayAll () {
+    for (var i = 0, l = response.length; i < l; i++) {
+      markers.push(
+        L.marker([response[i].lat, response[i].lng]).addTo(map).bindPopup(response[i].description)
+      )
+    }
+  }
 })();

views/index.tpl

@@ -21,8 +21,8 @@
     <div id="map"></div>
 
     <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
-    <script src="://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
-    <script src="://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.1.0/lodash.min.js"></script>
     <script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
     <script src="/static/js/main.js"></script>
 </body>