{"id":"vue3-layerboard-vee","title":"PlowPHL layers get fuzzy when zooming in - missing scale-based layer switching","description":"## Problem\nIn the streetsmartphl example, PlowPHL layers (Treated Street Status, etc.) look correct when zoomed out, but when zooming in the layer becomes fuzzy/pixelated. The graphics don't re-render at higher resolution - they just scale up the low-zoom tiles.\n\n## Root Cause\nThe vue3-layerboard implementation only uses tiled MapServer endpoints at all zoom levels. The legacy StreetSmartPHL app has a two-layer approach that switches between:\n- **zoomOut** (`tiled: true`): MapServer `/tile/` endpoint - fast, pre-cached tiles\n- **zoomIn** (`tiled: false`): Dynamic WebMap layers fetched from ArcGIS with full resolution\n\nThe legacy app gets `minScale`/`maxScale` from the ArcGIS REST API for each layer, watches the current map scale, and automatically swaps between the tiled and dynamic versions based on zoom level.\n\n## Affected Layers\nAll PlowPHL tiled layers in `examples/streetsmartphl/src/App.vue` (lines 193-224):\n- plowTreatedStreetsStatus\n- plowNotTreatedStreets \n- plowConditional\n- plowHighways\n\nURLs: `https://streetsgis.phila.gov/arcgis/rest/services/PlowPHL/{service}/MapServer`\n\n## Fix Required\nImplement the same two-layer approach with scale-based switching that the legacy app has:\n\n1. For each PlowPHL layer, define two versions:\n - zoomOut: current tiled MapServer approach\n - zoomIn: dynamic WebMap layer (need to find/add these to a WebMap or use /export/ endpoint)\n\n2. Fetch layer definitions with minScale/maxScale from ArcGIS REST API\n\n3. Watch map scale changes and toggle between the two layer versions based on the scale thresholds\n\n## Reference\nLegacy implementation in StreetSmartPHL:\n- `src/topics/plow.js` - topic-tiled-layers config with zoomIn/zoomOut pairs\n- `src/components/TopicTiledLayers.vue` - handles the switching logic\n- `src/components/Checkbox.vue` - shouldBeDisabled() checks minScale/maxScale\n\n## Testing Notes\nRequires an active snow event to test. May need to mock the storms API response to simulate a deployment.","notes":"**Mock in place for testing:** Line 530 in `examples/streetsmartphl/src/App.vue` has been changed to default to 'Full Deployment' when no storm data exists. This allows testing PlowPHL layers without an active snow event. Revert this line before committing any fix:\n```typescript\n// Current (mocked):\nreturn stormsData?.Deployment || 'Full Deployment' // MOCK: remove before committing\n\n// Original:\nreturn stormsData?.Deployment || ''\n```\n## Implementation Complete (2026-01-29)\n\nScale-based layer switching implemented on branch `wip/plowphl-zoom-fix`:\n- Layers with `scaleBasedRendering: true` fetch MapServer metadata for scale thresholds\n- Zoomed out: uses /tile/ endpoint (fast, cached)\n- Zoomed in: uses /export/ endpoint (dynamic, sharp)\n\n**Testing limitation:** Can't fully verify without active snow event. Export requests return 200 OK but images are empty (no current data on server). Mock removed - awaiting next snow event to verify.","status":"open","priority":2,"issue_type":"bug","owner":"rothwell.andy@gmail.com","created_at":"2026-01-29T12:57:20.0734585-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-01-29T14:02:39.6851907-05:00"}
0 commit comments