Map is not rendering in LeafletJS - getting blank page & no errors

Question

I am trying to implement a map view that shows either online or offline tiles using the LeafletJS library for Europe (Zoom level 6 & 7).

I've generated the offline map tiles using a program called Mobile Atlas Creator 2.0.0 beta 1 using these settings:

When the atlas is generated, it creates a zip file containing the folder MapQuest with several sub folders and tile images.

So, I have downloaded the leaflet JS library version 0.7.7 from http://leafletjs.com/ and extracted into the following dir structure along with the offline map tiles:

Here are the contents of my index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Europe Zoom Level 6 & 7</title>
        <link rel="stylesheet" type="text/css" href="leaflet.css">
        <script type="text/javascript" src="leaflet.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 100%;"></div>
        <script type="text/javascript">

            (function () {

                // Objects
                var isOnline = true;
                var map = L.map('map').setView([51.505, -0.09], 6);;

                // Generate tile layer url
                var tileLayerUrl = isOnline
                    ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    : 'MapQuest/{z}/{x}/{y}.jpg';

                // Set tile layer & set to map
                L.tileLayer(tileLayerUrl, {
                    minZoom : 6,
                    maxZoom : 7,
                    attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

            })();

        </script>
    </body>
</html>

I tried running this in offline mode as well as online mode to no avail; I am just getting a blank page. There are no errors in console.

Any ideas what I might be doing wrong here?

Latheesan Latheesan · Accepted Answer · 2016-04-01T11:57:29

Okay, I have figured it out. The issue was caused by not setting custom styles to control height.

Here's the fixed working version:

<!doctype html>
<html lang="en">
    <head>
        <title>Europe Zoom Level 6 & 7</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="leaflet.css">
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0;}
            #map { height: 100% }
        </style>
        <script type="text/javascript" src="leaflet.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <script type="text/javascript">

            (function () {

                // Objects
                var isOnline = false;
                var map = L.map('map').setView([51.505, -0.09], 6);;

                // Generate tile layer url
                var tileLayerUrl = isOnline
                    ? 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                    : 'MapQuest/{z}/{x}/{y}.jpg';

                // Set tile layer & add to map
                L.tileLayer(tileLayerUrl, {
                    minZoom : 6,
                    maxZoom : 7,
                    attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                })
                .addTo(map);

            })();

        </script>
    </body>
</html>

Map is not rendering in LeafletJS - getting blank page & no errors

1 Answers