map_with_labels = {
const chartWidth = 300;
const chartHeight = 300;
const backgroundColor = "#EAF2FA";
const landColor = "#09A573";
const landStroke = "#FCF5E9";
const markerColor = "#E26F99";
const labelOnWaterColor = "#504C57";
const labelOnLandColor = "#FAF9FB";
const projection = d3.geoMercator()
.scale([180])
.center(markers[0].geometry.coordinates)
.translate([chartWidth / 4, chartHeight / 3]);
const pathGenerator = d3.geoPath(projection);
const svg = d3.create('svg')
.attr("title", "Map")
.attr('width', chartWidth)
.attr('height', chartHeight)
svg.append("rect")
.attr("width", chartWidth)
.attr("height", chartHeight)
.attr('fill', backgroundColor);
svg.selectAll('path')
.data(au_and_nz.features)
.join('path')
.attr('d', pathGenerator)
.attr('fill', landColor)
.attr('stroke', landStroke)
.attr('stroke-width', 1);
svg.selectAll("circle")
.data(markers)
.join("circle")
.attr("cx", d => projection(d.geometry.coordinates)[0])
.attr("cy", d => projection(d.geometry.coordinates)[1])
.attr("r", 4)
.attr("fill-opacity", 0.5)
.attr("fill", markerColor)
.attr("stroke", markerColor);
svg.selectAll("g.countryLabels text")
.data(au_and_nz.features)
.join("text")
.attr("fill", d => d.properties.name === "New Zealand" ? labelOnWaterColor : labelOnLandColor)
.attr("transform", d => `translate(${pathGenerator.centroid(d)})`)
.attr("dx", "0em")
.attr("dy", d => d.properties.name === "New Zealand" ? "2.2em" : "0em")
.attr("text-anchor", "middle")
.style("font", "400 16px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif")
.text(d => d.properties.name);
svg.selectAll("g.pointOfInterest text")
.data(markers)
.join("text")
.attr("fill", labelOnWaterColor)
.attr("transform", d => `translate(${pathGenerator.centroid(d)})`)
.attr("dx", "-0.5em")
.attr("dy", "-0.5em" )
.attr("text-anchor", "end")
.style("font", "400 14px/1.5 'Source Sans Pro', 'Noto Sans', sans-serif")
.text(d => "Broome");
return svg.node();
}