Node.js with Express and Jade template not displaying leaflet.js map

Question

I am attempting to put a map on the page using a Jade template. The template looks like this:

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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        });
body
    #map(style='height: 500px;')

When view the page the HTML generated looks like this:

    <html>
  <head>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
    <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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
      });
    </script>
  </head>
  <body>
    <div id="map" style="height: 500px;"></div>
  </body>
</html>

Adding that code to JS fiddle (with the leaflet.js dependency) results in a working map - see JSfiddle Map

When debugging locally the error comes back as Error: Map container not found.

I've also tried wrapping it in a jquery document.ready to ensure the DOM is loaded.

EDIT: wrapping it in a document ready does work using the correct syntax, the code below works correctly:

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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
        })
body
    #map(style='height: 500px;')

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

solution for me was to remove "doctype html" statement from layout.jade - found answer here: Google Maps doesn't seen in Jade - HTML works well

edited May 23 '17 at 12:33

Community

1
1

answered Dec 02 '14 at 04:22

ben

1

score 0 · Answer 2 · answered Dec 02 '14 at 07:01

If you take a look at the source of the examples supplied on the Leaflet site, for example: http://leafletjs.com/examples/quick-start-example.html, you can see that they circumvent the problem you're having, without using Jquery, by inserting the scripts at the end of the body element:

html
    head
        h1= title
        p Welcome to #{title}
        link(rel='stylesheet', href='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css')
    body
        #map(style='height: 500px;')
        script(src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js')
        script.
            var map = L.map("map").setView([51.505, -0.09], 13);
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

That should work but i don't have Jade at my disposal so i can't test it for you.

Node.js with Express and Jade template not displaying leaflet.js map

2 Answers2