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 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")//for polylines from rhino

staticLines(path4, parks.features,"rgb(200,225,200)",'.25','.1',"rgb(0,255,0)")

staticLines(path5, dining_lines.features,"none",'1','.25',"rgb(255,0,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(restrooms.features,'2','black','1',"0")

staticCircles(theaters.features,'4','blue','1',"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(graphic_test,'red','1','0','none')

polyline(face_outline,'rgb(255,255,0)','1','2','black')

polyline(eyes,'blue','1','1','black')

polyline(mouth,'none','1','3','red')

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)

}

t.enter().append('text')

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

.enter()

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

//.attr('class','sText')

.attr('x',200)

.attr("y",function(d,i){return 400+(15*i)})

.attr('fill', 'black')

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

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

.style('font-size','1vw')

.style("stroke", "none")

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

.style("text-anchor", "end")

.text(function(d){return d.Name})

p.enter().append('polyline')

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

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

//svg

.append('polyline')

//.attr("points", '200,'+function(d,i){return 400+(15*i)}+' 50 80,20 30,40') //The d attribute defines a path to be drawn, only applies to appended elements

.attr("points", function(d,i){return '200,'+(400+(15*i))+' ' +projection([d.Long,d.Lat])[0]+','+(400+(15*i))+' '+projection([d.Long,d.Lat])[0]+','+projection([d.Long,d.Lat])[1]})

.style("fill", 'none')

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

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

.style("stroke", 'blue')

p.enter().append('polyline')

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

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

//svg

.append('polyline')

//.attr("points", '200,'+function(d,i){return 400+(15*i)}+' 50 80,20 30,40') //The d attribute defines a path to be drawn, only applies to appended elements

.attr("points", bunny)

.attr('transform',function(d){return 'translate('+ projection([d.Long,d.Lat])[0]+" " +projection([d.Long,d.Lat])[1] + ")"})

.style("fill", 'pink')

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

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

.style("stroke", 'blue')

p.enter().append('polyline')

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

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

//svg

.append('polyline')

//.attr("points", '200,'+function(d,i){return 400+(15*i)}+' 50 80,20 30,40') //The d attribute defines a path to be drawn, only applies to appended elements

.attr("points", bunny)

.attr('transform',function(d){return 'translate('+ path.centroid(d)[0]+" " +path.centroid(d)[1] + ")"})

.style("fill", 'pink')

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

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

.style("stroke", 'blue')

//points from spreadsheet

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

.data(museum) //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]})

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

.attr('r', 4)

.attr('fill', fillColor)

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

.style("stroke", "black")

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

.on('click', addText)

.on('mouseout', removeText)

function fillColor(d){

var color = 'rgb(255,0,0)'

if(d.ID == 1){color = 'rgb(50,0,0)'}

if(d.ID == 2){color = 'rgb(100,0,0)'}

if(d.ID == 3){color = 'rgb(150,0,0)'}

if(d.ID == 4){color = 'rgb(200,0,0)'}

return color

}

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

.data(bikes.features) //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 path6.centroid(d)[0]})

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

//.attr('r', 4)

.attr('r', function(d) {return d.properties.bikes_available/10})

.attr('fill', fillColor)

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

.style("stroke", "black")

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

function addText(event,d){

var color = 'rgb(255,0,0)'

if(d.ID == 1){color = 'rgb(50,0,0)'}

if(d.ID == 2){color = 'rgb(100,0,0)'}

if(d.ID == 3){color = 'rgb(150,0,0)'}

if(d.ID == 4){color = 'rgb(200,0,0)'}

svg

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

.attr('class','sText')

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

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

.attr('fill', color)

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

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

.style('font-size','1vw')

.style("stroke", "none")

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

.text(d.Name)

svg

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

.attr('class','sText')

.attr('x',25)

.attr("y",200)

.attr('fill', 'black')

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

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

.style('font-size','1vw')

.style("stroke", "none")

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

.text(d.Description)

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

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

}

function removeText(event,d){

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

}

return svg.node();

}