CartoDB map in openlayers

Question

Is there a way that i can upload my CartoDB map in Openlayers as a WMS layer or Vector layer. Here is the my CartoDB map link. http://cdb.io/1nxdrpf

Answer 1

Yes, you can add it to openlayers but we do not support all the features like infowindows and so on. Here you have an example:

https://github.com/CartoDB/cartodb.js/blob/develop/examples/openlayers.html

the interesting code:

cartodb.Tiles.getTiles({
  type: 'cartodb',
  user_name: 'examples',
  sublayers: [{
   sql: 'select * from ne_10m_populated_p_2',
   cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
  }]
}, function(tileTemplate) {
  // generate urls for openlayers
  var tilesUrl = []
  for(var i = 0; i < 4; ++i) {
    tilesUrl.push(
      tileTemplate.tiles[0]
        .replace('{s}', 'abcd'[i])
        .replace('{z}','${z}')
        .replace('{x}','${x}')
        .replace('{y}','${y}')
    );
  }

  // create the openlayers layer
  var cartodbLayer = new OpenLayers.Layer.XYZ(
    "CartoDB example",
    tilesUrl, {
      attribution: "CartoDB, populated places",
      sphericalMercator: true,
      isBaseLayer: false
  });

  // add to the map
  map.addLayer(cartodbLayer);
});

}

Answer 2

The bit of code from Javi was helpful. I just had to change a few bits in order to make this work with OpenLayers 3.

cartodb.Tiles.getTiles({
      type: 'cartodb',
      user_name: 'dbauszus',
      sublayers: [{
          sql: 'SELECT * FROM playa_test',
          cartocss: '#playa_test{polygon-fill: #FF6600; polygon-opacity: 0; line-color: #F11810; line-width: 1; line-opacity: 1;}'
          }]},
      function(tileTemplate) {
          var tilesUrl = [];
          for(var i = 0; i < 4; ++i) {
              tilesUrl.push(tileTemplate.tiles[0].replace('{s}','abcd'[i]));
              }
          var layerCartodb = new ol.layer.Tile({
              source: new ol.source.XYZ({
                  urls: tilesUrl})
          });
          map.addLayer(layerCartodb);
          });

Good luck, Dennis