Cartodb信息窗口未在地图上显示变量

时间:2016-05-10 11:14:41

标签: javascript leaflet mapbox infowindow cartodb

我正在设置一个社区地图,其中包含一些树坑的位置。地图可以在http://moabiter-baumscheiben.seedbomb.city/map/找到。我使用mapbox作为底图和cartodb来包含带有树坑标记的图层。

我管理自定义信息窗口,但它不会显示我的cartobd数据库中的变量({{img}}{{name}})。

我无法找到错误。如果有人可以帮助我,那会很棒。

我将所有mapbox和cartodb css和js都包含在<head>

<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.standalone.js'></script>

这是信息窗口的脚本:

<script type="infowindow/html" id="infowindow_template">
    <div class="cartodb-popup v2">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
        <div class="cartodb-popup-content-wrapper">
            <div class="cartodb-popup-header">
                <h1>Baumscheibe</h1>
            </div>
            <div class="cartodb-popup-content">
                <!-- content.data contains the field info -->
                <h3>Image:</h3> <img src="{{img}}">
                <h3>Gepflegt von: {{name}}</h3>
            </div>
        </div>
        <div class="cartodb-popup-tip-container"></div>
    </div>
</script>

这是地图图层的脚本:

<script>
   L.mapbox.accessToken = 'My MapBox access code';

   var southWest = L.latLng(52.510135, 13.284534)
       , northEast = L.latLng(52.559125, 13.400293)
       , bounds = L.latLngBounds(southWest, northEast);

   var map = L.map('map', {
       center: [52.5279664, 13.32686126]
       , maxBounds: bounds
       , zoom: 14
       , maxZoom: 20
       , minZoom: 14
   });

   map.fitBounds(bounds);


   var layers = {
       Streets: L.mapbox.tileLayer('svpvertex.ml8nijl4')
       , Imagery: L.mapbox.tileLayer('svpvertex.m0ammo9e')
   };

   layers.Streets.addTo(map);

   //add cartoDB layer, set z-index so it shows up on top
   cartodb.createLayer(map, 'My CartoDB access').addTo(map)
       .on('done', function (layer) {
           layer.setZIndex(5);
           // get sublayer 0 and set the infowindow template
           var sublayer = layer.getSubLayer(0);

           sublayer.infowindow.set('template', $('#infowindow_template').html());
       }).on('error', function () {
           console.log("some error occurred");
       });
</script>

如果有人可以帮助我,那会很棒!

1 个答案:

答案 0 :(得分:0)

看起来您的互动性存在问题。

如果您正在使用编辑器,请记住在infowindow上打开您需要的字段或设置自定义信息窗,以便所有字段都可用。

如果您正在使用命名地图,请将这些字段添加到模板上的交互性定义中。