The visual design process began in Adobe Illustrator, where the provincial map artwork, labels, and heraldic symbols were organized and stylized specifically for web export. The ai2html Illustrator plugin was then used to convert the composition into responsive HTML, CSS, and SVG markup. This workflow preserved vector scalability while allowing text and interface elements to remain independently addressable within the Document Object Model (DOM).

To improve interactivity beyond the default ai2html export, the SVG was converted from an external image reference into inline SVG markup embedded directly within the webpage structure. This allowed individual provincial polygons to be targeted using custom CSS hover states and JavaScript interactions. Hovering over a province dynamically changes its fill colour to reflect subordinate colours within the provincial flag, while clickable regions link users to additional external reference material.

A significant portion of the implementation process involved inspecting and identifying non-semantic polygon IDs generated during SVG export. Browser developer tools were used extensively to isolate individual provincial geometries and assign custom hover behaviours and styling rules. This workflow strengthened familiarity with inline SVG manipulation, DOM targeting, and the relationship between HTML structure, CSS presentation, and JavaScript behaviour in a cartographic web environment.

The final application demonstrates a lightweight alternative to traditional slippy web maps by leveraging scalable vector graphics as the primary interaction layer. The project emphasizes responsive layout behaviour, browser-native vector rendering, thematic abstraction through colour, and custom interaction design without reliance on external GIS web mapping frameworks.