Crater Lake National Park

NPMap

Digital maps for the National Park Service

CartoDb Layer With Dynamic Query

This example shows how to dynamically update a query for a CartoDb layer.

 

Related resources:

Map

Code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example-map" style="height:500px;position:absolute;width:500px;">
    </div>
    <script>
      var NPMap = {};

      NPMap.app = {
        visible: [
          'YES',
          'NO',
          'UNKNOWN'
        ],
        updateQuery: function(el) {
          var layer = NPMap.config.layers[1],
              query = 'SELECT * FROM ' + layer.table + ' WHERE ';

          NPMap.InfoBox.hide();

          if (el.checked === true) {
            NPMap.app.visible.push(el.id);
          } else {
            NPMap.app.visible.splice(_.indexOf(NPMap.app.visible, el.id), 1);
          }

          if (NPMap.app.visible.length) {
            _.each(NPMap.app.visible, function(sub) {
              query += 'online = \'' + sub + '\' OR ';
            });

            query = query.slice(0, query.length - 4);
          } else {
            query += 'online = \'teslkjdsklfjalksdasdlkfjwe335325e\'';
          }
          
          NPMap.Layer.CartoDb.updateQuery(layer, query);
        }
      };
      NPMap.config = {
        api: 'leaflet',
        baseLayers: [{
          type: 'Terrain'
        },{
          type: 'Aerial'
        },{
          type: 'Hybrid'
        },{
          type: 'Streets'
        }],
        center: {
          lat: 34.002076,
          lng: -108.98918
        },
        div: 'example-map',
        events: {
          init: function(callback) {
            var legend = document.createElement('div');
            
            legend.id = 'npmap-legend';
            legend.innerHTML = '<div style="background-color:white;bottom:35px;cursor:pointer;padding:15px;position:absolute;right:15px;z-index:1;"><p style="color:black;">Is online?</p><table><tr><td><input type="checkbox" id="YES" onclick="NPMap.app.updateQuery(this);" checked></td><td><label for="YES" style="color:#000;line-height:18px;width:auto;">Yes</label></td></tr><tr><td><input type="checkbox" id="NO" onclick="NPMap.app.updateQuery(this);" checked></td><td><label for="NO" style="color:#000;line-height:18px;width:auto;">No</label></td></tr><tr><td><input type="checkbox" id="UNKNOWN" onclick="NPMap.app.updateQuery(this);" checked></td><td><label for="UNKNOWN" style="color:#000;line-height:18px;width:auto;">Unknown</label></td></tr></table></div>';

            NPMap.Map.addControl(legend);
            callback();
          }
        },
        identify: {
          content: function(data) {
            if (typeof data.station_id !== 'undefined') {
              return 'Station ID: ' + data.station_id + '<br>Start data collection: ' + data.data_start + '<br>End data collection: ' + data.data_end + '<br>Date last verified: ' + data.datewprese + '<br>Network: ' + data.network + '<br>Nearest park: ' + data.park + '<br>In park: ' + data.in_park + '<br>URL: <a href="' + data.url + '">' + data.url + '</a><br>For data: ' + data.for_data + '<br>Additional notes: ' + data.note;
            } else {
              return data.gis_notes;
            }
          },
          title: function(data) {
            if (typeof data.station_id !== 'undefined') {
              return 'Station Name: ' + data.station_na;
            } else {
              return data.unit_name + ' ' + data.unit_type;
            }
          }
        },
        layers: [{
          name: 'Parks',
          table: 'scpn_units',
          type: 'CartoDb',
          user: 'nps-scpn'
        },{
          name: 'Stations',
          table: 'scpn_weather_stations',
          type: 'CartoDb',
          user: 'nps-scpn'
        }],
        zoom: 6,
        zoomRange: {
          min: 4,
          max: 20
        }
      };

      (function() {
        var s = document.createElement('script');
        s.src = 'http://www.nps.gov/npmap/1.0.0/bootstrap.js';
        document.body.appendChild(s);
      })();
    </script>
  </body>
</html>