Javascript 无法渲染传单平铺层

我正在尝试使用传单生成一个交互式地图。但是，我在渲染tilelayer时遇到了一些问题。我使用dustjs来呈现HTML，这只会给我一个空白映射，如下所示：

我最初尝试按照指南使用MapBox来完成此操作。我相信我有正确的访问令牌

    var mymap = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=XYZ', {
        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: 'USERNAME.STYLEID',
        accessToken: 'XYZ'
    }).addTo(mymap);

var mymap=L.map（'map'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=XYZ'{
属性：“地图数据©；贡献者，图像©”，
maxZoom:18，
id:'用户名.样式id'，
accessToken:'XYZ'
}).addTo（mymap）；

我从URL中获取样式id，如下所示：

我还尝试使用OSM来绕过任何获取访问令牌和项目id的问题，因此我从我找到的教程中获取了以下代码：

var map = L.map('map', {
        center: [43.64701, -79.39425],
        zoom: 15
    });

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

var map=L.map（'map'{
中间：[43.64701，-79.39425]，
缩放：15
});
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；

但这也会呈现一张空白地图

以下是使用OSM的完整代码转储：

var map=L.map（'map'{
中间：[43.64701，-79.39425]，
缩放：15
});
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；

看起来

tilelayer中的括号没有正常工作。在编译模板时，dust编译器可能会忽略
{}

包含一个
*.js
文件，而不是内联复制将起作用。
在初始化传单组件之前，确保div的大小（宽度和高度）不为零。能否再次检查css文件是否正确加载？@lonelyelk width和height来自于样式表，该样式表是在加载所有内容之前加载的。@muzaffar@Jack。。我需要你确认，外部css文件，如传单。css加载正确，请你打开开发工具等，并检查那里的css文件是否已添加到页面正确