data to json

data.json

@@ -0,0 +1,23 @@
+[{
+  "type": "Feature",
+  "geometry": {
+    "type": "Point",
+    "coordinates": [3.726759, 51.045660]
+  },
+  "properties": {
+    "name": "Studentenrestaurant De Brug",
+    "address": "Sint-Pietersnieuwstraat 45",
+    "capacity": 700,
+    "period": { "start": "18/08/2014", "end": "12/09/2014" },
+    "hours": {
+      "monday": "8u - 22u",
+      "tuesday": "8u - 22u",
+      "wednesday": "8u - 22u",
+      "thursday": "8u - 22u",
+      "friday": "8u - 22u",
+      "saturday": false,
+      "sunday": false
+    },
+    "extra": "2 aparte zaaltjes doorlopend beschikbaar (120 plaatsen)."
+  }
+}]

map.html

@@ -37,30 +37,6 @@
     </div>
   </script>
   <script type="text/javascript">
-    var data = [{
-      'type': "Feature",
-      'geometry': {
-        'type': "Point",
-        'coordinates': [3.726759, 51.045660]
-      },
-      'properties': {
-        'name': "Studentenrestaurant De Brug",
-        'address': "Sint-Pietersnieuwstraat 45",
-        'capacity': 700,
-        'period': { 'start': "18/08/2014", 'end': "12/09/2014" },
-        'hours': {
-          'monday': "8u - 22u",
-          'tuesday': "8u - 22u",
-          'wednesday': "8u - 22u",
-          'thursday': "8u - 22u",
-          'friday': "8u - 22u",
-          'saturday': false,
-          'sunday': false
-        },
-        'extra': '2 aparte zaaltjes doorlopend beschikbaar (120 plaatsen).'
-      }
-    }];
-
     var popuptemplate = Handlebars.compile($('#popup-template').html());
 
     function onEachFeature(feature, layer) {
@@ -74,10 +50,14 @@
       var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: 'Made by <a href="http://zeus.ugent.be">Zeus</a> with ❤!'
       }).addTo(map);
-      var geojson = L.geoJson(data, {
-        onEachFeature: onEachFeature
-      });
-      map.addLayer(geojson);
+
+      $.getJSON('data.json')
+       .done(function(data) {
+         var geojson = L.geoJson(data, {
+           onEachFeature: onEachFeature
+         });
+         map.addLayer(geojson);
+       });
     });
   </script>
 </body>