Skip to content

Fixed leaflet map rendering as blank - #1827

Open
danielrafailov wants to merge 9 commits into
Courseography:masterfrom
danielrafailov:fix-leaflet-map-rendering
Open

danielrafailov wants to merge 9 commits into
Courseography:masterfrom
danielrafailov:fix-leaflet-map-rendering

Conversation

@danielrafailov

@danielrafailov danielrafailov commented Nov 6, 2026 •

Copy link
Copy Markdown
Contributor

Proposed Changes

This PR fixes the Leaflet campus map not rendering in the timetable map modal and improves the "Zoom to Fit" functionality.

Problems solved:

  1. Map rendering blank: The Leaflet map container had no explicit height, causing it to render at 0px. Leaflet requires a parent container with defined dimensions to properly calculate and display map tiles.
  2. UI overlap: The "Zoom to Fit" button was vertically overlapping with the map sidebar day items.
  3. Non-functional button: The "Zoom to Fit" button did nothing when only one building marker was present, leaving users unable to reset their view after zooming.

Changes:

  • Added height: 500px to #campus-map container
  • Added margin-top: 3.75rem to #map-sidebar for proper spacing
  • Enhanced zoomToFit() to reset to default zoom level 16 when markerCount === 1

Before

Click to expand Before screenshot Screenshot 2026-11-05 at 8 54 23 PM

After

Click to expand After screenshots Screenshot 2026-11-05 at 8 54 47 PM Screenshot 2026-11-05 at 8 54 54 PM

Type of Change

Type Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue) X
🎨 User interface change (change to user interface; provide screenshots) X
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📦 Dependency update (change that updates a dependency)
🔧 Internal (change that only affects developers or continuous integration)

Checklist

Before opening your pull request:

  • I have performed a self-review of my changes.
    • Check that all changed files included in this pull request are intentional changes.
    • Check that all changes are relevant to the purpose of this pull request, as described above.
  • I have added tests for my changes, if applicable.
    • This is required for all bug fixes and new features.
  • I have updated the project documentation, if applicable.
    • This is required for new features.
  • If this is my first contribution, I have added myself to the list of contributors.
  • I have updated the project Changelog (this is required for all changes).

After opening your pull request:

  • I have verified that the CI checks have passed.
  • I have reviewed the test coverage changes reported by Coveralls.
  • I have requested a review from a project maintainer.

@coveralls

coveralls commented Nov 6, 2026 •

Copy link
Copy Markdown

Coverage Report for CI Build 42263436570

Coverage increased (+0.8%) to 61.567%

Details

  • Coverage increased (+0.8%) from the base build.
  • Patch coverage: 4 uncovered changes across 1 file (0 of 4 lines covered, 0.0%).
  • 2 coverage regressions across 1 file.

Uncovered Changes

File Changed Covered %
js/components/common/CampusMap.tsx 4 0 0.0%

Coverage Regressions

2 previously-covered lines in 1 file lost coverage.

File Lines Losing Coverage Coverage
js/components/common/CampusMap.tsx 2 65.52%

Coverage Stats

Coverage Status
Relevant Lines: 4298
Covered Lines: 2697
Line Coverage: 62.75%
Relevant Branches: 1010
Covered Branches: 571
Branch Coverage: 56.53%
Branches in Coverage %: Yes
Coverage Strength: 158.3 hits per line

💛 - Coveralls

@danielrafailov
danielrafailov force-pushed the fix-leaflet-map-rendering branch from 0aa9c48 to c600906 Compare November 6, 2026 15:09
Comment thread style/app.scss Outdated
#map-sidebar {
overflow-y: auto;
padding: 0;
margin-top: 3.75rem;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

all CSS rules within a block should appear in alphabetical order

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.

3 participants