javascript - Leaflet map not displaying

Following along with the following tutorial: /

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="/[email protected]/dist/leaflet.js"></script>
</head>
<body>
    <div id="mapid"></div>
    <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

        L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery © <a href="">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.

Following along with the following tutorial: http://leafletjs./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./[email protected]/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./v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors, <a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.">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.

Share Improve this question asked Mar 16, 2017 at 13:10 martinbshp 1,1834 gold badges25 silver badges37 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

     L.tileLayer('http://{s}.tile.osm/{z}/{x}/{y}.png', {
                       attribution: '&copy; <a href="http://osm/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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Leaflet map not displaying - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)