`;
}
private renderMap(
lines: LineSet[],
bd: AstrocartographyResponse['birthDetails'],
) {
return html``;
}
private renderGraticule() {
const meridians = [];
for (let lon = -150; lon <= 150; lon += 30) {
const x = lonToX(lon);
const axis = lon === 0;
meridians.push(
svg``,
);
meridians.push(
svg`${formatLon(lon)}`,
);
}
const parallels = [];
for (let lat = -60; lat <= 60; lat += 30) {
const y = latToY(lat);
const axis = lat === 0;
parallels.push(
svg``,
);
parallels.push(
svg`${formatLat(lat)}`,
);
}
// Tropics and polar circles as dashed climate-band references.
const refs = [TROPIC, -TROPIC, POLAR, -POLAR].map(
(lat) =>
svg``,
);
return svg`${meridians}${parallels}${refs}`;
}
private renderBodyLines(line: LineSet, index: number) {
const color = planetColor(line.planet, index);
const glyph = line.symbol || line.planet.slice(0, 2);
const items = [
this.renderMeridian(
line.mc.longitude,
color,
glyph,
line.planet,
'mc',
false,
),
this.renderMeridian(
line.ic.longitude,
color,
glyph,
line.planet,
'ic',
true,
),
this.renderCurve(
line.ascendant.points,
color,
glyph,
line.planet,
'ascendant',
false,
),
this.renderCurve(
line.descendant.points,
color,
glyph,
line.planet,
'descendant',
true,
),
];
return svg`${items}`;
}
private renderMeridian(
lon: number,
color: string,
glyph: string,
planet: string,
angle: string,
dashed: boolean,
) {
const x = lonToX(lon);
// MC label rides the top edge, IC the bottom, so the two meridians of one
// body never stack their glyphs at the same point.
const labelY = angle === 'ic' ? H - 7 : 9;
return svg`${planet} ${ANGLE_LABEL[angle]} line${glyph}`;
}
private renderCurve(
points: GeoPoint[],
color: string,
glyph: string,
planet: string,
angle: string,
dashed: boolean,
) {
const segments = toSegments(points ?? []);
if (segments.length === 0) return nothing;
// Label at the sample nearest the equator, the most visible band.
const anchor = (points ?? []).reduce(
(best, p) => (Math.abs(p.latitude) < Math.abs(best.latitude) ? p : best),
points[0] ?? { latitude: 0, longitude: 0 },
);
return svg`
${segments.map(
(pts) =>
svg`${planet} ${ANGLE_LABEL[angle]} line`,
)}
${glyph}`;
}
private renderLegend(lines: LineSet[]) {
if (lines.length === 0) return nothing;
return html`
${lines.map((l, i) => {
const color = planetColor(l.planet, i);
return html`
${l.symbol ? html`${l.symbol} ` : nothing}${l.planet}
`;
})}
Solid lines are the Ascendant and Midheaven, dashed are the Descendant and IC.