let container = html`<div id="map" style='height:600px;' />`;

yield container;

let map = new mapboxgl.Map({

container,

center: [-73.976, 40.738],

zoom: 15,

bearing:-8.79,

pitch:60.00,

style: "mapbox://styles/dhalpern/cjwgi6a9m1fpi1co2pg1wo6wy?fresh=true"

});

var popup = new mapboxgl.Popup({

closeButton: true,

closeOnClick: true

});

map.on('click', 'parcels', function(e) {

var polygon;

var buffered;

var polygonBoundingBox;

var southWest;

var northEast;

var northEastPointPixel;

var southWestPointPixel;

var features;

var collection;

var intersections = [];

var query_layer = $('#query_layer').children("option:selected").val();

var buffer = parseInt($('#buffer').val());

var buffer_radius = (query_layer == 'parcels') ? buffer : 0;

var info = `<b>Community District:</b>${e.features[0].properties.CD} <br><b>Zoning District:</b> <a href="https://www1.nyc.gov/home/search/index.page?search-terms=${e.features[0].properties.ZoneDist1}&sitesearch=www1.nyc.gov%2Fsite%2Fplanning" target="_blank">${e.features[0].properties.ZoneDist1}</a><br><b>BBL:</b>${e.features[0].properties.BBL}<br><b>FAR:</b>${e.features[0].properties.BuiltFAR}<br><b>ZIP:</b>${e.features[0].properties.ZipCode}`

var selector;

var counter=1;

var subjectBBL = e.features[0].properties.BBL;

map.getCanvas().style.cursor = 'pointer';

if (query_layer == "parcels") {

async.series([

function(callback){

polygon = turf.polygon(e.features[0].geometry.coordinates);

buffered = turf.buffer(polygon, buffer_radius, {units:"feet"});

counter +=1

map.getSource('buffered').setData(buffered);

callback(null,'one');

},

function(callback){

polygonBoundingBox = turf.bbox(buffered);

callback(null,'two');

},

function(callback){

southWest = [polygonBoundingBox[0], polygonBoundingBox[1]];

northEast = [polygonBoundingBox[2], polygonBoundingBox[3]];

northEastPointPixel = map.project(northEast);

southWestPointPixel = map.project(southWest);

features = map.queryRenderedFeatures([southWestPointPixel, northEastPointPixel], { layers: ['parcels'] });

callback(null,'three');

},

function(callback){

for (let i=0;i<features.length;++i){

if (Math.floor((parseInt(features[i].properties.BBL))/10000)*10000 == Math.floor(subjectBBL/10000)*10000) {

intersections.push(parseInt(features[i].properties.BBL))

}

}

callback(null, 'four');

},

function(callback) {

map.setPaintProperty('parcels','fill-color', buildCondList(intersections.filter(onlyUnique), 'BBL')).setPaintProperty('parcels','fill-opacity',["match",["get","BBL"],e.features[0].properties.BBL,1,0.5]);

callback(null, 'five');

}

],

// optional callback

function(err, results) {

// results is now equal to ['one', 'two']

});

} else {

var column_sel = (query_layer == 'zoning-districts') ? 'zoningID' : 'CD';

map.setPaintProperty('parcels','fill-color', ["match",["get",column_sel],e.features[0].properties[`${column_sel}`],"#f8eeb0","white"]).setPaintProperty('parcels','fill-opacity',["match",["get","BBL"],e.features[0].properties.BBL,1,0.5]);

if (column_sel == "zoningID") {

map.setPaintProperty('zoningID','line-width', ["match",["get",'zoningID'],e.features[0].properties[`${column_sel}`],2,0])

} else {

map.setPaintProperty('community-districts','line-width', ["match",["get",'boro_cd'],e.features[0].properties[`${column_sel}`],2,0])

}

}

popup.setLngLat(e.lngLat)

.setHTML(info)

.addTo(map);

});

// Wait until the map loads.

map.on("load", () => {

container.value = map;

map.addSource('buffered', {type: 'geojson', data: {"type": "FeatureCollection","features": []}});

map.addLayer({

'id': 'buffered',

'type': 'fill',

'source': 'buffered',

'layout': {},

'paint': {

'fill-color': '#f08',

'fill-opacity': 0.05

}

});

});

}