この例とドキュメントに従って、クリックして CartoDB マップにホバーすると情報ウィンドウを追加しようとしていますが、苦労しています。
これは私のHTMLです:
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<span> custom </span>
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<h4>{{content.data.postcode}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
そして、これは私のJavaScriptです:
window.onload = function() {
var options = {
center: [53.2, 0.0],
zoom: 5
};
var map_object = new L.Map('map', options);
var cartocss = '#combined { marker-fill-opacity: 0.9; marker-line-color: #FFF;marker-line-width: 1;marker-line-opacity: 1; marker-placement: point; marker-type: ellipse; marker-width: 10; marker-fill: #FF6600; marker-allow-overlap: true; }';
cartodb.createLayer(map_object, {
user_name: 'myname',
type: 'cartodb',
sublayers: [
{
type: "http",
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
},
{
sql: 'SELECT * FROM combined',
cartocss: cartocss
},
]
})
.addTo(map_object)
.on('done', function(layer) {
var sublayer = layer.getSubLayer(1);
cartodb.vis.Vis.addInfowindow(map_object, sublayer, [ 'postcode'], {
infowindowTemplate: $('#infowindow_template').html(),
templateType: 'mustache'
});
})
.error(function(err) {
console.log("error: " + err);
});
});
これはマップ上のポイントを示していますが、それらをクリックしても何も起こりません。コンソールにエラーはありません。私は何を間違っていますか?
更新: 奇妙なことに、最初のレイヤーを削除してサブレイヤー セレクターを に変更するとvar sublayer = layer.getSubLayer(0)
、情報ウィンドウが表示されます。しかし、私は両方のレイヤーが必要です!