create-spatial-visualization

Create Spatial Visualization

Create interactive maps, elevation profiles, and spatial visualizations from GPX tracks, waypoints, or route data.

When to Use

• Visualizing a planned or completed tour route on an interactive map
• Creating elevation profiles for hiking or cycling routes
• Overlaying waypoints, POIs, and route corridors on a basemap
• Generating static map images for print reports
• Building a web-based trip dashboard with spatial data

Inputs

• Required: Spatial data source (GPX file, CSV with lat/lon, GeoJSON, or waypoint list)
• Required: Visualization type (interactive map, static map, elevation profile, heatmap)
• Optional: Basemap preference (OpenStreetMap, satellite, terrain, topo)
• Optional: Styling parameters (colors, line width, marker icons)
• Optional: Output format (HTML widget, PNG, SVG, embedded in Quarto)
• Optional: Additional layers (POI markers, area boundaries, distance markers)

Procedure

Step 1: Import Spatial Data

Load and parse the spatial data into a usable format.

R approach (sf package):

# GPX file
track <- sf::st_read("route.gpx", layer = "tracks")
waypoints <- sf::st_read("route.gpx", layer = "waypoints")

# CSV with coordinates
points <- readr::read_csv("stops.csv") |>
  sf::st_as_sf(coords = c("lon", "lat"), crs = 4326)

# GeoJSON
route <- sf::st_read("route.geojson")

JavaScript approach (for Observable/D3):

// GPX parsing
const gpxText = await FileAttachment("route.gpx").text();
const parser = new DOMParser();
const gpxDoc = parser.parseFromString(gpxText, "text/xml");

// Extract track points
const trkpts = gpxDoc.querySelectorAll("trkpt");
const coordinates = Array.from(trkpts).map(pt => ({
  lat: +pt.getAttribute("lat"),
  lon: +pt.getAttribute("lon"),
  ele: +pt.querySelector("ele")?.textContent || 0
}));

Verify the coordinate reference system (CRS) is WGS 84 (EPSG:4326) for web maps.

Got: Spatial data loaded as an sf object (R) or coordinate array (JS) with valid geometries. Point counts match expected input (e.g., a GPX track has hundreds to thousands of points).