Zi Rui Zeng | Web GIS Portfolio
HTML, CSS, JavaScript, ArcGIS Online, GitHub Pages
Web GIS Developer Project

Interactive Web GIS Applications for Public Information and Spatial Risk Exploration

ArcGIS Online applications presented through a custom front-end interface

This project demonstrates the development of a responsive Web GIS portfolio page using HTML, CSS, and JavaScript to present and compare two ArcGIS Online applications. The webpage integrates live GIS content through embedded iframes, custom tab navigation, smooth scrolling, structured project documentation, and a recruiter-friendly presentation format.

View Source Code ↗

Project Goal

To build a polished front-end webpage that embeds, explains, and compares two ArcGIS Online applications using a developer-oriented presentation style.

Applications Included

  • Winter Holiday Snowfall Explorer (ArcGIS Instant App)
  • Global Maritime Security Dashboard (ArcGIS Dashboard)

Core Development Skills Demonstrated

  • Responsive HTML and CSS layout design
  • Vanilla JavaScript interaction logic
  • ArcGIS Online application integration
  • GitHub-based static site deployment

Technologies Used

  • HTML5
  • CSS3
  • JavaScript
  • ArcGIS Online
  • GitHub Pages

Key Front-End Features

  • Tab-based navigation
  • Embedded live GIS applications
  • Smooth scrolling navigation
  • Responsive mobile-friendly structure

Portfolio Value

This page reframes academic GIS applications as a deployable Web GIS product, making the work more suitable for developer internship applications.

Interactive Application Showcase

The applications below are embedded directly from ArcGIS Online. Each tab contains a concise explanation of the application purpose, interaction logic, technical design, and access to the live full-screen version.

Winter Holiday Snowfall Explorer

Application Purpose

This application supports outdoor travellers who need rapid situational awareness of snowfall conditions across national and regional parks in the United States. It focuses on communicating short-term forecast patterns in an accessible visual format.

User Interaction
  • Search for a destination using the geocoding tool.
  • Use the time slider to animate snowfall changes in 6-hour intervals.
  • Use bookmarks to jump to eastern, western, or nationwide views.
Technical Implementation

The application was configured in ArcGIS Instant Apps using the Slider template. The supporting webpage uses JavaScript to embed the live app, while the front-end layout and controls were built with custom HTML and CSS for a cleaner presentation layer.

ArcGIS Instant Apps Temporal Visualization Embedded Iframe Responsive UI

Global Maritime Security Dashboard

Application Purpose

This dashboard visualizes global maritime security incidents alongside shipping routes to support spatial and temporal exploration of maritime risk patterns. The goal is to help users identify where incidents cluster, how patterns change over time, and which incident categories dominate.

User Interaction
  • Pan and zoom to examine incident hotspots near major shipping corridors.
  • Use chart interactions to inspect yearly patterns and incident categories.
  • Apply year-based filtering through dashboard actions.
Technical Implementation

The web map was assembled in ArcGIS Online Map Viewer and configured in ArcGIS Dashboards. An Arcade expression was used to simplify detailed hostility categories into grouped incident classes. The surrounding webpage uses custom front-end code to embed the dashboard and present its design logic.

ArcGIS Dashboards Arcade Expression Action-Based Filtering Spatial Analytics

Design Rationale

This section explains the design decision behind each application format and the technical strengths of the two different ArcGIS Online routes.

❄️ Why ArcGIS Instant Apps

The snowfall project is primarily a time-enabled public information application. The main requirement is a lightweight, guided interface that helps users interpret forecast changes quickly rather than compare many variables at once.

The Slider template is appropriate because it supports temporal storytelling, smooth forecast animation, and a simpler end-user experience for non-expert audiences.

🚢 Why ArcGIS Dashboards

The maritime project contains multiple analytical dimensions, including location, year, incident category, and relationship to major shipping corridors.

ArcGIS Dashboards is more suitable because it supports cross-element interactions, chart-driven filtering, and more advanced analytical comparison than a single-template storytelling application.

Technical Stack, Data Sources, and System Notes

A recruiter-friendly summary of the build components, GIS data usage, and current application limitations.

Development Stack

  • HTML5: Semantic webpage structure and project layout
  • CSS3: Visual theming, card-based layout, spacing, and responsive styling
  • JavaScript: Tab switching, iframe injection, and smooth scrolling behavior
  • ArcGIS Online: App hosting, map configuration, and dashboard logic
  • GitHub Pages: Static deployment for public portfolio access

Portfolio-Oriented Features

  • Custom tab interface for switching between applications
  • Embedded live GIS applications using iframe integration
  • Structured project explanation for technical and non-technical audiences
  • Single-page responsive presentation suitable for internship review

GIS Data and System Notes

The Snowfall Explorer uses a time-enabled snowfall forecast layer and a parks layer assembled in ArcGIS Online. The Maritime Dashboard uses global shipping routes and ASAM maritime incident records configured in ArcGIS Online Map Viewer and ArcGIS Dashboards.

Current Limitations

  • The snowfall feed may become temporally out of sync when the source service does not refresh in the expected forecast cycle.
  • The shipping routes layer is a tile layer, which limits direct symbology customization inside ArcGIS Online.
  • This webpage functions as a static front-end shell and does not currently use a custom back-end or API proxy layer.

AI Declaration

AI tools were used to support webpage troubleshooting, layout refinement, and interface iteration. Their role was limited to assisting with front-end debugging, restructuring page sections, and improving visual presentation. All project framing, application selection, GIS content configuration, and final review decisions were made by the author.