VT Logo

VT Elevation Finder

Interactive Documentation

Application Overview

This interactive document explores the architecture of the VT Elevation Finder, a single-page web application for analyzing elevation data in Vermont. It allows users to find and visualize elevation data via three primary methods:

  • Address Search: Type a Vermont address or place name.
  • Map Click: Directly click a point on the interactive map.
  • Line Drawing: Draw a line (profile) on the map.

This guide breaks down its key features, technology, data flow, and components. For a selected point, it displays coordinates, ground elevation (DEM), surface elevation (DSM), and calculated object height. For a drawn line, an interactive elevation profile chart is generated with new user controls.

🔍

Address Search

Find locations using Vermont addresses or place names with debounced suggestions.

📈

Advanced Profiles

Generate profiles with selectable resolution and a toggleable surface layer (DSM).

📄

GeoJSON Export

Export profile data, including points, elevations, and calculated slope, for use in GIS software.

🗺️

Interactive Map

Core interface using Leaflet.js with switchable baselayers and click interaction.

📍

Point Elevation

Click or search to get ground (DEM) and surface (DSM) elevation, plus object height.

⚙️

Progressive Loading

Profile data loads in batches, providing fast initial feedback and a responsive UI.

☁️

COG Data Source

Efficiently reads data from Cloud-Optimized GeoTIFFs without downloading entire files.

🔗

Interactive Sync

Hovering on the chart displays a corresponding marker on the map for easy correlation.

Technology Stack

The application is built with a modern stack of open-source libraries and services, creating a robust and interactive user experience. Click on a technology to learn more about its specific role.

COGs & Serverless Architecture

The VT Elevation Finder leverages Cloud-Optimized GeoTIFFs (COGs) and a primarily serverless architecture to deliver an efficient and scalable experience directly in the user's browser.

Understanding Cloud-Optimized GeoTIFFs (COGs)

A GeoTIFF is a standard public domain metadata standard which allows georeferencing information to be embedded within a TIFF file. COGs enhance this by being structured for highly efficient web access, allowing applications to request only the specific parts of the file they need using HTTP GET range requests.

The application utilizes statewide elevation models in COG format, hosted on AWS S3. This high-quality elevation data is derived from lidar data collected by the State of Vermont in partnership with the USGS and other collaborators.

Key benefits for elevation data retrieval:

  • Partial Reads: GeoTIFF.js fetches only relevant elevation pixels, not entire large DEM/DSM files.
  • Reduced Latency & Bandwidth: Faster data retrieval and less data transfer.
  • Web-Native Access: COGs are hosted on HTTP servers (like AWS S3) for direct client access.

For more detailed information, please visit:

Serverless by Design (with an API assist)

The core elevation data processing is serverless: all significant logic (map interaction, coordinate transformation, COG parsing, charting, state management) happens in the user's browser. The application's static assets (HTML, CSS, JS) are served from static hosting.

The address search functionality utilizes an external API: the VCGI ArcGIS Geocoding Server. This is a common pattern where a mostly serverless frontend interacts with specialized backend services for tasks like geocoding.

Advantages of this hybrid approach:

  • Scalability & Cost-Effectiveness (Core App): The serverless parts scale with static hosting capabilities.
  • Specialized Functionality (Geocoding): Leverages a robust, maintained geocoding service without needing to build or host this complex logic.
  • Simplified Deployment: Updates often involve just new static files.

Profile Analysis & Export

The elevation profile tool offers several features for detailed analysis and data portability. Once a line is drawn on the map, you can adjust its detail, add surface data, and export the results.

Profile Resolution & Sampling

The **Profile Resolution** control allows you to define how many points are sampled along the path of your drawn line. The application then uses the `getSampledPointsAlongLine` function to interpolate these points at roughly equal distances.

  • A lower number (e.g., 100) results in faster processing but a less detailed profile, with larger gaps between sample points.
  • A higher number (e.g., 1000) provides a much more detailed and smoother profile but requires more time to fetch the elevation data for all points.

The **Approx. Spacing** value is calculated by dividing the total profile length (in feet) by the number of segments (resolution - 1). It gives you a clear idea of the distance between each elevation sample on the chart.

DSM Toggle & GeoJSON Export

The **DSM Toggle** allows you to add the Digital Surface Model (trees, buildings) to the profile on demand. To improve initial performance, this data is only fetched when you explicitly enable it.

The **Export GeoJSON** button provides a powerful way to use this data externally. It generates a GeoJSON `FeatureCollection` file containing a point feature for every sampled location along your profile.

Each point in the GeoJSON includes:

  • Latitude and Longitude
  • Distance along the profile
  • Ground (DEM) and Surface (DSM) elevation
  • Calculated slope to the next point

This file can be easily imported into GIS software like QGIS or ArcGIS for further mapping and analysis.

Interactive Data Flow

The application supports three main user interaction flows for location selection and data retrieval. Select a flow below to see how data moves from user input to the final display. Click on any step for more details.

Component Architecture

The application's UI is built with React, broken down into several key components. Each has a distinct responsibility, managing a specific part of the user interface and application state. Click the tabs to explore each component.

Elevation Profile Demo

This is an interactive demonstration of the application's elevation profile chart, built with Chart.js. It shows both ground (DEM) and surface (DSM) elevation. Use the controls to toggle the DSM layer and see how the tooltips provide rich, contextual information, including the calculated "Object Height" at any given point.