title: Node.js Express Jade - Cant display leaflet map
body: <p>Im new to this and am following a tutorial <a href="http://duspviz.mit.edu/web-map-workshop/leaflet_nodejs_postgis/" rel="nofollow noreferrer">here</a>. I'm trying to create a map view using jade (i know its now pug but the tutorial uses jade).</p>
  
  <p>I have a router request for my map page in my index.js folder. It queries a database and returns some data in geojson format. I got the data to display on a separate page so shouldnt be an issue there.</p>
  
  <p>Request for map page in index.js:</p>
  
  <pre><code>//get map page
  router.get('/map', function(req, res) {
      var client = new pg.Client(conString); // Setup our Postgres Client
      client.connect(); // connect to the client
      var query = client.query(example_query); // Run our Query
      query.on("row", function (row, result) {
          result.addRow(row);
      });
      // Pass the result to the map page
      query.on("end", function (result) {
          var data = result.rows[0].row_to_json // Save the JSON as variable data
          res.render('map', {
              title: "Express API", // Give a title to our page
              jsonData: data // Pass data to the View
          });
      });
  });
  </code></pre>
  
  <p>The next step was to create a map view so I can display the data with a leaflet map. Saved in map.jade:</p>
  
  <pre><code>extends layout
  block content
      #map
      script(src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js")
      script.
          var myData = !{JSON.stringify(jsonData)};
          // Create variable to hold map element, give initial settings to map
          var map = L.map('map',{ center: [42.375562, -71.106870], zoom: 14});
          // Add tile layer to map element
          L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/tiles/256/{z}/{x}/{y}?access_token=exampleaccesstoken", {attribution: "Mapbox", maxZoom: 18, minZoom: 2}).addTo(map);
          // Add JSON to map
          L.geoJson(myData,{
              onEachFeature: function (feature, layer) {
                  layer.bindPopup(feature.properties.f2);
              }
          }).addTo(map);
  </code></pre>
  
  <p>NPM starts up fine, but when i go to view the page (localhost:3000/map), there's nothing there. No errors...nothing. The tutorial didnt include the leaflet.js script and leaflet.css link, which led to "L. not being defined". I included them but not sure if I have them in the right spot. Any help would be appreciated. </p>
  
  <p>Here's layout.jade for reference:</p>
  
  <pre><code>html
    head
      title= title
      link(rel='stylesheet', href='/stylesheets/style.css')
      link(rel='stylesheet', href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css")
    body
      div
      block content
  </code></pre>
  
  <p>And index.jade... (I didnt touch this one)</p>
  
  <pre><code>extends layout
  
  block content
    h1= title
    p Welcome to #{title}
  </code></pre>