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)

}

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

polyline(greenery,'rgb(117,130,115)','1','.6','rgb(137,150,135)','zzz','5 0')

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

polyline(roads1,'none','1','.1','black','zzz','5 0')

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

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

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

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

polyline(buildingiconwhite,'rgb(221,221,221)','1','1','rgb(221,221,221)','zzz')

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)

//MOUSEOVER BOX ORGANIZED

function drawPolyline(data, lineStyle, mouseoverCallback) {

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

.data(data)

.enter()

.append('polyline')

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

.style("fill", lineStyle.fill || 'white')

.style('fill-opacity', lineStyle.fillOpacity || '0')

.style("stroke-width", lineStyle.strokeWidth || '1')

.style("stroke", lineStyle.stroke || 'black')

.style('stroke-dasharray', lineStyle.strokeDasharray || '5 5')

.style('pointer-events', '1')

.on("mouseover", mouseoverCallback)

.on("mouseout", removeWireframe);

}

function addWireframe(event, d, wireframeData, textContent) {

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

.data(wireframeData)

.enter()

.append('polyline')

.attr('class', 'wireframe')

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

.style("fill", 'none')

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

.style("stroke", 'black');

// Draw text

svg.append("text")

.attr('class', 'mText')

.attr('x', 20)

.attr("y", 25)

.attr('fill', 'black')

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

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

.text(textContent);

svg.selectAll("text.mText")

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

}

function removeWireframe() {

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

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

}

function drawArea(areaData, wireframeData, textContent) {

drawPolyline(areaData, {

stroke: 'black',

strokeWidth: '.5',

strokeDasharray: '5 5'

}, function(event, d) {

addWireframe(event, d, wireframeData, textContent);

});

}

const yopougonText = 'Yopougon is one of the major neighborhoods in Abidjan, known for being very populated and vibrant. It has a few areas that are rapidly developing and in high demand as centers and commercial hubs. But it also has many areas that are low income/informal and these places are known as the slums. The buildings in the slums are constructed with cheaper materials and usually don’t meet the building standards.';

const cocodyText = 'Cocody is known as one of the wealthiest neighborhoods in Abidjan with numerous high end apartments and villas. These buildings are typically high rise and are built with much better materials than other areas of Abidjan. This place is also home to diplomatic and embassy buildings. The infrastructure and building standards are highly regarded and there aren’t any major problems with it. The cost of living here is especially high and there are some smaller areas within Cocody that are slum-like, which shows where the money is.';

const aboboText = 'Abobo is a very commercial neighborhood with tons of shops, stores, stalls, restaurants, businesses, etc. It is known for its crowded and busy markets. The buildings in Adobo are mostly older, but there are a few more modern buildings. Most of the buildings serve as mixed use property, where the bottom floors are commercial, while the floors above are residential. Adobo faces infrastructure problems and suffers from the lack of urbanization in comparison to other areas.';

const treichvilleText = 'Treichville is a densely populated neighborhood with mostly traditional Ivorian architecture that prioritizes practicality and efficiency. Like Adobo, it has many commercial buildings and street vendors. This area experiences the same problems as Abodo on top of overcrowding.';

drawArea(yopougon, wireframe, yopougonText);

drawArea(cocody, wireframe, cocodyText);

drawArea(abobo, wireframe, aboboText);

drawArea(treichville, wireframe, treichvilleText);

//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

svg.selectAll("circle")

.data(neighborhood)

.enter()

.append("circle")

.attr('class', 'spots')

.attr('cx', function(d) { return d.x; })

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

.attr('r', 5)

.attr('fill', 'yellow')

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

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

.style("stroke", "black")

.on("mouseover", addText)

.on("mouseout", removeText);

function addText(event, d) {

var text1 = svg.append("text")

.attr('class', 'mText')

.attr('x', '20')

.attr('y', '480')

.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), 250); });

var text2 = svg.append("text")

.attr('class', 'mText')

.attr('x', '20')

.attr('y', '465')

.attr('fill', 'red')

.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), 250); });

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//Yopougon Collapse

.append('image')

.attr('class', 'picture')

.attr('x', '340')

.attr('y', '260')

.attr('width', '120')

//.attr('height', '725')

.attr('href', 'https://media-files.abidjan.net/photo/effondrement-un-immeuble-r-3-a-yopougon_3h77n713htm.jpg')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Cocody Collapse

.append('image')

.attr('class', 'picture')

.attr('x', '520')

.attr('y', '230')

.attr('width', '120')

//.attr('height', '725')

.attr('href', 'https://www.sabcnews.com/sabcnews/wp-content/uploads/2023/09/ivory-edited.jpg')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Cocody Collapse 2

.append('image')

.attr('class', 'picture')

.attr('x', '500')

.attr('y', '130')

.attr('width', '120')

//.attr('height', '725')

.attr('href', 'https://th.bing.com/th/id/OIP.oildNc6AARno2uLhVgF6NQHaD5?w=316&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Treichville Collapse

.append('image')

.attr('class', 'picture')

.attr('x', '460')

.attr('y', '300')

.attr('width', '120')

//.attr('height', '725')

.attr('href', 'https://beninwebtv.com/wp-content/uploads/2022/02/Capture-web_27-2-2022_134614_afrik-plus.com_-1.jpeg')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Yopougon Bridge Collapse

.append('image')

.attr('class', 'picture')

.attr('x', '280')

.attr('y', '180')

.attr('width', '90')

//.attr('height', '725')

.attr('href', 'https://media-files.abidjan.net/photo/yopougon-drame-effondrement-dun-pilier-de-lechangeur-en-construction-a-gesc_0i21a1gamk1a.jpg')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Anyama Collapse

.append('image')

.attr('class', 'picture')

.attr('x', '370')

.attr('y', '0')

.attr('width', '90')

//.attr('height', '725')

.attr('href', 'https://www.aljazeera.com/wp-content/uploads/2020/06/339c8d8ee57944a0b4d337054aa504aa_18.jpeg?resize=770%2C513&quality=80')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Yopougon Collapse 2

.append('image')

.attr('class', 'picture')

.attr('x', '340')

.attr('y', '90')

.attr('width', '90')

//.attr('height', '725')

.attr('href', 'https://pbs.twimg.com/media/EGNWGUsWoAYQGsi?format=jpg&name=medium')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Port Bouet Accident

.append('image')

.attr('class', 'picture')

.attr('x', '490')

.attr('y', '390')

.attr('width', '120')

//.attr('height', '725')

.attr('href', 'https://cdn.punchng.com/wp-content/uploads/2017/05/31204606/Helicopter-crash.jpg')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg//Abodo Fire

.append('image')

.attr('class', 'picture')

.attr('x', '390')

.attr('y', '70')

.attr('width', '90')

//.attr('height', '725')

.attr('href', 'https://th.bing.com/th/id/OIP.B2DsAqYFq-u6SHcb0myRFQAAAA?w=316&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition()

.style('opacity', 1);

})

.on('mouseout', function() {

d3.select(this)

.transition()

.style('opacity', 0);

});

svg.append('image')//Attecoube Accident

.attr('class', 'picture')

.attr('x', 410)

.attr('y', 167)

.attr('width', 90)

.attr('href', 'https://www.bing.com/th?id=OIP.qym-sKLwKKmUMV4A0YPZ3QHaES&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.1&pid=3.1&rm=2')

.style('opacity', 0)

.on('mouseover', function() {

d3.select(this)

.transition() // Add smooth transition for opacity

.style('opacity', 1); // Make visible on hover

})

.on('mouseout', function() {

d3.select(this)

.transition() // Smooth transition back

.style('opacity', 0); // Make invisible when mouse leaves

});

return svg.node();

}