Ich richte eine Community-Map ein, die die Position einiger Baumgruben enthält. Die Karte finden Sie hier http://moabiter-baumscheiben.seedbomb.city/map/. Ich benutze Mapbox für die Grundkarte und Cartodb, um die Ebene mit den Baum-Pit-Markern aufzunehmen.Cartodb-Info-Fenster zeigt keine Variablen auf der Karte an
Ich lief, um ein benutzerdefiniertes Informationsfenster zu erhalten, aber es zeigt nicht die Variablen ({{img}}
und {{name}}
) aus meiner Cartobd-Datenbank.
Ich kann den Fehler nicht finden. Wäre toll, wenn mir jemand helfen könnte.
I enthalten alle MapBox und cartodb css und js in das <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>
Das ist das Skript für die Info-Fenster:
<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>
Und das Skript für die Kartenschichten:
<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>
Wäre toll, wenn mir jemand helfen könnte!