1

Can I code my Cartodb.js map somehow so that when someone first opens the map, there is already an infowindow open for them to see?

4

There is actually a better way now,

https://gist.github.com/javisantana/7b817fda1e7511c451c7#file-index-html-L39

The key bit is the openInfowindow function,

  function openInfowindow(layer_index, latlng, cartodb_id) {
    layer.trigger('featureClick', null, latlng, null, { cartodb_id: cartodb_id }, layer_index);
  }

you can include it in your own code. Pass it the layer you are referencing, the latlng where you want the infowindow anchored, and the cartodb_id of the item you want opened.

1

I recommend you to use an Infobox [1] and then open it on map load. You can use custom templates like with Infowindows.

Another option is to fake a click event on a map feature, like a Marker.

I hope it makes sense. Please tell if you need more help.

[1] http://developers.cartodb.com/documentation/cartodb-js.html#sec-5-3

  • how would you fake a click event on a marker? – user25917 Jan 30 '14 at 16:49
  • via jquery for example, with a .click() – matallo Jul 24 '14 at 8:04
-1

Another way is to call the features from your table upon loading. Then creating a div structure that will pick out the json features and display the results.

    sql.execute("SELECT house FROM table_name WHERE distance ='5')
     .done(function(data) {
      for (var i = 0; i < data.total_rows; i++) {
       $('#content').append("<div><p>" + data.rows[i].house + 
                                    </p></div>Distance:<div><p>" +                                                                            
                                               data.rows[i].distance +
                                   "</p></div>");
     }
  })
   .error(function(errors) {
    // errors contains a list of errors
     console.log("errors:" + errors);
   })

Next place div id='content' somewhere in your html along with some css to make it appear.

Maybe something like this:

    #content.p{ 
        position: absolute;
        z-index:10000;
        background:#fff;
        margin:0 auto;
        padding:0;
        height: 50px;
        width: 100px;
        }

I have not tested the code but the logic/structure is here

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.