During the summer of 2021, we worked with the Build Lebanon Trails Association (BLT) to help them with their trail maps as they start to build more trails in Lebanon, Oregon. We started our pro bono work by making two trailhead kiosk maps that measured 2โ€™x3โ€™ for use at kiosks on their marquee trail: The Old Mill Trail.

The project, from BLTโ€™s requirements to kiosk map printing and a ribbon cutting ceremony, took about 5 months. At the ceremony, Build Lebanon Trails had two great looking trailhead kiosks with maps and historical photos & information on the Lebanon area.

But for five months of work, we had only produced two maps, one at each end of the trailhead that would only be seen or used by those physically at the trailheads. Though the main goal is getting more people outdoors, geospatial software tools could help deliver more maps into more peopleโ€™s hands.

Figure 1: Print map of the Build Lebanon Trails system. A 20โ€x30โ€ print from a nationwide print retailer.

Print map of the Build Lebanon Trails system

The Same Map on the trailhead in print, web & mobile

The Product Matrix from a Print Workflow

When you start with raster data designed for print, then your options for futher products increases. We started with a kiosk map, and our knowledge of Geospatial tools helped us make more products for BLT.

+ QGIS Print Layout
OSM Extract
Raster GeoTIFF

1. Print
2. Mobile
3. Web
๐Ÿ–จ๏ธ 2'x3' Kiosk map
๐Ÿ–จ๏ธ 20x30 Poster
๐Ÿคณ Maps for Social Media
๐Ÿ“ฑ Share the World, RobLabs.com/stw
๐Ÿ“ฑ Avenza
๐Ÿ Leaflet
โ˜๏ธ COGeoTIFF

Details: How this SVG was built
  • Built using [Mermaid](https://github.com/mermaid-js/mermaid)
    * https://github.com/mermaid-js/mermaid#about
    * https://mermaid.live/edit#pako:eNplkm9v2jAQxr_KyW_6ohDyPyEvJrUUGBuoDCpVGkGVEztgLbEjxylQ4LvPphvVund3z_3u8dnnI8oFoShBRSl2-RZLBdNFylN-t3pczmC4VxLnag3d7pfTLfwYT5Ywl4xrCh9Eq05wv1rgRlEJYyqeJqPROuX3hobB8Y-SaruUO9Z7ow5dC2YiYyXVsWfBM810MJeCtLlqzikfXE6rDX2Ch9XLC3g3--AGvjPR_IIK1-tPzNAwrr33bJgLM8xnYGSAGa4bKISEpcgZLmFGCcNXsrpMdIKxQZf6ISioLYVnIUvSgYXIpjhrrFxUvUbt_uv6arruXil_-3Dc0ewEE1OYUlyUVP1b-WYqg8e_z4Y6qKKywozoZRxTDpAiPUBFU5TokNACt6VKUcrPGsWtEssDz1GiZEs7qK0JVvSB4Y3EFUoKXDZXdUiYEvIqlgITqtMjUofabH7DGqUtc8ELtjF6K0stb5Wqm6TXM2Vrw9S2zd6vz4j5JtvXftgL3TDGrkfDyMOB55E8c_px4fpOQSLbcTE6nzuoxvynEB9T6dycskdJN_L7lm3bTuw5duCHcdxBBy27gW_5kef0bc-OQidytcvbxcK1bCd0HTcO4ih2vCD2z78Bh1rjNg
    flowchart LR
    A[OSM Extract] -->|+ QGIS Print Layout| B[Raster GeoTIFF]
    B --> C{GeoTIFF\n\n1. Print\n2. Mobile\n3. Web\nProducts}
    C -->|print| D[__ 3'x5' Kiosk map]
    C -->|print| E[__ 20x30 Poster]
    C -->|print| F[__ Maps for Social Media]
    C -->|mobile| G[__ Share the World, RobLabs.com/stw]
    C -->|mobile| H[__ Avenza]
    C -->|web| I[__ Leaflet]
    C -->|web| J[__ COGeoTIFF]
    </details> --- # What We built for BLT ## ๐Ÿ–จ๏ธ 2021 Goal: *Maps for Trailheads* * A **2'x3' print map** using OpenStreetMap data + BLT Trail data + Satellite Imagery, built with the [QGIS Print Layout](https://docs.qgis.org/3.22/en/docs/training_manual/forestry/forest_maps.html#basic-fa-preparing-the-print-layout) engine. * A **20"x30" print map** for use at events, or as fundraising gifts for sponsors. * Cartograpic Symbology was follows the National Park Service [Symbol Library](https://www.nps.gov/maps/tools/symbol-library/index.html) standard for a common *look & feel*. ## ๐Ÿคณ 2021 Goal: `#mapsForSocialMedia` * Making use of the [QGIS Atlas Tool](https://docs.qgis.org/3.22/en/docs/training_manual/forestry/forest_maps.html) to generate square images for marketing and sharing on Social Media. ## ๐Ÿ 2021 Goal: *Maps for Web* * A Leaflet based map delivered to BLT for marketing their trails on their [web site](https://buildlebanontrails.com/BuildLebanonTrails.com-online-map/leaflet-2021.html). Leaflet allows for links that allow you set the zoom and location directly in the link. See: * [Riverview Park](https://buildlebanontrails.com/BuildLebanonTrails.com-online-map/leaflet-2021.html#16/44.5241/-122.8881) * [Gills Landing](https://buildlebanontrails.com/BuildLebanonTrails.com-online-map/leaflet-2021.html#16/44.5371/-122.8884) ## โ˜๏ธ 2021 Goal: *Efficient Map for Web* * A [Cloud Optimized GeoTIFF](https://www.cogeo.org) consumes print ready GeoTIFF files that can be proofed by BLT on a web page. Instead of distributing a 250 MB file to be downloaded and displayed, we used COG to efficiently consume the GeoTIFF file and stream the portions of the map that BLT needed to review. ## ๐Ÿ“ฑ 2022 Goal: *Offline Maps for Mobile* * See the iPhone app specifically built for iMessage at [RobLabs.com/stw](https://RobLabs.com/stw). --- ### Print Details for *Build Lebanon Trails* * This is a 2'x3' map that is print ready with dimensions of 7200โ€Šร—โ€Š10800 pixels at 300 pixels per inch. * November 2021 - final version [`v2021-11-02`](https://github.com/roblabs/maps-for-non-profits/releases/tag/v2021-11-02) * For a web version of this 2'x3' map, see this [Leaflet map](https://buildlebanontrails.com/BuildLebanonTrails.com-online-map/leaflet-2021.html). This can be integrated into the Build Lebanon Trails website by downloading this [97 MB Zip file](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails.com-online-map.zip). * This [13 MB JPEG](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/Build-Lebanon-Trails-2x3.jpg) version of the map should only be downloaded if you are interested in printing your own copy of the map. The image size is 7200โ€Šร—โ€Š10800 for printing at 300 pixels per inch. * This [53 MB Zipfile](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/Build-Lebanon-Trails-8x10.zip) contains five maps scaled at 8"x10" for use for printing on letter size pages. --- ## Maps for Mobile ### Share the World *"Share the World" with your iMessage contacts by sharing the trails, points of interest, and places that you have explored."* See the iPhone app specifically built for iMessage at [RobLabs.com/stw](https://RobLabs.com/stw). This app was built on Apple MapKit which allows for layering raster tiles on top of an Apple Maps baselayer. This allowed us to make use of Apple Maps and 3D maps for National Parks such as Joshua Tree & Yosemite. *If the Video doesn't load, [click this link](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/STW-social.720p.mov#t=4).* #### Video: *Build Lebanon Trails with Share the World for iPhone*
    ### Avenza *Offramps* with a GeoTIFF We built a version of the Build Lebanon Trails map to work as a *Offline Maps for Mobile*. And it is designed to work with Avenza Maps, a free download availabe for iOS & Android. **Note:** From the [Avenza Support site](https://support.avenzamaps.com/hc/en-us/articles/360035432331-Importing-maps-from-custom-locations) on how many maps you can download. > "*You are able to import an unlimited number of your own maps, however, only 3 maps will be able to use the tools contained within Avenza Maps such as location, placemark creation, & tracking.*" #### iOS Install from [Apple App Store](https://apps.apple.com/us/app/avenza-maps/id388424049) and & open Avenza Maps. Use [iOS docs from Avenza](https://support.avenzamaps.com/hc/en-us/articles/360035432331-Importing-maps-from-custom-locations) if you need additional assistance. 1. Tap this this link when Avenza Maps is installed: [Build-Lebanon-Trails-2x3](avenzamaps://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/Build-Lebanon-Trails-2x3.tif) --- ### Maps for Social Media We have created 1024โ€Šร—โ€Š1024 pixel images that are perfect for sharing trailheads on social media. [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-3.jpg){:target="_blank"} [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-4.jpg){:target="_blank"} [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-7.jpg){:target="_blank"} [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-11.jpg){:target="_blank"} [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-13.jpg){:target="_blank"} [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-15.jpg){:target="_blank"} [](https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/BuildLebanonTrails-Maps-for-Social-Media-18.jpg){:target="_blank"} --- ### COG * [Online version](https://tiles.rdnt.io/preview?url=https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fcom.roblabs.yellow-dog%2Fblt%2FBuild-Lebanon-Trails-2x3-Gill.JPEG.tif&rgb=1%2C2%2C3&nodata=&resample=cubic#14/44.5306/-122.8868) in a full window. * This is a 250 MB TIFF, which is not ideal for sharing. [Cloud Optimized GeoTIFF](https://www.cogeo.org) allows for efficient distributions of tiles. * You'll never have to say again, "*did you receive my 250 MB image attachment?!?"
    Details: How a COG URL is built
  • https://tiles.rdnt.io/preview?url=https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fcom.roblabs.yellow-dog%2Fblt%2FBuild-Lebanon-Trails-2x3-Gill.JPEG.tif&rgb=1%2C2%2C3&nodata=&resample=#14/44.5393/-122.9059
  • This demo built on Lambda serverless at AWS
  • URL encoded path to a GeoTIFF: https://s3.us-west-2.amazonaws.com/com.roblabs.yellow-dog/blt/Build-Lebanon-Trails-2x3-Gill.tif
  • Resample=cubic
  • Hash to a Zoom, Latitude, Longitude0 </details> --- ### QGIS Details ๐Ÿ—บ๏ธ๐Ÿ‡บ๐Ÿ‡ธ You can easily import an OpenStreetMap extract, `map.osm`, directly into QGIS. The map requirements were that we had to match previous versions of the map. ๐Ÿ—บ๏ธ๐Ÿ‡บ๐Ÿ‡ธ In order to reduce or remove some of the extra OpenStreetMap data, QGIS allows for filtering. Therefore, Streets in black were heavily filtered by ignoring or filtering by `name` or `osm_id`. Example of filtering: ```sql -- Identify by Name or OSM ID, the lines you wish to remove "name" = 'Tangent Street;Corvallis-Lebanon Highway' OR "name" = 'Hansard Avenue' OR "name" = 'Reeves Parkway' OR ("name" = 'Harrison Street' AND "osm_id" = '5503677') OR "name" = 'North 5th Street' OR ("name" = 'South 5th Street' AND "osm_id" = '539462662' OR "osm_id" = '876011733') OR "osm_id" = '113666889' OR "osm_id" = '5504321' -- ... ``` ### Demo of Building up the Map Layers We have many layers, but before we consider printing, we need to do filtering in QGIS. In this demo, you will see several states of how the map is produced. * "Satellite only without any OpenStreetMap nor trails." * "Unfiltered OpenStreetMap data." * "Filtered OpenStreetMap data without trails." * "What was shipped to the printer." ### YAML + Liquid format
    Details: Static Map Image Gallery
  • Built using YAML for data & LiquidJS for templating.
  • JavaScript-free: only uses HTML & CSS for cases where JavaScript could or is disabled. </details> ```liquid # {% for item in items %} {%- if forloop.first == true -%} {% comment %} snip code listing {% endcomment %} {{ item.title }} โ€”ย {{ item.caption | replace: "\n", "
    " }} # ``` ```yaml items: - url: https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/blt-satellite.jpg title: 'Build Lebanon Trails' caption: 'Satellite only without any OpenStreetMap nor trails.' - url: https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/blt-OSM-no-filtering.jpg title: 'Build Lebanon Trails' caption: 'Unfiltered OpenStreetMap data.' - url: https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/blt-no-trails.jpg title: 'Build Lebanon Trails' caption: 'Filtered OpenStreetMap data without trails.' - url: https://github.com/roblabs/maps-for-non-profits/releases/download/v2021-11-02/blt.jpg title: 'Build Lebanon Trails' caption: 'What was shipped to the printer.' ```