javascript - Leaflet map not loading tiles - Stack Overflow

My code:<!DOCTYPE html><html><head><title>OpenTTD Map<title><meta c

My code:

<!DOCTYPE html>
<html>
<head>
    <title>OpenTTD Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/[email protected]/dist/leaflet.css" />
    <script src="/[email protected]/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="width: 1600px; height: 900px"></div>
    <script>

        var tile_url = '{x}_{y}.png';

        var map = L.map('map', {
          maxZoom: 20,
          minZoom: 20,
          crs: L.CRS.Simple
        }).setView([0, 0], 20);
        //65409x32839
        var southWest = map.unproject([0, 32839], map.getMaxZoom());
        var northEast = map.unproject([65409, 0], map.getMaxZoom());
        map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
        L.tileLayer(tile_url, {
            attribution: 'Map data &copy; Ieuan\'s OpenTTD World',    
            continuousWorld: true,
            tileSize: 256
        }).addTo(map);

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

For some reason my tiles aren't loading, map is just showing grey. They're not being downloaded by browser and I'm not getting any error messages

The tiles are 256x256 parts of a 65409x32839 screenshot

URL to view is /

My code:

<!DOCTYPE html>
<html>
<head>
    <title>OpenTTD Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://npmcdn./[email protected]/dist/leaflet.css" />
    <script src="https://npmcdn./[email protected]/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="width: 1600px; height: 900px"></div>
    <script>

        var tile_url = 'http://dev.ruun.nl/zelf/openttd/tiles/map_{x}_{y}.png';

        var map = L.map('map', {
          maxZoom: 20,
          minZoom: 20,
          crs: L.CRS.Simple
        }).setView([0, 0], 20);
        //65409x32839
        var southWest = map.unproject([0, 32839], map.getMaxZoom());
        var northEast = map.unproject([65409, 0], map.getMaxZoom());
        map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
        L.tileLayer(tile_url, {
            attribution: 'Map data &copy; Ieuan\'s OpenTTD World',    
            continuousWorld: true,
            tileSize: 256
        }).addTo(map);

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

For some reason my tiles aren't loading, map is just showing grey. They're not being downloaded by browser and I'm not getting any error messages

The tiles are 256x256 parts of a 65409x32839 screenshot

URL to view is http://dev.ruun.nl/zelf/openttd/

Share Improve this question asked Aug 8, 2016 at 10:20 66h3m3ab66h3m3ab 1,1481 gold badge12 silver badges28 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

You have to explicitly specify that your Tile Layer maxZoom option is 20, otherwise you get the default value of 18, which prevents your tiles from being called at your only zoom (20).

Demo: http://plnkr.co/edit/0654usix33JJ5HJ4EQT4?p=preview

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742323032a4422196.html

相关推荐

  • javascript - Leaflet map not loading tiles - Stack Overflow

    My code:<!DOCTYPE html><html><head><title>OpenTTD Map<title><meta c

    10小时前
    30

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信