I think this should be easy, but I just can't work it out. I am building a multi-layer map using cartodb (own opensource server). Layers display well. but I have two problems. 1) the layer select drop down box is not displaying 2) I can't get infowindows to on lphoto layer.
I have a template at the top and have tried adding
photos.infowindow.set('template', $('#infowindow_template').html());
But this just creates an error. Any suggestions on how to get this to work?
<!doctype html>
<html>
<!-- based on
https://gist.github.com/jsanz/94e802930460ba850f8f
https://github.com/Vizzuality/CartoDB-Tutorials/blob/master/cartodb-js/adding_infowindows.md
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<link rel="shortcut icon" href="http://cartodb.com/assets/logos/logos_full_cartodb_light-
5ef5e4ff558f4f8d178ab2c8faa231c1.png"></src>
</div>
<div class="cartodb-popup-content">
<!-- content.data contains the field info -->
<h4>City: </h4>
<h2>{{content.data.name}}</h2>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<link rel="stylesheet" href="http://cartodb-
libs.global.ssl.fastly.net/cartodbui/assets/2.15.2/stylesheets/embeds.css" />
</head>
<body>
<div id="map"></div>
<script src="http://cartodb-
libs.global.ssl.fastly.net/cartodbui/assets/2.15.2/javascripts/cdb.js"></script>
<script>
$( document ).ready(function() {
//Create the leaflet map
var map = L.map('map', {
zoomControl: true,
center: [-33.64661,151.1252963],
layer_selector:true,
cartodb_logo:false,
zoom: 12
});
var basemap = L.tileLayer
('http://sixmaps.wildwalks.com/arcgis/rest/services/public/NSW_Base_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>
contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
// Promise for the first layer
var tracks = cartodb.createLayer(map, {
user_name:'wildwalks',
tiler_protocol:'http',tiler_domain:'mad.tl',tiler_port:'8181',sql_api_protocol:'http',sql_api_domain:
'mad.tl',sql_api_endpoint:'/api/v1/sql',sql_api_port:8080,cdn_url:null,no_cdn:true,type: 'cartoDB',
sublayers: [
{
sql: 'SELECT * FROM ww_walk_component',
cartocss: '#layer{line-color: #FF0000; line-width: 5; line-opacity: 0.7;}'
}
]
});
// Promise for the second layer
var photos = cartodb.createLayer(map, {
user_name:'wildwalks',
tiler_protocol:'http',tiler_domain:'mad.tl',tiler_port:'8181',sql_api_protocol:'http',sql_api_domain:
'mad.tl',sql_api_endpoint:'/api/v1/sql',sql_api_port:8080,cdn_url:null,no_cdn:true,type: 'cartoDB',
sublayers: [
{
sql: 'SELECT * FROM ww_images_gplus',
cartocss: '#images{ marker-placement: point;marker-type: ellipse;marker-width: 10;
marker-fill: #0000ff; marker-opacity:0.5;}',
interactivity: 'cartodb_id',
}
]
});
// When both are done, add them to the map;
$.when(tracks,photos).done(function(ltracks,lphotos){
ltracks.addTo(map);
lphotos.addTo(map);
});
});
</script>
</body>
</html>
1 Answer 1
I have modified a little bit the structure of your code in order to improve legibility and functionality. As mentioned at the begining of the html, I have used a block from a colleague that has all the elements (infowindows, tooltips, legend, fixed boxes...) added to a createLayer CartoDB.js map.
Fist, have a look at the end of the block and observe how I added the two layers to the map. You used two variables, but I have used a kind of "sandwich" methodology. Then you can get the sublayer you want to interact with, using the getSubLayer method. Finally, in order to add an infowindows you should get as parameters the map object, the layer and the fields used in the infowindows template.
<!doctype html>
<html>
<!-- based on
http://bl.ocks.org/oriolbx/3950e1a9b458a9177f9c
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Your Title</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script type="infowindow/html" id="infowindow_template">
<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-header"></div>
<div class="cartodb-popup-content">
<!-- content.data contains the field info -->
<h3>Id: </h3>
<h4>{{content.data.cartodb_id}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<link rel="stylesheet" href="http://cartodb-libs.global.ssl.fastly.net/cartodbui/assets/2.15.2/stylesheets/embeds.css" />
</head>
<body>
<div id="map"></div>
<script src="http://cartodb-libs.global.ssl.fastly.net/cartodbui/assets/2.15.2/javascripts/cdb.js"></script>
<script>
$( document ).ready(function() {
//Create the leaflet map
var map = L.map('map', {
zoomControl: true,
center: [-33.64661,151.1252963],
layer_selector:true,
cartodb_logo:false,
zoom: 12
});
L.tileLayer('http://sixmaps.wildwalks.com/arcgis/rest/services/public/NSW_Base_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
cartodb.createLayer(map, {
user_name:'wildwalks',
tiler_protocol:'http',
tiler_domain:'mad.tl',
tiler_port:'8181',
sql_api_protocol:'http',
sql_api_domain:'mad.tl',
sql_api_endpoint:'/api/v1/sql',
sql_api_port:8080,
cdn_url:null,
no_cdn:true,
type: 'cartoDB',
sublayers: [
{
sql: 'SELECT * FROM ww_walk_component',
cartocss: '#layer{line-color: #FF0000; line-width: 5; line-opacity: 0.7;}'
},
{
sql: 'SELECT * FROM ww_images_gplus',
cartocss: '#images{ marker-placement: point;marker-type: ellipse;marker-width: 10; marker-fill: #0000ff; marker-opacity:0.5;}',
interactivity: 'cartodb_id',
}]
})
.addTo(map)
// When both are done, add them to the map;
.done(function(layer){
photos = layer.getSubLayer(1);
cdb.vis.Vis.addInfowindow(
map, photos, ['cartodb_id'],
{
infowindowTemplate: $('#infowindow_template').html()
});
});
});
</script>
</body>
</html>
Note: you should customize your title, the infowindows template and this last interaction.
answered May 8, 2016 at 9:22