title: Node.js with Express and Jade template not displaying leaflet.js map
body: <p>I am attempting to put a map on the page using a Jade template. The template looks like this:</p>
  
  <pre><code>html
  head
      script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
      link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
      script.
          var map = L.map("map").setView([51.505, -0.09], 13);
          $(document).ready(function() {
              L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'}).addTo(map);
          });
  body
      #map(style='height: 500px;')
  </code></pre>
  
  <p>When view the page the HTML generated looks like this:</p>
  
  <pre><code>    &lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css"/&gt;
      &lt;script&gt;
        var map = L.map("map").setView([51.505, -0.09], 13);
        $(document).ready(function() {
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'}).addTo(map);
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map" style="height: 500px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Adding that code to JS fiddle (with the leaflet.js dependency) results in a working map - see <a href="http://jsfiddle.net/an4BB/" rel="nofollow">JSfiddle Map</a></p>
  
  <p>When debugging locally the error comes back as <em>Error: Map container not found.</em></p>
  
  <p>I've also tried wrapping it in a jquery document.ready to ensure the DOM is loaded. </p>
  
  <p>EDIT: wrapping it in a document ready does work using the correct syntax, the code below works correctly:</p>
  
  <pre><code>html
  head
      h1= title
      p Welcome to #{title}
      script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
      script(src='http://code.jquery.com/jquery-2.1.0.min.js')
      link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
      script.
          $(document).ready(function(){
              var map = L.map("map").setView([51.505, -0.09], 13);
              L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'}).addTo(map);
          })
  body
      #map(style='height: 500px;')
  </code></pre>