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/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">
<img style="width: 100%" src="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>