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

height = 560

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")

var l = svg.selectAll("line")

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 d.x})

.attr("cy",function(d) {return d.y})

.attr('r', r)

.attr('fill', sfill)

.style('fill-opacity',sOpac)

.style("stroke-width", sWidth)

}

*/

//lines from rhino

//polyline(graphic_test,'red','1','0','none','angles')

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

polyline(ground,'rgb(221,221,221)','1','1','rgb(221,221,221)','zzz','5 0')

polyline(water,'rgb(197,213,216)','1','1','rgb(197,213,216)','zzz','5 0')

polyline(abidjanDot,'yellow','1','1','black','zzz')

polyline(border11,'none','1','1','black','zzz')

polyline(coteBorder1,'none','1','2','rgb(122,64,64)','zzz','5 2')

polyline(text,'none','1','.5','black','zzz')

polyline(importantText,'none','1','.5','red','zzz')

polyline(atlanticOcean,'none','1','.5','black','zzz')

polyline(backgroundbox,'white','.5','.5','black','zzz')

polyline(yellowBorderLine,'none','1','10','yellow','zzz')

polyline(blackBorderFill,'black','1','1','black','zzz')

//(data, sfill, sOpac, sW, stroke,classVar,sd)

svg//draw text

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

.attr('class','mText')

.attr('x',25)

.attr("y",35)

.attr('fill', 'black')

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

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

.text('BUILDING CODE DEFICIENCY')

svg//draw text

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

.attr('class','mText')

.attr('x',25)

.attr("y",55)

.attr('fill', 'black')

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

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

.text('IN THE IVORY COAST')

svg//draw text

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

.attr('class','mText')

.attr('x',37)

.attr("y",80)

.attr('fill', 'black')

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

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

.text('In Abidjan, Côte d’Ivoire, there are numerous cases of building accidents that have caused casualties, injuries, and homelessness. The reasons for these accidents have to do with improper construction and subpar building materials. Additionally, buildings like these are typically illegally constructed and made with a lack of building code compliance. These buildings in Abidjan are commonly known to collapse because they aren’t able to handle the weather conditions (heavy rain and floods), leaving the residents without a home. Construction practices and materials need to be revised and ensured that they are following the building code and appropriate. Abidjan also needs to consider the climate and have their buildings prepared to deal with natural disasters like floods. Places within Abidjan like Yopougon, Abodo, Treichville, and Koumassi are the main neighborhoods/districts that have informal settlements, illegal construction and other building codeless buildings. However, its not just in these places; Cocody and Plateau are two wealthier neighborhoods that also have cases of illegal construction and lack of building code regulation. Cocody and Plateau are both pretty modern and well maintained neighborhoods. Those places typically see larger scale building accidents like the ones in Riviera Palmeraie and Angre district (both within Cocody). The data on the spreadsheet highlights the building problems in Abidjan and unfortunately shows that it is only a problem worth mentioning once lives are involved. The devastating consequences of these building collapses, including loss of life, injuries, and homelessness, demand urgent action. A proactive approach that prioritizes safety, considers climate resilience, and ensures strict adherence to building codes is crucial to prevent future tragedies and safeguard the lives and livelihoods of Abidjans residents.')

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

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

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

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

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

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

.append('polyline')

.attr('class',classVar)

.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)

.style('stroke-dasharray',sd)

}

/* //draw icons at spreadsheet location

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

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

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

.append('polyline')

.attr('class','bunny')

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

.attr('transform', function(d) { return 'translate(' + d.x + ', ' + d.y + ')'; }) //new transform system that works with x and y

.style("fill", 'red')

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

.style("stroke", 'black')

// .on("mouseover", addWireframe)

// .on("mouseout", removeWireframe)

/*

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

.data(zone1) //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", 'white')

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

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

.style("stroke", 'black')

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

.on("mouseover", addWireframe)

.on("mouseout", removeWireframe)

*/

/*

function addWireframe(event,d){

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

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

.enter()

.append('polyline')

.attr('class','wireframe')

.attr("points", function(d) {return d})

.style("fill", 'none')

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

.style("stroke", 'black')

svg//draw text

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

.attr('class','mText')

.attr('x',50)

.attr("y",600)

.attr('fill', 'black')

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

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

.text('this is a detail')

}

function removeWireframe(event,d){

svg.selectAll('polyline.wireframe').remove()

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

}

*/

//display names from spreadsheet - use this format for points from SPREADSHEET

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

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

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

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

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

// .attr('x',140)

// .attr("y",function(d,i){return 780 +(i*16)})

// .attr('fill', 'black')

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

/// .style("font-size", "9px")

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

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

// .on("mouseover",musText)

// .on("mouseout",removeMusText)

/*

function removeMusText(event,d){

svg.selectAll("line.museumLine").remove()

svg.selectAll('polyline.bunny').style('fill','red')

svg.selectAll('polyline.angles').style('fill','red')

}

function musText(event,d){

svg.selectAll('polyline.bunny').style('fill','yellow')

svg.selectAll('polyline.angles').style('fill','yellow')

//THESE ARE LINES FOR ANNOTATION

l.enter().append('line')

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

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

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

.attr('class','museumLine')

.attr('x1',145)

.attr("y1",780)

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

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

.attr('stroke', 'black')

.attr('stroke-width', '1.25')

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

//THESE ARE LINES FOR ANNOTATION

l.enter().append('line')

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

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

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

.attr('class','museumLine')

.attr('x1',145)

.attr("y1",function(d,i){return 780 +(i*16)})

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

.attr("y2",function(d,i){return 780 +(i*16)})

.attr('stroke', 'black')

.attr('stroke-width', '.25')

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

l.enter().append('line')

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

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

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

.attr('class','museumLine')

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

.attr("y1",function(d,i){return 780 +(i*16)})

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

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

.attr('stroke', 'black')

.attr('stroke-width', '.25')

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

}

*/

/*

t.enter().append('text')//theater names from QGIS - use this format for points from QGIS

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

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

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

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

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

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

.attr('fill', 'black')

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

.style('text-anchor','middle')

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

.text(function(d){return d.properties.NAME})

*/

//points from spreadsheet use for google sheet circles

/*

function addText(event, d) {

var text1 = svg.append("text")

.attr('class', 'mText')

.attr('x', '10')

.attr('y', '500')

.attr('fill', 'black')

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

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

.text(d.Description);

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

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

var text2 = svg.append("text")

.attr('class', 'mText')

.attr('x', '10')

.attr('y', '480')

.attr('fill', 'blue')

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

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

.text(d.Date);

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

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

d3.select(this).datum().textElement = { text1, text2 };

}

function removeText(event, d) {

if (d.textElement) {

d.textElement.text1.remove();

d.textElement.text2.remove();

}

d3.select(this).style('fill', 'yellow');

}

*/

//NEW STUFF PAST THIS POINT

/* svg//draw text

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

.attr('class','mText')

.attr('x',50)

.attr("y",300)

.attr('fill', 'black')

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

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

.text('Illegal construction in Yopougon in Niangon Adjame district and the removing of the formwork of a slab caused the collapse')

*/

return svg.node();

}