const width = 900,//pixel size of the map

height = 900;

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width-50, height-10]);

// Use Mercator projection

var projection = d3

.geoMercator()//projection system used

.fitSize([width, height], bbox_new);//out bounding box is here

var path = d3.geoPath().projection(projection);//need one of these for each line layer from qgis

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

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

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

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

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

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

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

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

var g = svg.selectAll('g').attr("id", "paths");//qgis lines variable //one variable for each geometry type

var c = svg.selectAll("circle")//for circles

var p = svg.selectAll("polyline")//for polylines from rhino

var t = svg.selectAll("text")

staticLines(path3, parks.features,"rgb(34,159,225)",'.25','.1',"rgb(0,255,0)")

function staticLines(path, data, sfill, sOpac, sW, stroke){

g.enter().append("path")

.data(data) //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", path) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", sfill)

.style('stroke-opacity',sOpac)

.style("stroke-width", sW)

.style("stroke", stroke)

}

//static points from qgis

staticCircles(mta.features,'4','red','0.2',"0")

staticCircles(drinkingFountain.features,'4','rgb(77,255,222)','0.6',"0")

function staticCircles(data,r,sfill, sOpac, sWidth){

c.enter().append('circle')

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

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

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

.attr('cx',function(d) {return path.centroid(d)[0]})

.attr("cy",function(d) {return path.centroid(d)[1]})

.attr('r', r)

.attr('fill', sfill)

.style('fill-opacity',sOpac)

.style("stroke-width", sWidth)

}

//lines from rhino

polyline(title1,'none','1','2','rgb(34,159,225)')

polyline(route,'blue','0.5','0.2','rgb(255,186,0)')

polyline(dron3,'none','1','0.2','rgb(34,159,225)')

function polyline(data, sfill, sOpac, sW, stroke){

g.enter().append("polyline")

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

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

.append('polyline')

.attr("points", function(d){return d}) //The d attribute defines a path to be drawn, only applies to appended elements

.style("fill", sfill)

.style('stroke-opacity',sOpac)

.style("stroke-width", sW)

.style("stroke", stroke)

}

//draw icons at spreadsheet location

p.enter().append("polyline")

.data(parkss) //get data to define path

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

.append('polyline')

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

.attr('transform','translate(-50,50)')

.style("fill", 'rgb(34,158,225)')

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

.style("stroke", 'rgb(156,225,251)')

.on("mouseover", addText2)

.on("mouseout", removeText)

p.enter().append("polyline")

.data(parkss) //get data to define path

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

.append('polyline')

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

.attr('transform','translate(-50,50)')

.style("fill", 'rgb(34,158,225)')

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

.style("stroke", 'rgb(156,225,251)')

.on("mouseover", addText2)

.on("mouseout", removeText)

p.enter().append("polyline")

.data(parkss) //get data to define path

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

.append('polyline')

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

.attr('transform','translate(-50,50)')

.style("fill", 'rgb(34,158,225)')

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

.style("stroke", 'rgb(156,225,251)')

.on("mouseover", addText2)

.on("mouseout", removeText)

p.enter().append("polyline")

.data(parkss) //get data to define path

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

.append('polyline')

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

.attr('transform','translate(-50,50)')

.style("fill", 'none')

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

.style("stroke", 'rgb(156,225,251)')

.on("mouseover", addText2)

.on("mouseout", removeText)

//points from spreadsheet

c.enter().append('circle')

.data(parkss) //get data to define path

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

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

.attr('class','spots')

.attr('cx',function(d) {return projection([d.Long,d.Lat])[0]-5})

.attr("cy",function(d) {return projection([d.Long,d.Lat])[1]+10})

.attr('r', 6)

.attr('fill', 'cyan')

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

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

.style("stroke", "black")

.on("mouseover", addText)

.on("mouseout", removeText)

function addText(event,d){

svg//draw text

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

.attr('class','mText')

.attr('x',projection([d.Long,d.Lat])[0])

.attr("y",projection([d.Long,d.Lat])[1])

.attr('fill', 'black')

.style('font-family','helvetica')

.style("font-size", "15px")

.text(d.Name)

svg//draw text

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

.attr('class','mText')

.attr('x',50)

.attr("y",400)

.attr('fill', 'black')

.style('font-family','helvetica')

.style("font-size", "11px")

.text(d.Description)

var wrap = svg.selectAll("text.mText")

.each(function(d, i) { wrap_text(d3.select(this), 100) });

}

function addText2(event,d){

svg//draw text

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

.attr('class','mText')

.attr('x',100)

.attr("y",400)

.attr('fill', 'black')

.style('font-family','helvetica')

.style("font-size", "12px")

.text('New York City has numerous outdoor drinking fountains, especially around popular tourist spots. However, the water quality from these fountains is often questionable. Visitors and residents need clean and safe drinking water, so I have designed an innovative solution—a manual water purification drone.')

var wrap = svg.selectAll("text.mText")

.each(function(d, i) { wrap_text(d3.select(this), 130) });

}

function removeText(){

svg.selectAll('text.mText').remove()

}

return svg.node();

}