CartoDB source example

This example uses OpenLayers v4.0.1. The latest is v.

#### CartoDB source example

Show countries larger than

Example of a cartodb map.

A simple example with an anonymous cartodb map

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.layer.Tile
,
- ol.source.CartoDB
,
- ol.source.OSM

Copy Edit
CartoDB source example Example of a cartodb map. var mapConfig = { 'layers': [{ 'type': 'cartodb', 'options': { 'cartocss_version': '2.1.1', 'cartocss': '#layer { polygon-fill: #F00; }', 'sql': 'select * from european_countries_e where area > 0' } }] }; var cartoDBSource = new ol.source.CartoDB({ account: 'documentation', config: mapConfig }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ source: cartoDBSource }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); function setArea(n) { mapConfig.layers[0].options.sql = 'select * from european_countries_e where area > ' + n; cartoDBSource.setConfig(mapConfig); } document.getElementById('country-area').addEventListener('change', function() { setArea(this.value); }); <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> <div> <form class="form-horizontal"> <label> Show countries larger than <select id="country-area" class="form-control"> <option value="0" default>0 ㎢</option> <option value="5000">5000 ㎢</option> <option value="10000">10000 ㎢</option> <option value="50000">50000 ㎢</option> <option value="100000">100000 ㎢</option> </select> </label> </form> </div> </div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>CartoDB source example</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div class="row-fluid">
          <div class="span12">
            <div id="map" class="map"></div>
            <div>
            <form class="form-horizontal">
              <label>
                Show countries larger than
                <select id="country-area" class="form-control">
                  <option value="0" default>0 ㎢</option>
                  <option value="5000">5000 ㎢</option>
                  <option value="10000">10000 ㎢</option>
                  <option value="50000">50000 ㎢</option>
                  <option value="100000">100000 ㎢</option>
                </select>
              </label>
            </form>
          </div>
        </div>
        <script>
          var mapConfig = {
            'layers': [{
              'type': 'cartodb',
              'options': {
                'cartocss_version': '2.1.1',
                'cartocss': '#layer { polygon-fill: #F00; }',
                'sql': 'select * from european_countries_e where area > 0'
              }
            }]
          };

          var cartoDBSource = new ol.source.CartoDB({
            account: 'documentation',
            config: mapConfig
          });

          var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              }),
              new ol.layer.Tile({
                source: cartoDBSource
              })
            ],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          function setArea(n) {
            mapConfig.layers[0].options.sql =
                'select * from european_countries_e where area > ' + n;
            cartoDBSource.setConfig(mapConfig);
          }

          document.getElementById('country-area').addEventListener('change', function() {
            setArea(this.value);
          });
        </script>
      </body>
    </html>