2

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> 

contributors, &copy; <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>
|improve this question
2

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.