Welcome! This repo contains a redesigned web map of the Muddy Branch Greenway Trail, now live on the website of the Muddy Branch Alliance. The map is rendered by Maplibre GL JS. All components needed to display it are contained within this repo. There are no additional external requirements or dependencies.

Here is a brief explanation of all of the underlying components this map relies on to render and display an intereactive map.

Deployment

If you are interested in deploying (or modifying) this map from your own account:

1. Fork this repo to your Github account
2. Set up a local web server and make any changes to the underlying data, styles, icons, etc.
3. Enable Github Pages in the new location
4. Search and replace any hard-coded references to the original Github Pages hosting site (e.g. https://mizmay.github.io/) with the new domain

Data from OpenStreetMap

The trail geometry, along with associated parking lots, trailheads, and other waypoints are all associated with a single route relation in OpenStreetMap. To update any of those features on this map:

1. Create an account (if you don't have one already), log in, and edit the geometries or tags via OpenStreetMap
2. Once you are satisfied with your updates, follow the instructions below to export the whole route relation as a GeoJSON and replace the GeoJSON in this file.

Once updated, your changes will show up on the Muddy Branch Trail map automatically.

Exporting the Muddy Branch Greenway Trail Relation

1. Go to Overpass Turbo and paste in this query to select the trail rail, parking polygons, and points of interest:

/* Muddy Branch Greenway Trail */
[out:json][timeout:25];

// Store the relation
rel(18728360)->.rel;

// Get member ways and their nodes
(
  way(r.rel);
  node(w); // nodes of the ways
)->.ways_and_nodes;

// Get member nodes that are *direct* members of the relation
node(r.rel)->.standalone_nodes;

// Combine all
(
  .ways_and_nodes;
  .standalone_nodes;
);
out body;

2. Hit download, select GeoJSON, and save to your local drive.

Replacing the data in this Repo

1. ( Optional / Recommended ) Verify the updates in the GeoJSON make sense compared with muddy_branch_greenway_trail_relation.geojson.
2. Replace muddy_branch_greenway_trail_relation.geojson with the file you just downloaded.

Reference Layers

The reference layers are everything on the map not coming directly from the OpenStreetMap query above.

Watershed Boundary

The boundary for the Muddy Branch Watershed came from the previous version of this map on the Muddy Branch website. The KML was converted to a GeoJSON, which can be previewed here.

It's likely the original data came from the USGS National Map, Hydrography dataset.

Hillshade

The shaded terrain (hillshade) effect was created from the stylesheet based on custom terrain tiles generated by downloading a PMTiles archive of zoom 12 terrain tiles and clipping the extent via:

pmtiles extract terrarium-z12.pmtiles muddy_branch_area.pmtiles --bbox=-77.574463,38.934310,-76.956482,39.254056

The original source for this archive is here. There is a lot more information about the Terrarium tiles, created by Tilezen here.

Note this terrain data is likely from 2008 or before, and at current writing there is nothing newer available from the USGS National Map. However there is a more recent digital elevation model (DEM) available from the Montgomery County GIS website here. If you choose to update to this data source, download this DEM, warp it to the correct map projection (Web Mercator, EPSG:3857), and then are two options for replacing current hillshade layer with this one:

1. Follow the Getting Started guide to install the pmtiles CLI
2. Convert it to RGB-encoded PMtiles, replace the existing file, and update the hillshade layer of the stylesheet as needed, OR
3. Use QGIS or GDAL to generate a pre-styled hillshade, convert it to PMtiles, replace the existing file, and change the stylesheet to reflect that the new data source is type raster-dem, rendered as-is.

Landcover, Roads, Labels, etc.

Everything else came from Protomaps. The Protomaps tile data extract is saved as muddy_branch_reference_data.pmtiles here. It is comprised primarily of OpenStreetMap data but optimized to be performant for web maps.

The global Protomaps tiles are updated nightly. Should the data in these layers ever become out-of-date and you need a more recent version, here's how to download and replace these layers:

1. Follow the Getting Started guide to install the CLI (if you haven't already) and find the latest daily planet file
2. Paste this at the command line, replacing <LATEST_PLANET_FILE> with the name of the latest daily planet file:

pmtiles extract https://build.protomaps.com/<LATEST_PLANET_FILE>.pmtiles muddy_branch_area.pmtiles --minzoom=10 --maxzoom=16 --bbox=-77.574463,38.934310,-76.956482,39.254056

3. Replace the existing file in this repo with the updated file.

Other Assets

Map controls and interactivity elements such as pop-ups are defined here and controlled by Maplibre GL GS. All the layers, map icons and text labels are rendered from assets in this repo based on instructions in the stylesheet. Instructions for how to access or modify these below.

THe [original Protomaps assets](https://github.com/protomaps/basemaps-assets?tab=readme-ov-file] were used as a guide for what to implement and how.

Styles

The original Protomaps stylesheet has been replaced with a custom one designed for this project. To make changes:

1. Install Map GL Style Build in a local clone of this repo
2. Modify the layer you want to change according to the Maplibre Style Specification
3. Build the style.json file here by running the Map GL Style Build build command.

Icons

Icons are custom SVGs created for this project and transformed to sprites that match the Maplibre GL spec using a command-line tool called Spreet. Note, both the JSON and PNG are required by the renderer.

Fonts

The map currently uses Noto Sans for all text labels, accessed from here. You can switch to any Maplibre GL compatible font by updating the text-font declarations throughout the stylesheet and the stylesheet glyph location (if stored somewhere else).