Skip to content

Add SF graph polygon layers to Mapbox map#1

Open
darithedev wants to merge 2 commits into
TaskarCenterAtUW:mainfrom
darithedev:feat/map-sf-graph-polygons
Open

Add SF graph polygon layers to Mapbox map#1
darithedev wants to merge 2 commits into
TaskarCenterAtUW:mainfrom
darithedev:feat/map-sf-graph-polygons

Conversation

@darithedev
Copy link
Copy Markdown

@darithedev darithedev commented May 22, 2026

This pull request introduces support for displaying and interacting with building entrances on the map, including visualizing entrance points, handling user selection, and showing detailed entrance metadata. It also adds a new utility module for parsing and normalizing entrance data and a JSON schema for entrance records. The changes improve the user experience by allowing users to select entrances directly from the map, see relevant metadata, and ensure consistent entrance data handling.

Map display and interaction enhancements:

  • Added new Mapbox sources and layers in App.jsx to visualize building polygons and entrances, including custom styling for entrance types and buildings. Entrances are loaded asynchronously from a GeoJSON file using the new loadEntrances utility.
  • Implemented click handling for entrance features, allowing users to set start/end points by clicking entrances on the map, and updated the logic to prevent duplicate search requests when selecting entrances. [1] [2] [3] [4] [5] [6]

Entrance data processing utilities:

  • Added entrances.js module with functions to parse OSM node IDs, normalize entrance features, generate human-readable descriptions, and load/convert entrance GeoJSON data for Mapbox.
  • Updated the geocoder input and forward lookup logic to restrict searches to the San Francisco area and the US, improving result relevance.

UI improvements for entrance metadata:

  • Enhanced the PointMeta component to display detailed entrance metadata (type, wheelchair access, door type, etc.) when an entrance is selected, instead of just coordinates.

Data validation:

  • Introduced a JSON schema (entrance.schema.json) to define and validate the structure of entrance records, ensuring data consistency.

How to Test

Prerequisites

  • Ensure the following GeoJSON file exists and is accessible before running the application:
    /data/ca.sanfrancisco.graph.polygons.geojson
    /data/sf.entrances.geojson

Test Steps

  1. Start the application locally.
  2. Open the map view in the browser.
  3. Verify that polygon data loads correctly from:
    /data/ca.sanfrancisco.graph.polygons.geojson
    /data/sf.entrances.geojson
  4. Confirm that:
    • Buildings are rendered with the expected fill color.
    • Non-building polygons (such as parks) display with a different fill color.
  5. Verify polygon outlines are visible and render correctly around each feature.
  6. Pan and zoom around the San Francisco map area to ensure polygons remain aligned and render without visual artifacts.
  7. Open browser developer tools and confirm there are no map layer or GeoJSON loading errors in the console.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant