@kahwee/sf-map-svg 0.3.0 → 1.1.0

package/src/geometry.d.ts

@@ -1,8 +0,0 @@
-import type { Geometry, Position } from '../data/index.js';
-export declare function rawProject(coordinates: Position): [number, number];
-export declare function positions(geometry: Geometry | null | undefined): Position[];
-/** SVG paths for polygon/line geometry. Points must be projected and drawn as markers. */
-export declare function geometryPath(
-  geometry: Geometry | null | undefined,
-  project: (position: Position) => [number, number],
-): string;

package/src/geometry.js

@@ -1,51 +0,0 @@
-const number = (value) => Number(value.toFixed(2));
-
-export function rawProject([longitude, latitude]) {
-  if (
-    !Number.isFinite(longitude) ||
-    Math.abs(longitude) > 180 ||
-    !Number.isFinite(latitude) ||
-    Math.abs(latitude) >= 90
-  )
-    throw new RangeError(
-      'Coordinates must be finite [longitude, latitude], with longitude from -180 to 180 and latitude strictly between -90 and 90.',
-    );
-  const point = [
-    (longitude * Math.PI) / 180,
-    -Math.log(Math.tan(Math.PI / 4 + (latitude * Math.PI) / 360)),
-  ];
-  if (!point.every(Number.isFinite))
-    throw new RangeError('Coordinates are too close to a pole for Mercator projection.');
-  return point;
-}
-export function positions(geometry) {
-  if (!geometry) return [];
-  if (geometry.type === 'GeometryCollection') return geometry.geometries.flatMap(positions);
-  const result = [];
-  const walk = (coordinates) => {
-    if (typeof coordinates[0] === 'number') result.push(coordinates);
-    else coordinates.forEach(walk);
-  };
-  walk(geometry.coordinates);
-  return result;
-}
-export function geometryPath(geometry, project) {
-  if (!geometry) return '';
-  const line = (ring) =>
-    ring.map((p, i) => `${i ? 'L' : 'M'}${project(p).map(number).join(',')}`).join('');
-  const polygon = (rings) => rings.map((ring) => `${line(ring)}Z`).join('');
-  switch (geometry.type) {
-    case 'Polygon':
-      return polygon(geometry.coordinates);
-    case 'MultiPolygon':
-      return geometry.coordinates.map(polygon).join('');
-    case 'LineString':
-      return line(geometry.coordinates);
-    case 'MultiLineString':
-      return geometry.coordinates.map(line).join('');
-    case 'GeometryCollection':
-      return geometry.geometries.map((g) => geometryPath(g, project)).join('');
-    default:
-      return '';
-  }
-}

package/src/immutable.js

@@ -1,8 +0,0 @@
-/** Freeze shared geographic objects so a consumer cannot change later renders. */
-export function deepFreeze(value) {
-  if (value && typeof value === 'object' && !Object.isFrozen(value)) {
-    for (const child of Object.values(value)) deepFreeze(child);
-    Object.freeze(value);
-  }
-  return value;
-}

package/src/index.d.ts

@@ -1,51 +0,0 @@
-import type { Position } from '../data/index.js';
-export type DistrictYear = 2002 | 2012 | 2022;
-export interface MapMarker {
-  id: string;
-  lng: number;
-  lat: number;
-  label?: string;
-  selected?: boolean;
-  color?: string;
-}
-export interface SFMapOptions {
-  width?: number;
-  height?: number;
-  padding?: number;
-  year?: DistrictYear;
-  districtLines?: boolean;
-  neighborhoodLines?: boolean;
-  districtFills?: boolean;
-  districtLabels?: boolean;
-  highways?: boolean;
-  landmarks?: boolean;
-  bartStations?: boolean;
-  markers?: MapMarker[];
-  title?: string;
-  idPrefix?: string;
-  colors?: Partial<
-    Record<
-      | 'water'
-      | 'land'
-      | 'district'
-      | 'neighborhood'
-      | 'highway'
-      | 'park'
-      | 'landmark'
-      | 'bart'
-      | 'label'
-      | 'marker'
-      | 'selected',
-      string
-    >
-  >;
-}
-export declare const districtYears: readonly DistrictYear[];
-export declare const neighborhoodNames: readonly string[];
-export declare const districtColors: readonly string[];
-export declare function createSFMap(options?: SFMapOptions): {
-  svg: string;
-  project: (coordinates: Position) => [number, number];
-  viewBox: [number, number, number, number];
-};
-export declare function renderSFMap(options?: SFMapOptions): string;

package/src/index.js

@@ -1,122 +0,0 @@
-import data from './data.js';
-import { landmarks as landmarkData, bartStations as stationData } from './overlays.js';
-import { rawProject, positions, geometryPath } from './geometry.js';
-import { escape, stroke } from './svg.js';
-import * as layers from './layers.js';
-
-// The common coast is immutable: compute its Mercator bounds once per module.
-const coastPoints = positions(data.coast).map(rawProject);
-const bounds = coastPoints.reduce(
-  (b, [x, y]) => [Math.min(b[0], x), Math.min(b[1], y), Math.max(b[2], x), Math.max(b[3], y)],
-  [Infinity, Infinity, -Infinity, -Infinity],
-);
-
-export const districtYears = Object.freeze([2002, 2012, 2022]);
-export const neighborhoodNames = Object.freeze(data.neighborhoods.map((item) => item.name));
-export const districtColors = Object.freeze([
-  '#c8dce5',
-  '#d5e4d6',
-  '#d1d6e8',
-  '#d0dfd7',
-  '#e4dcca',
-  '#d3dced',
-  '#d9d8e7',
-  '#c8dfdf',
-  '#e2d6ca',
-  '#cbdcd1',
-  '#dfddc9',
-]);
-const defaults = {
-  water: '#e7f0f3',
-  land: '#f1f3ee',
-  district: '#71838a',
-  neighborhood: '#8c9195',
-  highway: '#bd8b73',
-  park: '#b2cfaa',
-  landmark: '#3e6346',
-  bart: '#24789a',
-  label: '#304958',
-  marker: '#245b61',
-  selected: '#f04f32',
-};
-let sequence = 0;
-
-/** Make an offline SVG and the matching longitude/latitude projection. */
-export function createSFMap(options = {}) {
-  const {
-    width = 800,
-    height = 800,
-    padding = 28,
-    year = 2022,
-    districtLines = true,
-    neighborhoodLines = false,
-    districtFills = true,
-    districtLabels = true,
-    highways = false,
-    landmarks = false,
-    bartStations = false,
-    markers = [],
-    title = 'San Francisco map',
-    idPrefix = `sf-map-${++sequence}`,
-  } = options;
-  if (
-    ![width, height, padding].every(Number.isFinite) ||
-    width <= 0 ||
-    height <= 0 ||
-    padding < 0 ||
-    padding * 2 >= Math.min(width, height)
-  )
-    throw new RangeError('Use positive dimensions and padding smaller than half the map.');
-  if (!districtYears.includes(year))
-    throw new RangeError('District year must be 2002, 2012, or 2022.');
-  if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(idPrefix))
-    throw new TypeError(
-      'idPrefix must start with a letter and contain only letters, numbers, underscores, or hyphens.',
-    );
-  const colors = { ...defaults, ...options.colors };
-  const [minX, minY, maxX, maxY] = bounds;
-  const scale = Math.min(
-    (width - padding * 2) / (maxX - minX),
-    (height - padding * 2) / (maxY - minY),
-  );
-  const project = (coordinates) => {
-    const [x, y] = rawProject(coordinates);
-    const point = [
-      (x - (minX + maxX) / 2) * scale + width / 2,
-      (y - (minY + maxY) / 2) * scale + height / 2,
-    ];
-    if (!point.every(Number.isFinite))
-      throw new RangeError('Projected coordinates must be finite; use smaller map dimensions.');
-    return point;
-  };
-  const path = (geometry) => geometryPath(geometry, project);
-  const coastPath = path(data.coast);
-  const districts = data.districts[year];
-  const context = { project, path, colors, idPrefix };
-  const districtPaths =
-    districtFills || districtLines
-      ? districts.map((d) => ({
-          id: d.id,
-          path: path(d.geometry) + path(d.extras),
-          color: districtColors[d.id - 1],
-        }))
-      : [];
-  const parts = [
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-labelledby="${idPrefix}-title" data-sf-map="" data-year="${year}" style="max-width:100%;height:auto"><title id="${idPrefix}-title">${escape(title)}</title><desc>San Francisco supervisorial district boundaries (${year}).${neighborhoodLines ? ' Dashed lines show SFAR realtor neighborhood areas, defined in August 2010.' : ''}${landmarks ? ' Highlighted areas show six parks and landmarks.' : ''}${bartStations ? ' Rings mark the eight San Francisco BART stations.' : ''} Geometry from DataSF${bartStations ? ' and BART' : ''}. See package SOURCES.md.</desc><defs><clipPath id="${idPrefix}-coast"><path d="${coastPath}" fill-rule="evenodd" clip-rule="evenodd"/></clipPath></defs><rect width="${width}" height="${height}" fill="${escape(colors.water)}"/><g data-layer="geography"><path data-layer="coast" d="${coastPath}" fill="${escape(colors.land)}" fill-rule="evenodd"/>`,
-  ];
-  // Explicit drawing order keeps optional overlays and user markers predictable.
-  if (districtFills) parts.push(layers.districtFills(districtPaths, context));
-  if (landmarks) parts.push(layers.landmarks(landmarkData, context));
-  if (highways) parts.push(layers.highways(data.highways, context));
-  if (neighborhoodLines) parts.push(layers.neighborhoods(data.neighborhoods, context));
-  if (districtLines) parts.push(layers.districtLines(districtPaths, context));
-  parts.push(`<path data-layer="coastline" d="${coastPath}" ${stroke(colors.district, 0.65)}/>`);
-  if (districtLabels) parts.push(layers.districtLabels(districts, context));
-  if (landmarks) parts.push(layers.landmarkLabels(landmarkData, context));
-  if (bartStations) parts.push(layers.bartStations(stationData, context));
-  parts.push(layers.markers(markers, context), '</g></svg>');
-  return { svg: parts.join(''), project, viewBox: [0, 0, width, height] };
-}
-export function renderSFMap(options = {}) {
-  return createSFMap(options).svg;
-}

package/src/layers.js

@@ -1,54 +0,0 @@
-import { escape, number, stroke, overlayLabel } from './svg.js';
-
-export function districtFills(districts, { idPrefix }) {
-  return `<g data-layer="district-fills" clip-path="url(#${idPrefix}-coast)">${districts.map((d) => `<path data-district="${d.id}" d="${d.path}" fill="${d.color}" fill-rule="evenodd"/>`).join('')}</g>`;
-}
-export function districtLines(districts, { idPrefix, colors }) {
-  return `<g data-layer="district-lines" clip-path="url(#${idPrefix}-coast)">${districts.map((d) => `<path data-district="${d.id}" d="${d.path}" ${stroke(colors.district, 1.1)}/>`).join('')}</g>`;
-}
-export function landmarks(items, { idPrefix, path, colors }) {
-  return `<g data-layer="landmarks" clip-path="url(#${idPrefix}-coast)">${items.map((item) => `<path data-landmark="${escape(item.id)}" d="${path(item.geometry)}" fill="${escape(colors.park)}" fill-rule="evenodd"><title>${escape(item.name)}</title></path>`).join('')}</g>`;
-}
-export function highways(items, { path, colors }) {
-  return `<g data-layer="highways">${items.map((road) => `<path data-route="${escape(road.route)}" d="${path(road.geometry)}" ${stroke(colors.highway, 1.4)}/>`).join('')}</g>`;
-}
-export function neighborhoods(items, { idPrefix, path, colors }) {
-  return `<g data-layer="neighborhood-lines" clip-path="url(#${idPrefix}-coast)">${items.map((n) => `<path data-neighborhood="${escape(n.name)}" d="${path(n.geometry)}" ${stroke(colors.neighborhood, 0.65)} stroke-dasharray="2 2"><title>${escape(n.name)}</title></path>`).join('')}</g>`;
-}
-export function districtLabels(districts, { project, colors }) {
-  // Primary badges first, then island badges, matching the original layer order.
-  const labels = [
-    ...districts.map((d) => ({ id: d.id, label: d.labelPoints[0] })),
-    ...districts.flatMap((d) => d.labelPoints.slice(1).map((label) => ({ id: d.id, label }))),
-  ];
-  return `<g data-layer="district-labels" font-family="system-ui,sans-serif" font-size="12" font-weight="600" text-anchor="middle" fill="${escape(colors.label)}">${labels
-    .map((d) => {
-      const [x, y] = project(d.label).map(number);
-      return `<g transform="translate(${x},${y})"><circle r="10" fill="#ffffff" fill-opacity=".9"/><text dy=".35em">${d.id}</text></g>`;
-    })
-    .join('')}</g>`;
-}
-export function landmarkLabels(items, { project, colors }) {
-  return `<g data-layer="landmark-labels" ${overlayLabel} fill="${escape(colors.landmark)}">${items
-    .map((item) => {
-      const [x, y] = project(item.label);
-      return `<text x="${number(x + item.offset[0])}" y="${number(y + item.offset[1])}" text-anchor="${escape(item.anchor)}" dominant-baseline="middle">${escape(item.name)}</text>`;
-    })
-    .join('')}</g>`;
-}
-export function bartStations(items, { project, colors }) {
-  return `<g data-layer="bart-stations">${items
-    .map((station) => {
-      const [x, y] = project(station.coordinates).map(number);
-      return `<g data-bart-station="${escape(station.id)}" transform="translate(${x},${y})"><title>${escape(station.name)} BART station</title><circle r="5" fill="#fff" stroke="${escape(colors.bart)}" stroke-width="2.5"/><circle r="1.5" fill="${escape(colors.bart)}"/><text x="10" y="4" ${overlayLabel} fill="${escape(colors.bart)}">${escape(station.name)}</text></g>`;
-    })
-    .join('')}</g>`;
-}
-export function markers(items, { project, colors }) {
-  return `<g data-layer="markers">${items
-    .map((marker) => {
-      const [x, y] = project([marker.lng, marker.lat]).map(number);
-      return `<circle data-marker-id="${escape(marker.id)}" cx="${x}" cy="${y}" r="${marker.selected ? 8 : 5}" fill="${escape(marker.color ?? (marker.selected ? colors.selected : colors.marker))}" stroke="#fff9e9" stroke-width="2" vector-effect="non-scaling-stroke"><title>${escape(marker.label ?? marker.id)}</title></circle>`;
-    })
-    .join('')}</g>`;
-}

package/src/overlays.js

@@ -1,18 +0,0 @@
-import parkData from '../data/landmarks.json' with { type: 'json' };
-import stationData from '../data/bart-stations.json' with { type: 'json' };
-import { deepFreeze } from './immutable.js';
-
-export const landmarks = deepFreeze(
-  parkData.features.map(({ id, properties, geometry }) => ({
-    id,
-    ...properties,
-    geometry,
-  })),
-);
-export const bartStations = deepFreeze(
-  stationData.features.map(({ id, properties, geometry }) => ({
-    id,
-    name: properties.name,
-    coordinates: geometry.coordinates,
-  })),
-);

package/src/svg.js

@@ -1,12 +0,0 @@
-export const escape = (value) =>
-  String(value)
-    .replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F\uFFFE\uFFFF]/g, '')
-    .replace(
-      /[&<>"']/g,
-      (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[char],
-    );
-export const number = (value) => Number(value.toFixed(2));
-export const stroke = (color, weight) =>
-  `fill="none" stroke="${escape(color)}" stroke-width="${weight}" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke"`;
-export const overlayLabel =
-  'font-family="system-ui,sans-serif" font-size="12" font-weight="600" stroke="#f8faf4" stroke-width="3" stroke-linejoin="round" paint-order="stroke"';