const width = 960,

height = 900;

const svg = d3.create("svg")

.attr("viewBox", [12, 60, width-100, height-80]);

// Use Mercator projection

var projection = d3

.geoMercator()

.fitSize([width - 60, height - 50], boundingBox);

var path1 = d3.geoPath().projection(projection);

var path2 = d3.geoPath().projection(projection);

var path3 = d3.geoPath().projection(projection);

var g = svg.append("g").attr("id", "paths");

/*

//Mission: find the exact time and tranportation it takes to have the best CASE Field Trip!

//Greenwood Cemetery: 9:30 10 10:30 11:30 total hours: 2 hrs

//BAT: 11:30 12:00 12:30 1:00 total hours: 2:30 hrs

//Rockaway Beach: 1:15 1:30 2:15 2:30 total hrs: 30min

//TWA Hotel: 2:30 3:00 3:30 4:30 total hours: 2 hrs

// Ideal total hours: 7hrs

// Total trip stops: 4

// Total transportation: 2

// Congrats, you had the Best CASE Trip!

// Too slow! you're falling behind :(

// Too fast! you're getting ahead of the group

// [0,3] stepvalue: 0.5

g.selectAll("path2") //d3 geopath

.data(streets.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','.5')

.style("stroke-width", '.2')

.style("stroke", "rgb(0,0,0)")

g.selectAll("path3") //d3 geopath

.data(boroughs1.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '1.25')

.style("stroke", "slategrey")

g.selectAll("path3") //d3 geopath

.data(boroughs2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".1")

.style('stroke-opacity','1')

.style("stroke-width", '.5')

.style("stroke", "slategrey")

g.selectAll("path3") //d3 geopath

.data(parks2V2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "lightsteelblue")

.style("fill-opacity", ".5")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightsteelgrey")

g.selectAll("path3") //d3 geopath

.data(parks3.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style("fill-opacity", ".5")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightsteelgrey")

g.selectAll("path3") //d3 geopath

.data(waterfrontParks2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".1")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

g.selectAll("path3") //d3 geopath

.data(parkWaters.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path3) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "black")

g.selectAll("path2") //d3 geopath

.data(ferryLine.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "dodgerblue")

.style('stroke-dasharray','2 2')

g.selectAll("path2") //d3 geopath

.data(trail1.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "dodgerblue")

.style('stroke-dasharray','2 2')

g.selectAll("path2") //d3 geopath

.data(trail2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "none")

.style('stroke-opacity','1')

.style("stroke-width", '2')

.style("stroke", "dodgerblue")

.style('stroke-dasharray','2 2')

g.selectAll("path2") //d3 geopath

.data(batBoundary.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage3)

.on('mouseout', removespotImage3)

g.selectAll("path2") //d3 geopath

.data(rockawayBeachBoundary.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage2)

.on('mouseout', removespotImage2)

g.selectAll("path2") //d3 geopath

.data(cemeteryBoundary.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage1)

.on('mouseout', removespotImage1)

function spotImage(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://api.time.com/wp-content/uploads/2019/08/twa-hotel-queens-new-york.jpg')

.attr('class','spotImage')

.attr('x', '485')

.attr('y','720')

.attr('width', 350)

.attr('height', 150)

}

function removespotImage(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage').remove()

}

function spotImage1(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Green-Wood_Cemetery_gate_%2853784p%29_cropped.jpg/1200px-Green-Wood_Cemetery_gate_%2853784p%29_cropped.jpg')

.attr('class','spotImage1')

.attr('x', '485')

.attr('y','720')

.attr('width', 350)

.attr('height', 150)

}

function removespotImage1(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage1').remove()

}

function spotImage2(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://media.timeout.com/images/103881813/750/562/image.jpg')

.attr('class','spotImage2')

.attr('x', '485')

.attr('y','720')

.attr('width', 350)

.attr('height', 150)

}

function removespotImage2(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage2').remove()

}

function spotImage3(event,d){

d3.select(this).attr('fill','lavenderblush')

svg.append('image')

.attr('xlink:href','https://www.nycgo.com/images/venues/30801/brooklyn-army-terminal-sunset-park-manhattan-nyc-freightnyc_july_2018-071__large.jpg')

.attr('class','spotImage3')

.attr('x', '485')

.attr('y','720')

.attr('width', 350)

.attr('height', 150)

}

function removespotImage3(event,d){

d3.select(this).attr('fill',colorType)

d3.selectAll('image.spotImage3').remove()

}

var c = svg.selectAll("circle") //d3 geopath

.data(spots)

.enter() //there are more data than elements, this selects them

.append("circle") //appends path to data

.attr("cx", function(d) {return projection([d.longitude, d.latitude])[0]})

.attr("cy", function(d) {return projection([d.longitude, d.latitude])[1]})

.attr('r',4)

.attr('fill',colorType)

.style('fill-opacity','2')

.style('stroke','black')

.style('stroke-width','.8')

.on('mouseover', spotText)

.on('mouseout', removespotText)

g.selectAll("path2") //d3 geopath

.data(twaBoundary2.features) //get data to define path

.enter() //there are more data than elements, this selects them

.append("path") //appends path to data

.attr('class','outlines')

.attr("d", path2) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", "slategrey")

.style("fill-opacity", ".3")

.style('stroke-opacity','.1')

.style("stroke-width", '.1')

.style("stroke", "lightslategrey")

.on('mouseover', spotImage)

.on('mouseout', removespotImage)

function colorType(d,i){

var color = 'steelblue'

if(d.type=='Food'){color = 'steelblue'}

if(d.type=='Academics'){color = 'steelblue'}

if(d.type=='House'){color = 'steelblue'}

if(d.type=='Sports Facility'){color = 'steelblue'}

if(d.type=='Social Facility'){color = 'steelblue'}

if(d.type=='Market'){color = 'steelblue'}

if(d.type=='Field'){color = 'steelblue'}

return color

}

function spotText(event,d){

d3.select(this).attr('fill','dodgerblue')

.attr('r', 6)

.style('stroke', 'dodgerblue')

.style("stroke-opacity",'.5')

.style("stroke-width", '5')

svg.append('text')

.attr('class','spots')

.attr('x', '550')

.attr('y','687')

.attr('font-family','Helvetica')

.attr('font-size', '.7em')

.attr('text.anchor','start')

.attr('font-weight', 'bold')

.text(d.name)

svg.append('text')

.attr('class','spots')

.attr('x', '550')

.attr('y','705')

.attr('font-family','Helvetica')

.attr('font-size', '.65em')

.attr('text.anchor','start')

.attr('font-weight', 'normal')

.text(d.description)

svg.append('line')

.attr('class','spotLine')

.attr('x1', '550')

.attr('y1', '692')

.attr('x2', projection([d.longitude, d.latitude])[0])

.attr('y2', '692')

.style('stroke-width','.5')

.style('stroke','black')

.style('stroke-dasharray','2 2')

svg.append('line')

.attr('class','spotLine')

.attr('x1', projection([d.longitude, d.latitude])[0])

.attr('y1', '692')

.attr('x2', projection([d.longitude, d.latitude])[0])

.attr('y2', projection([d.longitude, d.latitude])[1])

.style('stroke-width','.7')

.style('stroke','darkblue')

.style('stroke-dasharray','2 2')

}

function removespotText(event,d){

d3.select(this).attr('fill',colorType)

d3.select(this).attr('r', 4)

d3.select(this).style('stroke-opacity','.65')

d3.select(this).style('stroke-width', '1')

d3.selectAll('text.spots').remove()

d3.selectAll('line.spotLine').remove()

}

return svg.node();

}