[{"data":1,"prerenderedAt":489},["ShallowReactive",2],{"navigation":3,"project-map":34,"projects-nav":435},[4],{"title":5,"path":6,"stem":7,"children":8,"page":33},"Blog","/blog","blog",[9,13,17,21,25,29],{"title":10,"path":11,"stem":12},"Smart City Governance： PFI Digital Transformation in Taoyuan","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"Spatial Data Integration： Disclosing 202 Unregistered High-Risk Segments","/blog/map","blog/map",{"title":22,"path":23,"stem":24},"Performance Diagnostics： Cross-Layer Optimization of Web DRM Reader","/blog/notex-performance-optimization","blog/notex-performance-optimization",{"title":26,"path":27,"stem":28},"The Psychology of Color in UI Design","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":30,"path":31,"stem":32},"The Case for Slow Design in a Fast-Paced Digital World","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":35,"title":18,"author":36,"body":40,"date":427,"description":419,"extension":428,"image":429,"meta":430,"minRead":431,"navigation":432,"path":19,"seo":433,"stem":20,"__hash__":434},"blog/blog/map.md",{"name":37,"avatar":38},"Emma Thompson",{"src":39,"alt":37},"https://images.unsplash.com/photo-1701615004837-40d8573b6652?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",{"type":41,"value":42,"toc":418},"minimark",[43,48,52,55,77,81,119,123,155,168,172,219,227,258,265,269,388,392],[44,45,47],"h2",{"id":46},"background","Background",[49,50,51],"p",{},"Taipei's disaster response decision-making has long been constrained by a \"data gap\": the 1,470 narrow alleys registered in urban planning records and the 274 entries in the fire department's field survey have never been cross-referenced.",[49,53,54],{},"The fire department currently publishes two related inventories, last updated in May and October 2024 respectively—neither on a regular annual cycle. The only existing visualization is a citizen-made Google My Maps from 2014, with data frozen since 2016. For a decade, the city has lacked any tool to answer: where are the narrow alleys, how high is the risk, and does the planning reflect reality?",[49,56,57,58,62,63,66,67,70,71,66,73,76],{},"· ",[59,60,61],"strong",{},"Market Pain Point",": Existing tools cannot quantify the gap between planning records and fire department practice, leaving disaster resource allocation without a precise basis.",[64,65],"br",{},"\n· ",[59,68,69],{},"Core Thesis",": Urban planning geodata should not be a static document—it should be a verifiable spatial hypothesis.",[64,72],{},[59,74,75],{},"Technical Goal",": Validate the feasibility of a Laravel + PostGIS architecture in Taiwan's public-sector GIS environment, and test the integration viability of migrating from Google Maps commercial APIs to an open-source map infrastructure based on GeoServer.",[44,78,80],{"id":79},"challenges","Challenges",[82,83,84,94,111],"ol",{},[85,86,87,90,91,93],"li",{},[59,88,89],{},"Data Reality and the Cascading Problem of Missing Geometry"," ",[64,92],{},"\nThe original plan was to compare planned road widths against field-measured widths. However, Taipei's publicly available field measurement data only covers segments wider than 8 meters and is in Polygon format—field-measured line segments for narrow alleys simply do not exist in public channels. The fire department's 274 entries include field-measured widths, but only as Chinese-language addresses with no coordinates or line geometry. Without source geometry, spatial comparison of length, density, and positional reliability cannot be established.",[85,95,96,90,99,101,102,104,105,107,108,110],{},[59,97,98],{},"Semantic Gap in Spatial Definitions Across Regulatory Domains",[64,100],{},"\n• Conflicting Definitions",[64,103],{},"Urban planning thresholds are set by building codes \u003C3.5m, while fire safety records are based on operational realities \u003C4m \"Red Zones\".",[64,106],{},"\n• Data Integrity",[64,109],{},"As standards for \"narrow alleys\" differ across agencies, the challenge lies in representing these discrepancies authentically without forcing a unified value, thereby avoiding data distortion.",[85,112,113,90,116,118],{},[59,114,115],{},"Boundary Definition and Trade-offs in Independent Research",[64,117],{},"\nWithout a specification document, I had to independently prioritize features across technical depth, social value, and development cost. Any imbalance risked drifting the system away from its core purpose as a decision-support tool.",[44,120,122],{"id":121},"actions","Actions",[82,124,125,133,141],{},[85,126,127,90,130,132],{},[59,128,129],{},"Spatial Reconstruction Strategy",[64,131],{},"\nTo address missing geometry in the inventory, I built a proxy mechanism of \"borrowing existing geometry and annotating credibility boundaries.\" The automated snapping pipeline runs only once at data import: Geocoding to point → TWD97 projection → ST_ClosestPoint snapping to planned road segments—ensuring the live system does not depend on external services.",[85,134,135,90,138,140],{},[59,136,137],{},"Coexistence Rendering Strategy",[64,139],{},"\nInstead of forcing a unified logic, the system utilizes \"dual-rendering\" on the same segment to present both planned and measured values simultaneously. Risk levels strictly adhere to statutory codes, while fire records are displayed in their original classifications without secondary interpretation—the transparency of this \"Architectural Honesty\" serves as the core foundation of the system’s credibility.",[85,142,143,90,146,148,149,151,152,154],{},[59,144,145],{},"Layered Architecture Constraint",[64,147],{},"\n• Backend (Laravel + PostGIS): Encapsulated core business logic and spatial computations to ensure data integrity.",[64,150],{},"\n• Geospatial Engine (GeoServer): Offloaded SLD rendering logic and integrated self-hosted OSM basemaps for full technical autonomy.",[64,153],{},"\n• Frontend (React + OpenLayers): Focused on state management and user interaction, leveraging OpenLayers for multi-source layer orchestration.",[156,157,160,161],"div",{"className":158},[159],"my-8","\n  ",[162,163],"img",{"src":164,"alt":145,"className":165},"/project/map_A_02.jpg",[166,167],"rounded-lg","w-full",[44,169,171],{"id":170},"execution","Execution",[82,173,174],{},[85,175,176,90,179,181,182,184,186,187,189,190,194,195,194,198,201,202,204,205,207,208,210,211,213,214,218],{},[59,177,178],{},"Case A｜Data Transformation: From Heterogeneous Addresses to Spatial Risk",[64,180],{},"\nFacing 274 fire department entries with only text descriptions, I had to reconstruct spatial relationships without source geometry. Despite complete inventory structure, the address semantics were highly heterogeneous.",[64,183],{},[64,185],{},"1. Technical Breakthrough",[64,188],{},"Validated Google Geocoding's ability to parse ambiguous semantics, and implemented an automated pipeline: ",[191,192,193],"span",{},"Geocoding"," → ",[191,196,197],{},"TWD97 Projection",[191,199,200],{},"ST_ClosestPoint Spatial Snapping",".\n",[64,203],{},"2. Making Uncertainty Explicit",[64,206],{},"Rather than filtering out uncertain data, the system explicitly annotates \"distance offset\" and \"width offset\" warnings in popups (e.g., ❗ High Offset), turning technical limitations into credibility boundaries that decision-makers can evaluate.\n",[64,209],{},"3. Data Discovery and Output",[64,212],{},"By deduplicating via ",[215,216,217],"code",{},"matched_road_id",", successfully identified 202 risk segments that the fire department had field-surveyed but urban planning had never registered—completing Taipei's first integrated narrow-alley spatial profile.",[156,220,160,222],{"className":221},[159],[162,223],{"src":224,"alt":225,"className":226},"/project/map_A_04.jpg","Taipei Integrated Narrow-Alley Spatial Profile",[166,167],[82,228,230],{"start":229},2,[85,231,232,90,235,237,238,240,242,243,245,246,248,249,251,252,254,255,257],{},[59,233,234],{},"Case B｜Decision-Oriented Dashboard and Risk Classification",[64,236],{},"\nThe initial system used a composite \"narrow alleys × fire hydrant density\" model with dynamic circles, producing three problems: the hydrant threshold lacked statistical basis, the composite metric was unintuitive, and map visual noise was too high.",[64,239],{},[64,241],{},"1. Model Simplification and Noise Reduction",[64,244],{},"Decisively distilled the metric to a single \"narrow alley density (count/km²).\" This eliminated derivation errors and ensured the target audience could identify high-risk areas at a glance.\n",[64,247],{},"2. Statistical Anchoring",[64,250],{},"\nMoving away from subjective thresholds, the system utilizes quartiles calculated from real-world data across Taipei’s 12 districts (Q1: 2 / Q2: 7 / Q3: 20) as risk benchmarks. This ensures that the extreme-risk classifications for Datong (43.4) and Zhongzheng (40.6) are grounded in rigorous statistical evidence, bypassing subjective visual cognitive biases.\n",[64,253],{},"3. Scenario-Driven Information Architecture",[64,256],{},"Abandoned a separate dashboard page and integrated statistics into the left-side panel of the map. For planning meeting scenarios, this ensures \"map distribution + statistical context\" are simultaneously visible, avoiding cognitive interruption from cross-page navigation.",[156,259,160,261],{"className":260},[159],[162,262],{"src":263,"alt":225,"className":264},"/project/map_A_03.png",[166,167],[44,266,268],{"id":267},"outcomes","Outcomes",[270,271,272,278,284],"ul",{},[85,273,274,277],{},[59,275,276],{},"Data Contribution",": Identified 202 unregistered high-risk segments, addressing critical gaps in official planning. Established Taipei’s first integrated narrow-alley dataset, mapping a total of 1,672 segments and 9.18 km of previously undocumented spatial risks.",[85,279,280,283],{},[59,281,282],{},"Technical Validation",": Technical Validation: Confirmed the reliability of a full-stack Laravel + PostGIS + OpenLayers architecture within public sector environments. Demonstrated that self-hosted GeoServer/OSM with SLD styling can fully replace commercial APIs, achieving 100% technical autonomy and long-term cost reduction.",[85,285,286,289,290],{},[59,287,288],{},"Methodology",": Established a transferable risk assessment process that derives quantitative thresholds from regulatory text combined with quartile-based statistical anchoring.",[291,292,293,320],"table",{},[294,295,296],"thead",{},[297,298,299,305,310,315],"tr",{},[300,301,302],"th",{},[59,303,304],{},"Data Category",[300,306,307],{},[59,308,309],{},"Count",[300,311,312],{},[59,313,314],{},"Total Length (km)",[300,316,317],{},[59,318,319],{},"Decision Value",[321,322,323,340,356,372],"tbody",{},[297,324,325,331,334,337],{},[326,327,328],"td",{},[59,329,330],{},"Urban Plan Alleys (plan only)",[326,332,333],{},"1,398",[326,335,336],{},"6.21",[326,338,339],{},"Statutory risk zones pending field verification",[297,341,342,347,350,353],{},[326,343,344],{},[59,345,346],{},"Fire Dept. Field-Surveyed New Entries (field only)",[326,348,349],{},"202",[326,351,352],{},"2.97",[326,354,355],{},"Reveals real gaps not yet reflected in planning data",[297,357,358,363,366,369],{},[326,359,360],{},[59,361,362],{},"Dual-Confirmed (high-risk overlap)",[326,364,365],{},"72",[326,367,368],{},"0.31",[326,370,371],{},"Priority hotspots for budget allocation",[297,373,374,379,382,385],{},[326,375,376],{},[59,377,378],{},"Total",[326,380,381],{},"1,672",[326,383,384],{},"9.18",[326,386,387],{},"Complete spatial profile of narrow alleys across Taipei",[44,389,391],{"id":390},"reflections","Reflections",[270,393,394,402,410],{},[85,395,396,90,399,401],{},[59,397,398],{},"The Ultimate Practice of Role Integration",[64,400],{},"\nThis was the first project where I connected PM problem definition, UX sensibility, Technical Architect design, and full-stack Engineering—all with the same pair of hands. Role integration was not always smooth: early on I wrote business logic (risk judgment) in the frontend, until I realized that scattering judgment logic across the visual layer made the system unmaintainable. This process taught me that architectural layering is not just a technical convention—it's the means of ensuring product goals and implementation stay aligned over time.",[85,403,404,90,407,409],{},[59,405,406],{},"The Semantic Turn in Data Governance",[64,408],{},"\nI realized that data integration is not a technical problem but a semantic and governance problem. The right architectural decision is not to eliminate uncertainty, but through architectural honesty—using warning mechanisms to surface data credibility boundaries—to ensure the system maintains transparent and reliable decision value even when data is imperfect.",[85,411,412,90,415,417],{},[59,413,414],{},"Establishing Professional Identity",[64,416],{},"\nExperiencing diverse roles across these projects has crystallized my professional identity: I am not an engineer accumulating depth in a single vertical domain. Instead, I am a system builder capable of defining problems, designing architectures, and executing full-stack implementations. This is not just a role expansion—it is the first time these three core competencies have been integrated into a single, unified state of delivery within highly uncertain environments.",{"title":419,"searchDepth":229,"depth":229,"links":420},"",[421,422,423,424,425,426],{"id":46,"depth":229,"text":47},{"id":79,"depth":229,"text":80},{"id":121,"depth":229,"text":122},{"id":170,"depth":229,"text":171},{"id":267,"depth":229,"text":268},{"id":390,"depth":229,"text":391},"2026-03-30T00:00:00.000Z","md","/project/map_A_01.jpg",{},10,true,{"title":18,"description":419},"-JUzCVzBFZ4cobIKlPrs3l2V8c0W9b8z8cyMwTYqgbI",[436,455,473],{"id":437,"title":438,"date":439,"description":440,"description_en":441,"extension":442,"image":443,"meta":444,"stem":452,"tags":453,"title_en":10,"url":447,"__hash__":454},"projects/projects/ecotrack.yml","全台首個智慧城市 PFI 實踐：桃園智慧路燈轉型","2022-01-01T00:00:00.000Z","在 15 年期的 PFI 轉型架構下，透過需求治理與角色分層設計,整合四套舊系統為單一平台,服務六類使用者、管理 162,000 盞智慧路燈。","Unified four legacy systems into a single platform through governance design and role-based access control, serving six user types and managing 162,000 smart streetlights across Taoyuan.","yml","/project/Taoyuan_A_01.png",{"path":445,"body":446},"/projects/ecotrack",{"title":438,"title_en":10,"description":440,"description_en":441,"image":443,"url":447,"tags":448,"date":451},"/projects/smart-streetlight",[449,450],"PM","UIUX","2022","projects/ecotrack",[449,450],"V009I0epBDzP5dY0auyCYfIpTRof9I76xp-8HQagELI",{"id":456,"title":457,"date":458,"description":459,"description_en":460,"extension":442,"image":461,"meta":462,"stem":470,"tags":471,"title_en":22,"url":465,"__hash__":472},"projects/projects/notex.yml","效能診斷：Web DRM 閱讀器的跨層診斷與優化","2025-01-01T00:00:00.000Z","藉由跨層診斷與 A/B 測試精確定位效能瓶頸，成功優化 PDF 載入表現，將反應時間由 6.59s 壓低至 0.6s，效能增長達 91%。","Identified performance bottlenecks through cross-layer diagnostics and A/B testing, successfully optimizing PDF load times from 6.59s to 0.6s—a 91% increase in efficiency.","/project/noteX_A_01.png",{"path":463,"body":464},"/projects/notex",{"title":457,"title_en":22,"description":459,"description_en":460,"image":461,"url":465,"tags":466,"date":469},"/projects/NoteX",[467,468],"Frontend","WordPress","2025","projects/notex",[467,468],"RlYBo4rkSR8bZkg3QdBy3oXQfNgpwAesUKhy4NatE9w",{"id":474,"title":475,"date":476,"description":477,"description_en":478,"extension":442,"image":429,"meta":479,"stem":486,"tags":487,"title_en":18,"url":480,"__hash__":488},"projects/projects/map.yml","空間資料整合：揭露台北市 202 條未登錄防災風險路段","2026-01-01T00:00:00.000Z","建構台北市首個窄巷空間驗證系統，整合 5 大開放資料集以自動化識別 202 條未登錄風險路段，並實作全市 1,672 條路段、總長 9.18 公里的完整圖資整合。","Engineered Taipei’s first spatial validation system to automate the identification of 202 unregistered risk segments, achieving a full integration of 1,672 segments totaling 9.18 km.",{"path":480,"body":481},"/projects/map",{"title":475,"title_en":18,"description":477,"description_en":478,"image":429,"url":480,"tags":482,"date":485},[483,484],"Fullstack","GIS","2026","projects/map",[483,484],"gAEhNEi9ow33wIkLgYEhq471cxo5eKUSTQFUKw15NDM",1775314583932]