Leaflet map not displaying

Question

Following along with the following tutorial: http://leafletjs.com/examples/quick-start/

I downloaded the css and the js to a local directory that I'm working from but I'm only showing a gray background. No map. What am I missing? Thank you.

<!DOCTYPE html>
<head>
    <meta charset="utf-8" >
    <title>Testing Leaflet</title>
    <link rel="stylesheet" href="leaflet.css" />
    <style>
        #mapid { height: 180px; }
    </style>
    <!--<script src="leaflet.js"></script> -->
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
    <div id="mapid"></div>
    <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        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>',
        maxZoom: 18,
        id: 'your.mapbox.project.id',
        accessToken: 'your.mapbox.public.access.token'
        }).addTo(mymap);

        var marker = L.marker([51.5, -0.09]).addTo(mymap);

        var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).addTo(mymap);

        var polygon = L.polygon([
        [51.509, -0.08],
        [51.503, -0.06],
        [51.51, -0.047]
        ]).addTo(mymap);

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

Here is all that is displayed.

Answer 1

     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                       attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributor',    
                       //other attributes.
    }).addTo(mapname);

I was facing the same issue, edit/add this to your existing code. You don't need to setup any account.

Answer 2

让您在Mapbox上注册一个帐户，然后设置your.mapbox.project.id和your.mapbox.public.access.token 。

Leaflet map not displaying

Question

2 answers

solution1
1 2017-10-18 10:26:27

solution2
0 2017-03-16 13:20:02

Leaflet map not displaying

Question

2 answers

solution1 1 2017-10-18 10:26:27

solution2 0 2017-03-16 13:20:02

solution1
1 2017-10-18 10:26:27

solution2
0 2017-03-16 13:20:02