cb_appointment_map.js

"use strict";

var map = L.map('map', {
  minZoom: 11,
  maxZoom: 15
}).setView([40.744746, -73.989232], 11);
map.scrollWheelZoom.disable();
L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(map);
var username = 'betanyc',
    apiKey = 'PC4meDosPmucfz4x3B0evA';
var client = new carto.Client({
  apiKey: apiKey,
  username: username
});
var cd_source = new carto.source.SQL('SELECT * FROM mn_community_districts_1');
var cd_style = new carto.style.CartoCSS("\n    #layer {\n      polygon-fill: #696969;\n      polygon-opacity: 0;\n    }\n    #layer::outline {\n      line-width: 2;\n      line-color: #7d7d7d;\n      line-opacity: 0.5;\n    }\n    #layer::labels {\n      text-name: [cd];\n      text-face-name: 'Lato Bold Italic';\n      text-size: 15;\n      text-fill: #909090;\n      text-label-position-tolerance: 0;\n      text-halo-radius: 2;\n      text-halo-fill: #ffffff;\n      text-dy: -10;\n      text-allow-overlap: true;\n      text-placement: point;\n      text-placement-type: dummy;\n    }\n    ");
var cb_source = new carto.source.SQL('SELECT * FROM appointments_geocoded_melt');
var cb_style = new carto.style.CartoCSS("\n    #layer {\n    \t[zoom < 13] {marker-width: 6}\n    \t[zoom = 13] {marker-width: 9}\n    \t[zoom > 13] {marker-width: 9}\n    \tmarker-fill: ramp([bp_cc], (#E58606, #5D69B1, #A5AA99), (\"Borough President Appointed\", \"City Council Member Nominated\"), \"=\");\n    \tmarker-fill-opacity: 1;\n    \tmarker-allow-overlap: true;\n    \tmarker-line-width: 1;\n    \tmarker-line-color: #FFFFFF;\n    \tmarker-line-opacity: 1;\n    }\n        ");
var featureOverColumns = {
  community_board: 'Community Board'
};
var cd_layer = new carto.layer.Layer(cd_source, cd_style);
var cb_layer = new carto.layer.Layer(cb_source, cb_style, {
  featureOverColumns: Object.keys(featureOverColumns)
});
client.addLayers([cd_layer, cb_layer]);
client.getLeafletLayer().addTo(map); //add legend

var legend = L.control({
  position: 'topright'
});

legend.onAdd = function (map) {
  var div = L.DomUtil.create('div', 'info legend');
  div.innerHTML += '<strong>Legend</strong><br/>';
  div.innerHTML += [['#E58606', 'Borough President Appointed'], ['#5D69B1', 'City Council Member Nominated']].map(function (item) {
    return "<i class=\"circle\" style=\"background: ".concat(item[0], "\"></i> ").concat(item[1]);
  }).join('<br/>');
  return div;
};

legend.addTo(map); //add popup

var popup = L.popup({
  closeButton: true
});

function openPopup(featureEvent) {
  var content = '<div class="widget">';
  content += '<ul>' + Object.keys(featureOverColumns).map(function (key) {
    var value = featureEvent.data[key];
    return "<li><h4>".concat(featureOverColumns[key], "</h4><p>").concat(value ? value : 'N/A', "</p></li>");
  }).join('') + '</ul>';
  content += '</div>';
  popup.setContent(content);
  popup.setLatLng(featureEvent.latLng);

  if (!popup.isOpen()) {
    popup.openOn(map);
  }
}

function closePopup(featureEvent) {
  popup.removeFrom(map);
}

cb_layer.on('featureClicked', openPopup); //init wufoo iframes

var reportDOM = document.getElementById('reports');
var CD_DATA = [{
  id: 1,
  borocd: 101,
  name: 'Community Board 1 (Financial District, Battery Park City, Tribeca, Seaport)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-1-membership-snapshot-fall-2019'
}, {
  id: 2,
  borocd: 102,
  name: 'Community Board 2 (Greenwich Village, SoHo, NoHo, Little Italy, Hudson Sq., Chinatown)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/q1u7wux01jh0yln/'
}, {
  id: 3,
  borocd: 103,
  name: 'Community Board 3 (Chinatown, Lower East Side)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-3-membership-snapshot-fall-2019/'
}, {
  id: 4,
  borocd: 104,
  name: 'Community Board 4 (Chelsea, Clinton, Hell’s Kitchen)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-4-membership-snapshot-fall-2019/'
}, {
  id: 5,
  borocd: 105,
  name: 'Community Board 5 (Midtown)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-5-membership-snapshot-fall-2019/'
}, {
  id: 6,
  borocd: 106,
  name: 'Community Board 6 (Gramercy, Murray Hill, Turtle Bay, Stuyvesant Town/PCV, Kips Bay)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-6-membership-snapshot-fall-2019/'
}, {
  id: 7,
  borocd: 107,
  name: 'Community Board 7 (Upper West Side)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-7-membership-snapshot-fall-2019/'
}, {
  id: 8,
  borocd: 108,
  name: 'Community Board 8 (Upper East Side)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-8-membership-snapshot-fall-2019/'
}, {
  id: 9,
  borocd: 109,
  name: 'Community Board 9 (West Harlem)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-9-membership-snapshot-fall-2019/'
}, {
  id: 10,
  borocd: 110,
  name: 'Community Board 10 (Central Harlem)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-10-membership-snapshot-fall-2019/'
}, {
  id: 11,
  borocd: 111,
  name: 'Community Board 11 (East Harlem)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-11-membership-snapshot-fall-2019/'
}, {
  id: 12,
  borocd: 112,
  name: 'Community Board 12 (Washington Heights, Inwood)',
  wufoo: 'https://manhattancommunityboards.wufoo.com/reports/manhattan-cb-12-membership-snapshot-fall-2019/'
}];
CD_DATA.forEach(function (cd) {
  var listElement = document.createElement('li');
  var linkElement = document.createElement('a');
  linkElement.innerText = "".concat(cd.name);
  linkElement.href = '#membership-info';
  linkElement.addEventListener('click', function () {
    //add iframe
    document.getElementById('wufoo').innerHTML = "<iframe width=\"100%\" height=\"300\" src=".concat(cd.wufoo, "></iframe>");
    cb_source.setQuery("SELECT * FROM appointments_geocoded_melt WHERE community_board = 'CB ".concat(cd.id, "'")).then(function () {
      var boundsQuery = "SELECT ST_Extent(the_geom) as extent FROM mn_community_districts_1 WHERE boro_cd = ".concat(cd.borocd);
      var boundsUrl = "https://".concat(username, ".carto.com/api/v2/sql?q=").concat(boundsQuery, "&api_key=").concat(apiKey);
      fetch(boundsUrl).then(function (response) {
        return response.json();
      }).then(function (json) {
        //https://bl.ocks.org/ivanmalagon/4c6607df493cca652624e094568593ec
        function parseExtent(extent) {
          var floatRegex = /-?[0-9]\d*(\.\d+)?/g;
          var matches = extent.match(floatRegex);
          return {
            west: Number.parseFloat(matches[0]),
            south: Number.parseFloat(matches[1]),
            east: Number.parseFloat(matches[2]),
            north: Number.parseFloat(matches[3])
          };
        }

        var extent = json.rows[0].extent;
        var bounds = parseExtent(extent);
        map.fitBounds([[bounds.south, bounds.west], [bounds.north, bounds.east]]);
        closePopup();
      });
    });
  });
  listElement.appendChild(linkElement);
  reportDOM.appendChild(listElement);
});