Map not displaying with Leaflet

Question

I am completely new to developing applications that bring in maps. I am developing a mobile application using Apache Cordova, Javascript, HTML5, and Leaflet. On the index.html page, I need to display a map on the page. I have a DIV on the page for the map but the map does not display. I have tried it in a few different emulators with no luck. I have made sure that the img-src attribute allows for images to be pulled in from the correct resource. I have also tried a few different free providers. Lastly, I moved the javascript code from the bottom of the index.html file to the onDeviceReady() handler in the index.js file. My code for the two files are below. Can anyone tell why my map isn't showing? I have followed the examples I viewed and it looks fine from what I can tell, but that doesn't mean a thing. Any help would be greatly appreciated. Thanks.

index.js file:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener( 'pause', onPause.bind( this ), false );
        document.addEventListener( 'resume', onResume.bind( this ), false );

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        //var element = document.getElementById("deviceready");
        //element.innerHTML = 'Device Ready';
        //element.className += ' ready';

        var myMap = L.map('map').setView([38.92940492128304, -94.66508077838485], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                maxZoom: 19
            }).addTo(myMap);

        //L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        //    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        //    maxZoop: 18,
        //    id: 'your.mapbox.project.id',
        //    accessToken: 'your.mapbox.public.access.token'
        //}).addTo(myMap);
    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
    } )();

index.html file:

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; media-src *; font-src 'self' https://fonts.gstatic.com; script-src 'self' 'unsafe-inline'; img-src 'self' data: *.tile.openstreetmap.org *.openstreetmap.org">

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" type="text/css" href="css/leaflet.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap-cyborg.css" />

        <title>MockupsForLis</title>
    </head>
    <body>
        <div class="header">
            ...
        </div>

        <div id="map"></div>

        <footer>
           ...
        </footer>


        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>

        <script type="text/javascript" src="scripts/leaflet-src.js"></script>

        <script src="scripts/jquery-2.2.2.min.js"></script>
        <script src="scripts/bootstrap.js"></script>
    </body>
</html>

Answer 1

鉴于上述mattesCZ的评论，我决定将地图DIV上定义的高度从百分比更改为像素，并且地图显示完全没有问题。

Map not displaying with Leaflet

Question

1 answers

solution1
0 ACCPTED 2016-03-28 12:37:33

Map not displaying with Leaflet

Question

1 answers

solution1 0 ACCPTED 2016-03-28 12:37:33

solution1
0 ACCPTED 2016-03-28 12:37:33