OpenMapTiles 3.13 Features: Highway shields, Interstate filtering

[ZeLonewolf]

Fixes #6
Fixes #69
Blocked by openmaptiles/openmaptiles#1287 Update: OpenMapTiles 3.13 is released, MapTiler Cloud planet update is expected during the week of Jan 10, 2022.
Blocked by maplibre/maplibre-gl-js#188 with pending fix maplibre/maplibre-gl-js#716. However, we can proceed with a development version of maplibre taken from that branch until it's released.

Description

This branch contains work that is dependent on the upcoming release of OpenMapTiles 3.13. This description will be updated over time with screen shots of the pending features. PRs that are dependent on OMT 3.13 can be posted to this branch. This PR will be kept in a "draft" status until OMT 3.13 is released.

Features included in this branch:

• Concurrent highway shields, with partial state-specific shield implementations for several states. This change removes the import of shield graphics from rebusurance in favor of style-specific shields.
• Suppress non-interstate motorways from the lowest zoom
• Wider shields and/or text scaling for longer refs
• Ability to re-color a base shield, such as US:US:Historic shields or Georgia ADHS state routes

The following features are incomplete:

• Complete implementation of state-specific shields
• Highway shields outside of the US

Caveats

• This branch includes a development version of maplibre-gl-js taken from Shield rotation maplibre/maplibre-gl-js#716, which is incompatible with the license of openstreetmap-americana. This must be resolved prior to merging. (Resolved)
• Padding is needed between adjacent concurrent shields. Due to issues with front-end rendering, this needs to be implemented as a perimeter pad on generated shield imagery.

How to run this branch

1. Clone the current master of OpenMapTiles from https://github.com/openmaptiles/openmaptiles
2. Modify .env to set the desired zoom level to render to (defaults to 7, can go as high as 14)
3. Run ./quickstart <name of area> to generate vector tiles (for example, ./quickstart rhode-island)
4. Run make start-tileserver which starts a tile server on localhost:8080
5. In openstreetmap-americana, create a config.js that looks like this:

const OPENMAPTILES_URL = `http://localhost:8080/data/v3.json`;
export default {
  OPENMAPTILES_URL,
};

6. Run make run to run the style

Screen shots

Zoom 4 Interstate-only map of the US

Multiple-widths of highway shields (Interstates)

Highway shields, California

Highway shields, Minnesota

Highway shields, Pennsylvania

Highway shields, South Carolina

Highway shields, Vermont

Highway shields, Virginia

Triple-modifiers on US-30 in Pennsylvania

Test Areas (localhost-referenced):

• I-35E/W, Minneapolis: http://localhost:1776/#12/44.76315/-93.2451
• US Business route, Dot routes, Pittsburgh: http://localhost:1776/#12/40.57216/-80.01409
• US 30 ALT/TRK/BUS mega-shield: http://localhost:1776/#15/40.00587/-75.71036

[jleedev]

I'm getting very small fonts at 100% zoom:

Looks ok at >100% zoom:

[ZeLonewolf]

I'm getting very small fonts at 100% zoom:

Good catch, looks like I used px on the fonts which needs to get the multiplier applied.

[jleedev]

General questions:

• Banners (TRK) seem to be commented out.
• Font sizes are all over the place. For instance, the PA keystone text is larger than others. Perhaps a maximum size based on certain common shields could help, e.g. no larger than the one used on Interstate/US routes?

[jleedev]

Are banners still a work in progress then?

[ZeLonewolf]

Oh yeah, I forgot about those.

[zekefarwell]

Looks good to me. Lets go! 🤠