@kahwee/sf-map-svg 0.3.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 1.0.0
+
+- Publish the stable 1.0 API with public npm access and a public source repository.
+- Add the reusable interactive map entrypoint, controlled viewport and selection APIs, keyboard/touch navigation, and marker selection.
+- Add interactive examples, Storybook stories, and viewport/navigation regression checks.
+
+- Add district/neighborhood explorer modes and a labels toggle, with fixed screen-size labels while zooming.
+- Add a master visible-label switch for standalone SVGs.
+
+- Add nine optional key-road landmarks from DataSF centerlines, public JSON, and zoom-aware explorer labels.
+
+- Add a transit-inspired map theme with pale water, quiet land, green parks, and blue station symbols.
+- Refine the neighborhood explorer presentation and map legend.
+- Add a transit example and Storybook preset.
+
+## 0.4.1
+
+- Migrate library source to strict TypeScript 7 with generated JavaScript and declarations.
+- Replace Prettier with Biome formatting, import organization, and recommended lint rules.
+
+## 0.4.0
+
+- Add a browser neighborhood explorer with alias search, selection, boundary zoom, and GeoJSON downloads.
+- Adapt explorer labels to zoom and viewport size while preserving static SVG defaults.
+- License software under MIT and add npm release automation and packaged-consumer checks.
+
 ## 0.3.0
 
 - Enable public npm distribution with explicit public registry access.

package/LICENSE

@@ -1,5 +1,24 @@
-Copyright (c) 2026 KahWee Teng. All rights reserved.
+MIT License
 
-Public availability does not grant a license to redistribute or modify the software.
-The geographic data comes from DataSF and remains subject to its source terms;
-see SOURCES.md. Those third-party terms are not replaced by this notice.
+Copyright (c) 2026 KahWee Teng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Geographic data retains its source terms and attribution requirements;
+see SOURCES.md. This software license does not replace those terms.

package/README.md

@@ -2,7 +2,7 @@
 
 ![District fills, optional neighborhood boundaries, and plain outlines](docs/map-preview.png)
 
-Private package extracted from KahWee’s **San Francisco District Map** Site. Draws a self-contained SVG with bundled geometry and no runtime dependencies, tiles, WebGL, or network requests.
+An MIT-licensed package extracted from KahWee’s **San Francisco District Map** Site. Draws a self-contained SVG with bundled geometry and no runtime dependencies, tiles, WebGL, or network requests.
 
 ```js
 import { renderSFMap, createSFMap } from '@kahwee/sf-map-svg';
@@ -27,7 +27,9 @@ Write `svg` to a `.svg` file or embed it in your page. For Astro, render it with
 | `year`              | `2022`              | District boundaries: `2002`, `2012`, or `2022`                                                                             |
 | `districtLines`     | `true`              | Supervisorial district outlines                                                                                            |
 | `neighborhoodLines` | `false`             | Dashed SFAR realtor neighborhood outlines                                                                                  |
+| `theme` | `'districts'` | Use `'transit'` for pale blue water, ivory land, green parks, and blue BART symbols; custom `colors` still take precedence |
 | `districtFills`     | `true`              | Original Site’s eleven muted district colors                                                                               |
+| `labels` | `true` | Master switch for visible map text; symbols and accessible titles remain |
 | `districtLabels`    | `true`              | District number badges                                                                                                     |
 | `highways`          | `false`             | Original Site’s highway geometry                                                                                           |
 | `landmarks`         | `false`             | Golden Gate Park, Presidio, Lincoln Park, Twin Peaks, Dolores Park, and McLaren Park                                       |
@@ -35,7 +37,8 @@ Write `svg` to a `.svg` file or embed it in your page. For Astro, render it with
 | `width`, `height`   | `800`, `800`        | SVG viewBox and intrinsic size                                                                                             |
 | `padding`           | `28`                | Space around the coast                                                                                                     |
 | `markers`           | `[]`                | Points with `id`, `lng`, `lat`, optional `label`, `color`, `selected`                                                      |
-| `colors`            | Built-in palette    | Override `water`, `land`, `district`, `neighborhood`, `highway`, `park`, `landmark`, `bart`, `label`, `marker`, `selected` |
+| `keyRoads` | `false` | Nine selected road corridors and names for orientation |
+| `colors`            | Built-in palette    | Override `water`, `land`, `district`, `neighborhood`, `highway`, `road`, `park`, `landmark`, `bart`, `label`, `marker`, `selected` |
 | `title`             | `San Francisco map` | Accessible SVG title                                                                                                       |
 | `idPrefix`          | Unique per process  | Set explicitly for deterministic output or independent server renders                                                      |
 
@@ -63,6 +66,8 @@ Open `examples/generated/index.html` to compare district and neighborhood maps.
 
 The package uses a small Mercator SVG renderer while retaining the Site’s boundary geometry, coastline, palette, district labels, and highway data.
 
+The `theme: 'transit'` preset borrows the clear visual hierarchy of [BART’s system map](https://www.bart.gov/system-map), retaining geographic positions. It uses a quiet, single-color land fill instead of district colors. The neighborhood explorer uses this preset.
+
 Enable `landmarks`, `bartStations`, and `highways` together for the featured example. Park fills use `colors.park`, park labels use `colors.landmark`, and station rings and labels use `colors.bart`. These current geographic overlays are independent of the district year; BART stations are city-only (Daly City is outside the map). Station positions are geographic points, not a route diagram.
 
 ## Examples
@@ -131,3 +136,209 @@ const matchingDefinitions = searchNeighborhoods('mission');
 ```
 
 These are 250 **source-specific definitions**, not 250 distinct neighborhoods. Canonical names are package display names, and boundaries reflect each documented source rather than a claimed universal consensus. Mission and Outer Mission remain distinct. JSON files are the source of truth used by the renderer; the default map and lookup use the 92 SFAR realtor neighborhoods. See [the data API guide](data/README.md) for all filenames, schema, lookup rules, source comparisons, and custom SVG overlays. Storybook provides downloadable JSON files beside its neighborhood examples.
+
+## Interactive neighborhood explorer
+
+The browser explorer includes canonical-name and alias search, source selection, neighborhood outlines, zoom controls, and GeoJSON downloads. SFAR realtor definitions are selected by default; SF Find and analysis neighborhoods remain separate choices.
+
+```js
+import { createNeighborhoodExplorer } from '@kahwee/sf-map-svg/explorer';
+
+const explorer = createNeighborhoodExplorer({ source: 'realtor' });
+document.querySelector('#map').append(explorer);
+explorer.selectNeighborhood('NoPa');
+
+// Before removing the component, release its observers and event listeners.
+// explorer.destroy();
+```
+
+Call this browser-only factory after a DOM is available. Importing it does not mount anything. Options include `source`, an optional initial `neighborhood` name or alias, and district `year`. The returned element also exposes `setSource(source)`, `zoomBy(factor)`, and `resetView()`.
+
+Selected downloads are one-feature GeoJSON FeatureCollections retaining source attribution and boundary-processing metadata.
+
+At city scale, labels stay sparse. Zooming reveals neighborhood and BART names, with label sizing and collision checks based on the visible viewport. Station points remain visible. The static `renderSFMap` API keeps its existing labels and defaults.
+
+Run `pnpm demo`, serve the repository root over HTTP, and open `examples/generated/explorer.html`. Storybook includes city, selected neighborhood, alternative-source, and mobile examples.
+
+## License
+
+Software is licensed under MIT. Geographic datasets retain their source terms and attribution requirements; see [SOURCES.md](SOURCES.md).
+
+
+## TypeScript development
+
+The library is authored in strict TypeScript 7. Run `pnpm build` to compile JavaScript and declarations into `dist/`. JavaScript consumers require no TypeScript runtime. `pnpm format` applies Biome formatting and safe lint fixes; `pnpm check` checks Biome, data, source and consumer types, and tests.
+
+Enable `keyRoads: true` for Market, Mission, Geary, Van Ness, 19th Avenue, Sunset, The Embarcadero, Columbus, and Divisadero. These use active DataSF centerlines, not invented routes. The explorer reveals road names as you zoom. Import `keyRoads` from the data entry point or `data/key-roads.json` for geometry, source segment IDs, and label anchors.
+
+### Map modes and labels
+
+The interactive explorer includes a map-mode selector and a Labels toggle. `mode: 'districts'` shows numbered supervisorial districts; `mode: 'neighborhoods'` shows names from the selected neighborhood source (SFAR realtor by default). Labels are collision-filtered and remain about 12 screen pixels through map zoom and resize; more names fit as you zoom in. Road labels use 11 pixels.
+
+```js
+const explorer = createNeighborhoodExplorer({ mode: 'districts', labels: true });
+explorer.setLabels(false);
+explorer.setMode('neighborhoods');
+explorer.setLabels(true);
+```
+
+`renderSFMap({ labels: false })` also hides all visible text while retaining station symbols and accessible titles. Standalone SVGs are static images; the interactive explorer provides the constant-size labels during map zoom.
+
+## Reusable interactive map
+
+The new `@kahwee/sf-map-svg/interactive` entry point provides a map, accessible controls, and
+attribution without the explorer's search sidebar or detail panel. It does not change URLs,
+load articles, apply editorial filters, or navigate. Importing the static entry point does not
+import this interactive runtime. Both paths retain zero runtime dependencies.
+
+```js
+import { createInteractiveSFMap } from '@kahwee/sf-map-svg/interactive';
+
+const map = createInteractiveSFMap({
+  mode: 'neighborhoods',
+  source: 'analysis', // 'sf-find' and 'realtor' are also available
+  theme: 'transit',
+  labelSize: { min: 12, max: 15 },
+  layers: { districtFills: false, districtLines: false, districtLabels: false },
+});
+document.querySelector('#map').append(map);
+map.addEventListener('neighborhoodchange', ({ detail }) => {
+  // On clear: id, name, and feature are null. source always identifies the dataset.
+  console.log(detail.id, detail.name, detail.source);
+});
+map.selectNeighborhood('Mission', { fit: false });
+const selection = map.getSelection(); // { id, name, source, feature } or null
+map.selectNeighborhood(null);
+```
+
+`createInteractiveSFMap()` defaults to `mode: 'basemap'`: no district or neighborhood layers.
+Parks, roads, and stations are initially enabled and can be disabled independently. The existing
+`createNeighborhoodExplorer()` and static APIs retain their realtor/district defaults. The
+source option only chooses a definition collection; it does not make that collection visible
+in basemap mode. Editorial groupings belong to the consumer and are never treated as geographic
+aliases. Import types including `InteractiveSFMapOptions`, `InteractiveSFMapElement`,
+`MapViewport`, `MapPadding`, and `NeighborhoodSelection` from the interactive entry point.
+
+| Option | Default | Behavior |
+| --- | --- | --- |
+| `mode` | `basemap` (interactive), `neighborhoods` (explorer) | `basemap`, `districts`, or `neighborhoods`; establishes layer defaults |
+| `source` | `realtor` | `realtor`, `sf-find`, or `analysis`; explicit source recommended for reusable integrations |
+| `theme` | `transit` | `transit` or `districts` |
+| `year` | `2022` | District vintage: 2002, 2012, or 2022 |
+| `layers` | Mode defaults | Independent booleans: `districtFills`, `districtLines`, `districtLabels`, `neighborhoodLines`, `neighborhoodLabels`, `landmarks`, `bartStations`, `highways`, `keyRoads` |
+| `labels` | `true` | Master visible-text switch; accessible descriptions and station symbols remain |
+| `labelSize` | `{ min: 11, max: 12 }` | Screen-pixel range, 8–32 allowed. Nominal sizes are 11 for roads and 12 otherwise, clamped to this range; sizes never grow with zoom |
+| `selectableNeighborhoods` | `true` | Enables pointer/keyboard selection; false retains geography and labels |
+| `neighborhood` | Unset | Initial name, alias, or ID in the selected source |
+| `fitPadding` | `24` | Screen pixels, number or `{ top, right, bottom, left }`, used by selection and geometry fitting after mounting |
+| `markers` | `[]` | Supplied `MapMarker` records with unique, nonempty IDs; no content fetching |
+| `markerRadius` / `markerHitSize` | `6` / `44` | Screen-pixel visible radius and tap-target diameter, independent of zoom; selected radius grows by 2px |
+| `markerColor` / `selectedMarkerColor` | `#245b61` / `#f04f32` | Default marker colors; individual `marker.color` overrides the unselected color |
+| `onMarkerActivate` | Unset | Called when a non-null marker selection changes, including programmatic changes |
+
+Explicit layer options override mode defaults even after `setMode()`. District fills, outlines,
+and badges can therefore be composed with neighborhood names without requiring district
+labels. Descriptions identify only displayed boundary layers, their source and available
+vintage; analysis data is described as census-tract-based reporting areas, without inventing a
+boundary year. The downloadable source metadata remains available in the full explorer.
+
+Labels use measured screen-space collision boxes. Selected marker and neighborhood names
+come first, then district labels, stations, parks, roads, and neighborhoods in descending area
+order with stable ID tie-breaking. Station and marker symbols reserve space. Roads and station
+names appear at 1.8× zoom; city view keeps park labels sparse. Labels outside the viewport or
+without room are suppressed, including a selected label too wide to fit. Selection names remain
+available in the native chooser and through events. The label range is separate from SVG user
+units used by the static renderer.
+
+### Viewport and controlled selection
+
+```js
+const saved = map.getViewport(); // copied [x, y, size] in the 800×800 projected map
+map.zoomBy(2);
+map.panBy(30, 0); // move view east by 30 screen pixels
+map.setViewport(saved);
+map.resetView();
+map.fitGeometry({
+  type: 'MultiPoint',
+  coordinates: places.map(({ lng, lat }) => [lng, lat]),
+}, { top: 24, right: 24, bottom: 80, left: 24 });
+map.addEventListener('viewportchange', ({ detail }) => saveInYourState(detail.viewport));
+```
+
+Call `fitGeometry` after mounting in a visible container. It accepts WGS84 GeoJSON geometry,
+including `Point`, `MultiPoint`, and `GeometryCollection`, and rejects empty geometry or
+impossible padding. Views are constrained to the city extent and 1–12× zoom. Consequently,
+padding is best-effort near city edges or for extents larger than the map; a single point fits
+at maximum zoom. This is an SF map, not a world map. Resizing keeps the projected view and
+recomputes screen sizes; call `fitGeometry` again if a new container size needs different fitting.
+Initial neighborhood fitting before mounting uses the explorer's proportional padding.
+
+`selectNeighborhood(nameOrIdOrNull, { fit: false })` and `selectMarker(idOrNull, { fit: false })`
+allow external state to drive selection without moving the viewport. They return false for
+unknown identities. `getSelection()` and `getSelectedMarker()` read current selection.
+`setSource(source)` clears neighborhood selection and resets the view, emitting a clear event
+when needed. `setMode(mode)` resets the viewport. Repeating the same viewport or selection
+emits no change event, avoiding state feedback loops. All events bubble. Call `destroy()`
+before removing the element to release listeners, observers, frames, and download URLs.
+
+### Dense markers
+
+```js
+const map = createInteractiveSFMap({ markers: places });
+document.querySelector('#map').append(map);
+map.addEventListener('markerchange', ({ detail }) => {
+  // { id, marker }, both null when cleared. Render your own content panel here.
+  renderSelection(detail.marker);
+});
+map.setMarkers(updatedPlaces);
+map.selectMarker('place-id');
+```
+
+Every supplied marker remains in the native chooser, even when positions coincide or markers
+are outside the current view. Pointer and keyboard activation select and fit a marker; markers
+also have individual keyboard stops. This is the accessible-choice alternative to clustering:
+no counts are estimated and no supplied markers are silently dropped. The chooser count is
+the supplied collection size. Replacing markers retains the selected ID when present, otherwise
+uses an explicitly selected marker or clears selection. Large hit targets can overlap; use the
+chooser to reach obscured markers. Automated clustering is not included in this release.
+
+### Gesture policy and keyboard access
+
+- **Default touch:** one finger scrolls the page; pinch zooms the browser. Map buttons and
+  native choosers work without engaging map gestures.
+- **Touch navigation:** explicitly enable the visible button (or `setTouchNavigation(true)`).
+  One finger pans the map; two fingers pan and pinch around their midpoint. The button becomes
+  **Done: page scrolling**. Use it or Escape to return to page gestures. The page remains
+  scrollable outside the canvas, and Tab can leave it. Changing mode during an active gesture
+  takes effect after fingers are lifted.
+- **Mouse:** drag pans; Ctrl/⌘ + wheel zooms. Ordinary wheel scrolling remains page scrolling.
+- **Keyboard:** focus the map, then arrows pan, +/− zoom, Home resets, and Escape exits touch
+  navigation. Tab reaches controls, the neighborhood chooser, one neighborhood path, and markers.
+  On a neighborhood path, `[` / `]` moves through source features and Enter/Space selects.
+  The native chooser is also available for areas outside the current view.
+- Pointer cancellation, loss of capture, window blur, and resizing cancel active gestures.
+  There is no animated camera or inertia. Button transitions are disabled with reduced motion.
+
+### Examples and verification
+
+Run `pnpm demo` and serve the repository root. `examples/generated/index.html` covers static
+maps, `explorer.html` covers the full explorer, and `interactive.html` covers independently
+controlled neighborhood selection, 36 overlapping sample markers, and fit/save/restore hooks.
+Storybook **Maps / Reusable interactive map** includes both themes, selectable neighborhoods,
+independent layers, dense markers, and a 390px example.
+
+With that server running, the browser regression checks can be run through the installed CLI:
+
+```sh
+agent-browser skills get core --full
+agent-browser --session sf-map-check open http://127.0.0.1:8765/examples/generated/interactive.html
+agent-browser --session sf-map-check eval "import('/scripts/check-interactive-browser.mjs').then(m => m.checkInteractiveBrowser())"
+agent-browser --session sf-map-check close
+```
+
+These checks cover actual browser layout, both themes, narrow/wide containers, label collisions,
+zoom extremes, keyboard selection, cancellation logic, viewport state, marker reachability, and
+teardown. Physical iOS Safari and Android Chrome verification remains required before a release:
+check page scroll and browser pinch in default mode; map pan and pinch in engaged mode; lift one
+finger; interrupt/cancel; rotate; use Done; verify scrolling resumes. Desktop automation and
+synthetic pointer tests do not establish physical-device compatibility.

package/SOURCES.md

@@ -75,3 +75,7 @@ No survey of resident consensus is claimed. Composite areas are not converted to
 On September 25, 2026, pairwise polygon intersection checks found 64 overlapping pairs in the original 92-area realtor dataset. These were boundary slivers totaling approximately 1.05 square meters (local planar estimate). `pnpm data:normalize-realtor` removes shared interior area by assigning it to the lexicographically first stable neighborhood ID and subtracting it from the other feature. This is a deterministic geometric tie-break for source slivers, not a new claim about legal boundaries.
 
 The cleanup retains all 92 identities, names, and source codes. It uses no rounding or buffers, recalculates affected bounding boxes, and verifies that the union of all neighborhood areas is unchanged. Shared edges and vertices remain valid. `data/neighborhoods-realtor.json` records the transformation in `topology`; its polygons are normalized derivatives of the cited source. Regression tests require empty pairwise polygon intersections, non-overlapping component polygons, the original union digest, and an idempotent cleanup. Polygon clipping is a development dependency only; rendering remains dependency-free.
+
+## Key road landmarks
+
+Downloaded September 26, 2026 (UTC; September 25 in San Francisco) from [DataSF Streets – Active and Retired](https://data.sf.gov/resource/3psu-pn9h.geojson), filtering `active = true` and exact source street names. `data/key-roads.json` groups 724 source segments into nine named corridors, preserving every source coordinate and CNN segment ID. Geary St and Geary Blvd are grouped under the Geary Blvd display label. These are geographic orientation features, not a complete network or vehicle-access guidance. Label anchors select existing source vertices near editorial targets. Regenerate with `node scripts/import-key-roads.mjs` then `pnpm data:catalog`. The full query and retrieval date are embedded in the JSON. DataSF terms apply.

package/{data → dist/data}/README.md

@@ -16,6 +16,7 @@ The renderer, `neighborhoods` convenience export, and `getNeighborhood` default
 | `neighborhoods-realtor.json`  | All 92 SFAR areas in the August 2010 dataset                        |
 | `coast.json`                  | The renderer's common display coastline                             |
 | `highways.json`               | The original map's highway geometry                                 |
+| `key-roads.json` | Nine selected road corridors with source segment IDs and label anchors |
 | `landmarks.json`              | Six selected park/landmark property areas                           |
 | `bart-stations.json`          | Eight San Francisco station points                                  |
 | `catalog.json`                | Dataset index and searchable neighborhood metadata without geometry |

package/dist/data/bart-stations.json

@@ -0,0 +1,134 @@
+{
+    "type": "FeatureCollection",
+    "schemaVersion": 1,
+    "id": "bart-stations",
+    "title": "San Francisco BART stations",
+    "coordinateSystem": "WGS84 longitude, latitude (EPSG:4326)",
+    "definition": {
+        "kind": "station-centroids",
+        "description": "Eight station centroids within San Francisco. Entrances, tracks, and other cities are excluded."
+    },
+    "sources": [
+        {
+            "id": "bart-stations",
+            "title": "BART official geospatial data",
+            "url": "https://www.bart.gov/sites/default/files/2025-12/BART-Stations-tracks-entrances-121025.kmz_.zip",
+            "retrievedAt": "2026-09-25",
+            "licenseUrl": "https://www.bart.gov/schedules/developers/geo"
+        }
+    ],
+    "features": [
+        {
+            "type": "Feature",
+            "id": "embarcadero",
+            "bbox": [
+                -122.3969009943399,
+                37.79285391372556,
+                -122.3969009943399,
+                37.79285391372556
+            ],
+            "properties": {
+                "name": "Embarcadero"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.3969009943399, 37.79285391372556] }
+        },
+        {
+            "type": "Feature",
+            "id": "montgomery-st",
+            "bbox": [
+                -122.4011747105981,
+                37.78944952039284,
+                -122.4011747105981,
+                37.78944952039284
+            ],
+            "properties": {
+                "name": "Montgomery St"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4011747105981, 37.78944952039284] }
+        },
+        {
+            "type": "Feature",
+            "id": "powell-st",
+            "bbox": [
+                -122.4070176588271,
+                37.78487089662774,
+                -122.4070176588271,
+                37.78487089662774
+            ],
+            "properties": {
+                "name": "Powell St"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4070176588271, 37.78487089662774] }
+        },
+        {
+            "type": "Feature",
+            "id": "civic-center-un-plaza",
+            "bbox": [
+                -122.4139364152156,
+                37.77939386076284,
+                -122.4139364152156,
+                37.77939386076284
+            ],
+            "properties": {
+                "name": "Civic Center/UN Plaza"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4139364152156, 37.77939386076284] }
+        },
+        {
+            "type": "Feature",
+            "id": "16th-st-mission",
+            "bbox": [
+                -122.4197081435103,
+                37.76505423932072,
+                -122.4197081435103,
+                37.76505423932072
+            ],
+            "properties": {
+                "name": "16th St/Mission"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4197081435103, 37.76505423932072] }
+        },
+        {
+            "type": "Feature",
+            "id": "24th-st-mission",
+            "bbox": [
+                -122.4184678760468,
+                37.75223145165559,
+                -122.4184678760468,
+                37.75223145165559
+            ],
+            "properties": {
+                "name": "24th St/Mission"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4184678760468, 37.75223145165559] }
+        },
+        {
+            "type": "Feature",
+            "id": "glen-park",
+            "bbox": [
+                -122.4337900883829,
+                37.73311239451952,
+                -122.4337900883829,
+                37.73311239451952
+            ],
+            "properties": {
+                "name": "Glen Park"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4337900883829, 37.73311239451952] }
+        },
+        {
+            "type": "Feature",
+            "id": "balboa-park",
+            "bbox": [
+                -122.4475873574919,
+                37.72135058802738,
+                -122.4475873574919,
+                37.72135058802738
+            ],
+            "properties": {
+                "name": "Balboa Park"
+            },
+            "geometry": { "type": "Point", "coordinates": [-122.4475873574919, 37.72135058802738] }
+        }
+    ]
+}