@americana/maplibre-shield-generator

<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@americana/maplibre-shield-generator</title><meta name="description" content="Documentation for @americana/maplibre-shield-generator"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/search.js" id="tsd-search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar"> <div class="tsd-toolbar-contents container"> <div class="table-cell" id="tsd-search" data-base="."> <div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div> <div class="field"> <div id="tsd-toolbar-links"></div></div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@americana/maplibre-shield-generator</a></div> <div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header> <div class="container container-main"> <div class="col-content"> <div class="tsd-page-title"> <h2>@americana/maplibre-shield-generator</h2></div> <div class="tsd-panel tsd-typography"><a id="md:americana-shield-renderer" class="tsd-anchor"></a><h1><a href="#md:americana-shield-renderer">Americana Shield Renderer</a></h1>The Americana shield renderer is a library intended to draw highway shields on a <a href="https://github.com/maplibre/maplibre-gl-js">maplibre-gl-js</a> vector-tiled map. <img src="https://wiki.openstreetmap.org/w/images/6/6d/Rendered_shields_americana.png" alt="Pictoral highway shields"> <a id="md:shield-rendering-workflow" class="tsd-anchor"></a><h2><a href="#md:shield-rendering-workflow">Shield rendering workflow</a></h2>Rendering shields requires the following compoments: <ol> <li>Encode shield information in vector tiles. First, your tiles must contain the information which tells the shield renderer what shields to draw. In OpenMapTiles, shield information is encoded in the <a href="https://openmaptiles.org/schema/#transportation_name"><code>transportation_name</code></a> vector tile layer with a series of attributes named <code>route_1</code>, <code>route_2</code>, etc. Each attribute contains a text string which contains all of the information needed to determine which graphic to display, including numeric route number if the shield is numbered. However, this library allows you to specify how the shield information has been encoded, and it's possible to stitch together data from multiple fields when encoding shield data. </li> <li>Expose shield information in a style layer. Next, route information must be exposed in a maplibre expression using <a href="https://maplibre.org/maplibre-gl-js-docs/style-spec/expressions/#types-image">image</a> in a structured string containing the route information. For example, you might encode Interstate 95 as an image named <code>shield|US:I=95</code>. Normally, the image expression is used to point to pre-designated sprites in a sprite sheet, but in this case, we're pointing to a sprite which doesn't exist called <code>shield|US:I=95</code>. This will trigger a <code>styleimagemissing</code> event which allows the shield renderer to create the required graphic on the fly. As an example of how to encode shield information, see OSM Americana's <a href="https://github.com/osm-americana/openstreetmap-americana/blob/main/src/layer/highway_shield.js"><code>highway_shield</code></a> style layer. </li> <li>Define a parser that describes how route information is encoded. There are three parts to a route definition: <ol> <li>The <code>network</code> string, which defines a network with a common shield shape, graphic, and color</li> <li>The <code>ref</code> string, which defines a text sequence that should be drawn on top of the shield graphic</li> <li>The <code>name</code> string, which defines a name, separate from the ref, that is used to determine which graphic to draw</li> </ol> <pre><code class="language-typescript">let routeParser = { //format is `shield|${network}=${ref}|${name}` parse: (id: string) => { let id_parts = id.split("|"); let network_ref = id_parts[1].split("="); return { network: network_ref[0], ref: network_ref[1], name: id_parts[2], }; }, format: (network: string, ref: string, name: string) => `shield|${network}=${ref}|${name}`, }; </code><button>Copy</button></pre> </li> <li>(Optional) Create predicates that define which shields will be handled. For example, if all sprite IDs in your style that need a shield begin with the string <code>shield|</code>, this would look like: <pre><code class="language-typescript">let shieldPredicate = (imageID: string) => imageID.startsWith("shield"); </code><button>Copy</button></pre> This step can be skipped if all unhandled image IDs are shields. Additionally, you can specify which networks will be handled. The example below ignores all <code>nwn</code>, <code>lwn</code>, <code>ncn</code>, etc. network values: <pre><code class="language-typescript">let networkPredicate = (network: string) => !/^[lrni][chimpw]n$/.test(network); </code><button>Copy</button></pre> </li> <li>Create shield definitions and artwork. The shield definition is expressed as a JSON file along with a set of sprites containing any raster artwork used for the shields. It can be generated as an object or hosted as a JSON file accessible by URL. See the next section for how to create this definition. </li> <li>Hook up the shield generator to a maplibre-gl-js map. Pass either the URL of the JSON shield definition or create an object in javascript code. There are two separate classes for each approach. <pre><code class="language-typescript">new URLShieldRenderer("shields.json", routeParser) .filterImageID(shieldPredicate) .filterNetwork(networkPredicate) .renderOnMaplibreGL(map); </code><button>Copy</button></pre> <pre><code class="language-typescript">new ShieldRenderer(shields, routeParser) .filterImageID(shieldPredicate) .filterNetwork(networkPredicate) .renderOnMaplibreGL(map); </code><button>Copy</button></pre> </li> </ol> <a id="md:shield-definition" class="tsd-anchor"></a><h2><a href="#md:shield-definition">Shield Definition</a></h2>The purpose of the shield definition is to define which graphics and text to draw for each network/ref/name combination that you wish to display. This can be created in javascript as an object, or as an HTTP-accessible JSON file. This description uses the following conventions: <ul> <li>A network is a set of routes with a common graphical presentation. Each route may have variations in appearance, such as a different route number, or a special case definition as described below. The network value corresponds in concept to the OpenStreetMap <a href="https://wiki.openstreetmap.org/wiki/Key:network">network tag</a>.</li> <li>A ref contains the text to be drawn on shield artwork. The ref value corresponds in concept to the OpenStreetMap <a href="https://wiki.openstreetmap.org/wiki/Key:ref">ref tag</a>.</li> </ul> The structure is as follows: <pre><code class="language-json">{ "options": { "bannerHeight": 9, "bannerPadding": 1, "bannerTextColor": "black", "bannerTextHaloColor": "white", "shieldFont": "'Noto Sans Condensed', sans-serif-condensed, 'Arial Narrow', sans-serif", "shieldSize": 20 }, "default": { ...definition }, "network_1": { ...definition }, "network_2": { ...definition }, "network_3": { ...definition } } </code><button>Copy</button></pre> The options block contains global parameters that apply across all shield drawing: <ul> <li><code>bannerHeight</code>: height of each text banner</li> <li><code>bannerPadding</code>: padding between each banner</li> <li><code>bannerTextColor</code>: color to draw text banners above the shield</li> <li><code>bannerTextHaloColor</code>: color to draw an outline around the text banner</li> <li><code>shieldFont</code>: ordered list of fonts to use for shield text and banners. This project uses Noto Sans Condensed by default, hosted as a downloadable web font on <a href="https://github.com/osm-americana/web-fonts">another repository</a>.</li> <li><code>shieldSize</code>: "standard" size to use for shields in 1x pixels. However, some shields may diverge, for example, drawn diamond shields are drawn slightly larger for visual similarity with squares.</li> </ul> You should create one definition entry for each network. The entry key must match the encoded <code>network</code> value exactly. The "default" network defines what should be drawn if there's no definition for a particular network. A network definiton can contain any combination of the following parameters: <pre><code class="language-json">{ "textColor": "black", "textHaloColor": "white", "padding": { "left": 3, "right": 3, "top": 3, "bottom": 3 }, "spriteBlank": ["name_of_image_2", "name_of_image_3", "name_of_image_4"], "noref": { "spriteBlank": "name_of_image_noref" } "shapeBlank": { "drawFunc": "pentagon", "params": { "pointUp": false, "yOffset": 5, "sideAngle": 0, "fillColor": "white", "strokeColor": "black", "radius1": 2, "radius2": 2 } }, "banners": ["ALT"], "bannerMap": { "ThisNetwork:Truck": ["TRK"], "ThisNetwork:Truck:Bypass": ["TRK", "BYP"] }, "bannerTextColor": "#000", "bannerTextHaloColor": "#FFF", "textLayout": { "constraintFunc": "roundedRect", "options": { "radius": 2 } }, "colorLighten": "#006747", "overrideByRef": { "REF": { "spriteBlank": "special_case_image", "textColor": "#003f87", "colorLighten": "#003f87" } }, "refsByName": { "Audubon Parkway": "AU" }, "overrideByName": { "Merritt Parkway": { "spriteBlank": "shield_us_ct_parkway_merritt" } } } </code><button>Copy</button></pre> <a id="md:shield-property-descriptions" class="tsd-anchor"></a><h3><a href="#md:shield-property-descriptions">Shield property descriptions</a></h3><ul> <li><code>textColor</code>: determines what color to draw the <code>ref</code> on the shield.</li> <li><code>textHaloColor</code>: color to draw a knockout halo around the <code>ref</code> text.</li> <li><code>padding</code>: padding around the <code>ref</code>, which allows you to squeeze the text into a smaller space within the shield.</li> <li><code>spriteBlank</code>: specify the name of an image in the sprite sheet to use as the shield background. This can either be a single string or an array of strings if there are multiple options for different width.<ul> <li>If <code>spriteBlank</code> is an array of strings, they must be ordered from narrowest to widest, and the filenames must be suffixed with a consecutive range of integers, representing the optimal number of characters to display in each icon.</li> </ul> </li> <li><code>noref</code>: specify alternate attributes to apply in the event that no <code>ref</code> is supplied. This allows you to use one graphic for numbered routes and a separate unitary graphic for non-numbered routes within the same network. Supports <code>spriteBlank</code>, <code>colorLighten</code>, and <code>colorDarken</code>.</li> <li><code>shapeBlank</code>: specify that a shield should be drawn as a common shape (rectangle, ellipse, pentagon, etc), with colors and dimensions as specified. See the <a href="#defining-drawn-shield-shapes">drawn shield shapes</a> section for available drawing options.</li> <li><code>banners</code>: specify that one or more short text strings (up to 4 characters) should be drawn above the shield. This is specified as an array, and text will be drawn in order from top to bottom. Below is an example of bannered shields with up to three banners:</li> </ul> <img src="https://wiki.openstreetmap.org/w/images/f/f8/Downington_bannered_routes_Americana.png" alt="Bannered routes near Downington, PA"> <ul> <li><code>bannerMap</code>: a map of network-to-banner arrays listing networks that should have the same style but with specified banners.</li> <li><code>bannerTextColor</code>: specify the color of the banner text.</li> <li><code>bannerTextHaloColor</code>: specify the color of the banner knockout halo.</li> <li><code>textLayout</code>: specify how text should be inscribed within the padded bounds of the shield. The text will be drawn at the maximum size allowed by this constraint. See the <a href="#text-layout-functions">text layout functions</a> section for text layout options.</li> <li><code>colorLighten</code>: specify that the shield artwork should be lightened (multiplied) by the specified color. This means that black areas will be recolor with this color and white areas will remain the same. Alpha values will remain unmodified.</li> <li><code>colorDarken</code>: specify that the shield artwork should be darkened by the specified color. This means that white areas will be recolor with this color and black areas will remain the same. Alpha values will remain unmodified.</li> <li><code>overrideByRef</code>: specify that a specific <code>ref</code> within a <code>network</code> should have different shield properties than other routes in the network, with one entry per special-case <code>ref</code>. Supported options are <code>spriteBlank</code>, <code>textColor</code>, and <code>colorLighten</code>.</li> <li><code>refsByName</code>: specify that a <code>name</code> with the specified key should be treated as a <code>ref</code> with the specified value.</li> <li><code>ref</code>: specify that all shields in this network should be drawn with the specified <code>ref</code> value.</li> <li><code>overrideByName</code>: specify that particular <code>name</code> should use a specific <code>spriteBlank</code> which differs from the rest of the network.</li> </ul> <a id="md:handling-special-case-networks" class="tsd-anchor"></a><h3><a href="#md:handling-special-case-networks">Handling special case networks</a></h3>The shield specification allows for the handling of special cases. For example, in OSM Americana, we wanted to create special shields for the <a href="https://en.wikipedia.org/wiki/List_of_parkways_and_named_highways_in_Kentucky">Kentucky Parkway System</a>. This network used a particularly ugly set of shields that looked something like this: <img src="https://upload.wikimedia.org/wikipedia/en/d/db/Western_Kentucky_Parkway_fair_use.svg" alt="Western Kentucky Parkway shield"> The Americana team wanted to draw a series of shields that used two-letter codes to represent each of the Parkways, so that it would look like this: <img src="https://wiki.openstreetmap.org/w/images/d/da/Kentucky_parkway_Americana.png" alt="Kentucky parkways"> However, these two-letter codes weren't actually used as route numbers on shields, so it wasn't appropriate to add them to the <code>ref=*</code> tag in OpenStreetMap. Instead, the team used the <code>refsByName</code> property, and then defined what two-letter code is assigned to each named route network as follows: <pre><code class="language-json"> "US:KY:Parkway": { "spriteBlank":"shield_us_ky_parkway", "textColor":"#003f87", "padding": { "left":2, "right":2, "top":2, "bottom":6 }, "refsByName": { "Audubon Parkway":"AU", "Bluegrass Parkway":"BG", "Bluegrass Pkwy":"BG", "Cumberland Parkway":"LN", "Cumberland Pkwy":"LN", "Hal Rogers Parkway":"HR", "Hal Rogers Pkwy":"HR", "Mountain Parkway":"MP", "Mountain Pkwy":"MP", "Purchase Parkway":"JC", "Purchase Pkwy":"JC", "Western Kentucky Parkway":"WK", "Western Kentucky Pkwy":"WK" } }, </code><button>Copy</button></pre> Another special case is when select routes within a network need to be styled differently. For example, <a href="https://en.wikipedia.org/wiki/Georgia_State_Route_520">Georgia State Route 520</a> is signed with a green-colored shield, while the default color for Georgia state highways is black. The shield assembly below shows an intersection and concurrency with both styles of Georgia state route: <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/GA_green_route_concurrency.png" alt="Georgia Route 520"> This effect can be achieved by overriding the text and sprite color in the route definition as follows. For multiple special case refs, add multiple entries. <pre><code class="language-json">"US:GA": { "spriteBlank": ["shield_us_ga_2", "shield_us_ga_3"], "textColor": "black", "overrideByRef": { "520": { "textColor": "#006747", "colorLighten": "#006747" } } } </code><button>Copy</button></pre> In this example, the two <code>shield_us_ga_...</code> sprite blanks represent the narrow and wide versions of the Georgia state route shield, and are colored black with white fill. This results in the following: <img src="https://wiki.openstreetmap.org/w/images/0/0b/Columbs_georgia_concurrency.png" alt="Georgia State Route 520 Concurrency"> Finally, the last special case is when one named route in a network requires a different shield from other routes in the network. For example, the Merritt Parkway in Connecticut is tagged in OSM as <code>network=US:CT:Parkway</code> + <code>name=Merritt Parkway</code>. There are also two additional parkways in Connecticut tagged the same way. However, only the Merritt Parkway has a shield. Thus, we can define the <code>US:CT:Parkway</code> as an empty definition with an exception for a route named <code>Merritt Parkway</code>: <pre><code class="language-json">"US:CT:Parkway": { "overrideByName" : { "Merritt Parkway": { "spriteBlank": "shield_us_ct_parkway_merritt", }, } } </code><button>Copy</button></pre> The clip below shows the result where the Merritt Parkway (concurrent with CT-15) ends and the Wilbur Cross Parkway (name but no shield) begins: <img src="https://wiki.openstreetmap.org/w/images/3/37/Ct_parkway_shield.png" alt="Merritt Parkway Shield"> <a id="md:text-layout-functions" class="tsd-anchor"></a><h3><a href="#md:text-layout-functions">Text layout functions</a></h3>Text is laid out on shields in accordance with the specified <code>textLayout</code> value. The text will be drawn, measured, and expanded until it hits the edge of a text layout constraint. For example, an <code>ellipse</code> constraint would fill a padded shield like this, with the text drawn from the center and expanding until it reaches the ellipse: <img src="https://upload.wikimedia.org/wikipedia/commons/7/72/Ellipse_constraint.png" alt="Ellipse constraint"> Not all constraints are center-specified. For example, the <code>southHalfEllipse</code> constraint would grow from the top of the shield as follows: <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/South_half-ellipse_constraint.png" alt="South half-ellipse constraint"> The supported text constraints are: <ul> <li><code>diamond</code></li> <li><code>ellipse</code></li> <li><code>rect</code></li> <li><code>roundedRect</code></li> <li><code>southHalfEllipse</code></li> <li><code>triangleDown</code></li> </ul> <a id="md:defining-drawn-shield-shapes" class="tsd-anchor"></a><h3><a href="#md:defining-drawn-shield-shapes">Defining drawn shield shapes</a></h3>If <code>shapeBlank</code> is specified, the shield will be drawn as a shape. This needs to be specified with a drawing function, <code>drawFunc</code> and a <code>params</code> block the describes how the shape will be drawn. The draw functions are as follows: <table> <thead> <tr> <th></th> <th><code>drawFunc</code></th> </tr> </thead> <tbody><tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/Diamond_highway_shield_shape.svg" alt=""></td> <td><code>diamond</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Black_and_white_circle_shape_as_used_in_highway_shields.svg" alt=""></td> <td><code>ellipse</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Escutcheon_highway_shield_shape.svg" alt=""></td> <td><code>escutcheon</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Fishhead_highway_shield_shape.svg" alt=""></td> <td><code>fishhead</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/6/61/Hexagon_highway_shield_shape.svg" alt=""></td> <td><code>hexagonVertical</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Horizontal_hexagon_shape.svg" alt=""></td> <td><code>hexagonHorizontal</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/f/f8/Octagon_shield_shape.svg" alt=""></td> <td><code>octagonVertical</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Pentagon_shield_shape.svg" alt=""><img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/Black_and_white_home_plate_shape_as_used_in_highway_shields.svg" alt=""></td> <td><code>pentagon</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/archive/1/17/20230326013156%21Pill_shape.svg" alt=""></td> <td><code>pill</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Black_and_white_circle_shape_as_used_in_highway_shields.svg" alt=""><img src="https://upload.wikimedia.org/wikipedia/commons/archive/a/a1/20230326013519%21Rounded_rectangle_shape.svg" alt=""></td> <td><code>roundedRectangle</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Black_and_white_downward_trapezoid_as_used_in_highway_shields.svg" alt=""><img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Black_and_white_upward_trapezoid_as_used_in_highway_shields.svg" alt=""></td> <td><code>trapezoid</code></td> </tr> <tr> <td><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Downward_triangle_highway_shield_shape.svg" alt=""></td> <td><code>triangle</code></td> </tr> </tbody></table> The following <code>params</code> options can be specified: <ul> <li><code>sideAngle</code> - indicates angle (in degrees) at which side edges deviate from vertical. Applies to <code>trapezoid</code>, <code>pentagon</code>, <code>hexagonHorizontal</code>, <code>octagonVertical</code>.</li> <li><code>fill</code> - specifies the internal fill color.</li> <li><code>yOffset</code> - indicates height (in pixels) at which the bottom and/or top edges deviate from horizontal. Applies to <code>escutcheon</code>, <code>pentagon</code>, <code>hexagonVertical</code>, <code>octagonVertical</code>.</li> <li><code>outline</code> - specifies the outline color.</li> <li><code>outlineWidth</code> - specifies the width of the outline.</li> <li><code>pointUp</code> - applies to several shape types and specifies whether the pointy side is up.</li> <li><code>radius</code> - specifies the rounding radius, in pixels, to use for corners.</li> <li><code>radius1</code> - Corner radius of pointed side of pentagon (defaults to 2)</li> <li><code>radius2</code> - Corner radius of flat side of pentagon (defaults to 0)</li> <li><code>shortSideUp</code> - for <code>trapezoid</code> only, a boolean which specifies whether the short side is up or down.</li> </ul> <a id="md:custom-shield-graphics" class="tsd-anchor"></a><h3><a href="#md:custom-shield-graphics">Custom shield graphics</a></h3>In addition to the stock drawing functions, a custom draw function can be specified. <code>paDot</code> and <code>branson</code> are included as examples of this, for rendering the <a href="https://en.wikipedia.org/wiki/Allegheny_County_belt_system">Allegheny County belt system</a> and the Branson, Missouri colored route system. See the file <code>src/custom_shields.mjs</code> for an example of how this is done. <a id="md:documentation" class="tsd-anchor"></a><h2><a href="#md:documentation">Documentation</a></h2>See <a href="https://americanamap.org/shield-docs/index.html">TypeDoc generated documentation</a> for detailed API information. </div></div> <div class="col-sidebar"> <div class="page-menu"> <div class="tsd-navigation settings"> <details class="tsd-index-accordion"><summary class="tsd-accordion-summary"> <h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)" id="icon-chevronDown"></path></svg>Settings</h3></summary> <div class="tsd-accordion-details"> <div class="tsd-filter-visibility"> <h4 class="uppercase">Member Visibility</h4><form> <ul id="tsd-filter-options"> <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Protected</label></li> <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Private</label></li> <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Inherited</label></li> <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>External</label></li></ul></form></div> <div class="tsd-theme-toggle"> <h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div> <details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"> <h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="#icon-chevronDown"></use></svg>On This Page</h3></summary> <div class="tsd-accordion-details"> <ul> <li> <ul> <li><a href="#md:americana-shield-renderer">Americana Shield Renderer</a></li> <li> <ul> <li><a href="#md:shield-rendering-workflow">Shield rendering workflow</a></li> <li><a href="#md:shield-definition">Shield Definition</a></li> <li> <ul> <li><a href="#md:shield-property-descriptions">Shield property descriptions</a></li> <li><a href="#md:handling-special-case-networks">Handling special case networks</a></li> <li><a href="#md:text-layout-functions">Text layout functions</a></li> <li><a href="#md:defining-drawn-shield-shapes">Defining drawn shield shapes</a></li> <li><a href="#md:custom-shield-graphics">Custom shield graphics</a></li></ul></li> <li><a href="#md:documentation">Documentation</a></li></ul></li></ul></li></ul></div></details></div> <div class="site-menu"> <nav class="tsd-navigation"><a href="modules.html" class="current"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><g id="icon-4"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)"></path></g></svg>@americana/maplibre-shield-generator</a> <ul class="tsd-small-nested-navigation"> <li><a href="classes/AbstractShieldRenderer.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><g id="icon-128"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)"></path></g></svg>AbstractShieldRenderer</a></li> <li><a href="classes/ShieldRenderer.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="#icon-128"></use></svg>ShieldRenderer</a></li> <li><a href="classes/URLShieldRenderer.html"><svg class="tsd