@americana/diplomat 0.1.0

package/LICENSE

@@ -0,0 +1,121 @@
+Creative Commons Legal Code
+
+CC0 1.0 Universal
+
+    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE
+    LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN
+    ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS
+    INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES
+    REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS
+    PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM
+    THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED
+    HEREUNDER.
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator
+and subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for
+the purpose of contributing to a commons of creative, cultural and
+scientific works ("Commons") that the public can reliably and without fear
+of later claims of infringement build upon, modify, incorporate in other
+works, reuse and redistribute as freely as possible in any form whatsoever
+and for any purposes, including without limitation commercial purposes.
+These owners may contribute to the Commons to promote the ideal of a free
+culture and the further production of creative, cultural and scientific
+works, or to gain reputation or greater distribution for their Work in
+part through the use and efforts of others.
+
+For these and/or other purposes and motivations, and without any
+expectation of additional consideration or compensation, the person
+associating CC0 with a Work (the "Affirmer"), to the extent that he or she
+is an owner of Copyright and Related Rights in the Work, voluntarily
+elects to apply CC0 to the Work and publicly distribute the Work under its
+terms, with knowledge of his or her Copyright and Related Rights in the
+Work and the meaning and intended legal effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not
+limited to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display,
+     communicate, and translate a Work;
+ ii. moral rights retained by the original author(s) and/or performer(s);
+iii. publicity and privacy rights pertaining to a person's image or
+     likeness depicted in a Work;
+ iv. rights protecting against unfair competition in regards to a Work,
+     subject to the limitations in paragraph 4(a), below;
+  v. rights protecting the extraction, dissemination, use and reuse of data
+     in a Work;
+ vi. database rights (such as those arising under Directive 96/9/EC of the
+     European Parliament and of the Council of 11 March 1996 on the legal
+     protection of databases, and under any national implementation
+     thereof, including any amended or successor version of such
+     directive); and
+vii. other similar, equivalent or corresponding rights throughout the
+     world based on applicable law or treaty, and any national
+     implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention
+of, applicable law, Affirmer hereby overtly, fully, permanently,
+irrevocably and unconditionally waives, abandons, and surrenders all of
+Affirmer's Copyright and Related Rights and associated claims and causes
+of action, whether now known or unknown (including existing as well as
+future claims and causes of action), in the Work (i) in all territories
+worldwide, (ii) for the maximum duration provided by applicable law or
+treaty (including future time extensions), (iii) in any current or future
+medium and for any number of copies, and (iv) for any purpose whatsoever,
+including without limitation commercial, advertising or promotional
+purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each
+member of the public at large and to the detriment of Affirmer's heirs and
+successors, fully intending that such Waiver shall not be subject to
+revocation, rescission, cancellation, termination, or any other legal or
+equitable action to disrupt the quiet enjoyment of the Work by the public
+as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason
+be judged legally invalid or ineffective under applicable law, then the
+Waiver shall be preserved to the maximum extent permitted taking into
+account Affirmer's express Statement of Purpose. In addition, to the
+extent the Waiver is so judged Affirmer hereby grants to each affected
+person a royalty-free, non transferable, non sublicensable, non exclusive,
+irrevocable and unconditional license to exercise Affirmer's Copyright and
+Related Rights in the Work (i) in all territories worldwide, (ii) for the
+maximum duration provided by applicable law or treaty (including future
+time extensions), (iii) in any current or future medium and for any number
+of copies, and (iv) for any purpose whatsoever, including without
+limitation commercial, advertising or promotional purposes (the
+"License"). The License shall be deemed effective as of the date CC0 was
+applied by Affirmer to the Work. Should any part of the License for any
+reason be judged legally invalid or ineffective under applicable law, such
+partial invalidity or ineffectiveness shall not invalidate the remainder
+of the License, and in such case Affirmer hereby affirms that he or she
+will not (i) exercise any of his or her remaining Copyright and Related
+Rights in the Work or (ii) assert any associated claims and causes of
+action with respect to the Work, in either case contrary to Affirmer's
+express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+ a. No trademark or patent rights held by Affirmer are waived, abandoned,
+    surrendered, licensed or otherwise affected by this document.
+ b. Affirmer offers the Work as-is and makes no representations or
+    warranties of any kind concerning the Work, express, implied,
+    statutory or otherwise, including without limitation warranties of
+    title, merchantability, fitness for a particular purpose, non
+    infringement, or the absence of latent or other defects, accuracy, or
+    the present or absence of errors, whether or not discoverable, all to
+    the greatest extent permissible under applicable law.
+ c. Affirmer disclaims responsibility for clearing rights of other persons
+    that may apply to the Work or any use thereof, including without
+    limitation any person's Copyright and Related Rights in the Work.
+    Further, Affirmer disclaims responsibility for obtaining any necessary
+    consents, permissions or other rights required for any use of the
+    Work.
+ d. Affirmer understands and acknowledges that Creative Commons is not a
+    party to this document and has no duty or obligation with respect to
+    this CC0 or use of the Work.

package/README.md

@@ -0,0 +1,209 @@
+# Diplomat
+
+Diplomat prepares your interactive map for an international audience. With a few lines of code, your [MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js/)–powered map will speak the user’s preferred language while informing them about local languages the world over.
+
+| Before                                                                                                                  | After                                                                                                                                                                                   |
+| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img src="docs/navajo-nation.png" width="400" alt="Navajo Nation;Naabeehó Bináhásdzo">                                  | [<img src="docs/navajo-nation-es.png" width="400" alt="Nación Navajo (Navajo Nation • Naabeehó Bináhásdzo)">](https://americanamap.org/#map=9/36.2134/-109.2837&language=es)            |
+| <img src="docs/north-sea.png" width="400" alt="North Sea / Nordsee / Noordzee / Nordsøen / Nordsjøen / Mer du Nord">    | [<img src="docs/north-sea-la.png" width="400" alt="Mare Germanicum">](https://americanamap.org/#map=4/56/3&language=la)                                                                 |
+| <img src="docs/section-ross.png" width="400" alt="Ross Avenue;Tennesssee Avenue at Rhode Island Avenue;Section Avenue"> | [<img src="docs/section-ross-en.png" width="400" alt="Ross Avenue • Tennesssee Avenue at Rhode Island Avenue • Section Avenue">](https://americanamap.org/#map=17/39.168568/-84.460075) |
+
+## Requirements
+
+Diplomat is compatible with applications using MapLibre GL&nbsp;JS v5.13.0 and above.
+
+The stylesheet must use the newer [expression](https://maplibre.org/maplibre-style-spec/expressions/) syntax; [legacy style functions](https://maplibre.org/maplibre-style-spec/deprecations/#function) are not supported. The stylesheet’s sources must conform to [Diplomat’s schema](#schema). Several popular vector tilesets already conform to this schema, including:
+
+- [OpenMapTiles](https://openmaptiles.org/schema/) implementations, e.g., [MapTiler](https://cloud.maptiler.com/tiles/v3-openmaptiles/), [OpenFreeMap](https://openfreemap.org/), and [OpenStreetMap U.S.](https://tiles.openstreetmap.us/vector/openmaptiles/)
+- [Tilezen](https://tilezen.readthedocs.io/en/latest/layers/) implementations, e.g., [Protomaps](https://protomaps.com/)
+
+## Installation
+
+<!-- This plugin is available as [an NPM package](https://www.npmjs.com/package/@americana/diplomat). To install it, run the following command:
+
+```sh
+npm install @americana/diplomat
+```
+
+Alternatively, you can include the plugin as a standalone script from a CDN such as [unpkg](https://unpkg.com/@americana/diplomat/index.js). -->
+
+## Usage
+
+After creating an instance of `maplibregl.Map`, register an event listener for the `styledata` event that localizes the map:
+
+```js
+map.once("styledata", (event) => {
+  // Prepare layers to be localized.
+  map.setLayoutProperty(
+    "country-labels",
+    "text-field",
+    maplibregl.Diplomat.localizedName
+  );
+  map.setLayoutProperty(
+    "city-labels",
+    "text-field",
+    maplibregl.Diplomat.localizedNameWithGloss
+  );
+  map.setLayoutProperty(
+    "road-labels",
+    "text-field",
+    maplibregl.Diplomat.localizedNameInline
+  );
+
+  // Localize the layers.
+  const locales = maplibregl.Diplomat.getLocales();
+  const style = map.getStyle();
+  map.localizeLayers(style.layers, locales);
+  map.setStyle(style);
+});
+```
+
+If you set the `hash` option to a string when creating the `Map`, you can have this code respond to a `language` parameter in the URL hash. Add a window event listener for whenever the hash changes, in order to update the layers:
+
+```js
+addEventListener("hashchange", (event) => {
+  let oldLanguage = maplibregl.Diplomat.getLanguageFromURL(
+    new URL(event.oldURL)
+  );
+  let newLanguage = maplibregl.Diplomat.getLanguageFromURL(
+    new URL(event.newURL)
+  );
+
+  if (oldLanguage !== newLanguage) {
+    let locales = maplibregl.Diplomat.getLocales();
+    let style = map.getStyle();
+    map.localizeLayers(style.layers, locales);
+    map.setStyle(style);
+  }
+});
+```
+
+> [!NOTE]
+> By default, MapLibre GL&nbsp;JS does not support bidirectional text. Arabic, Hebrew, and other right-to-left languages will be unreadable unless you [install the mapbox-gl-rtl-text plugin](https://maplibre.org/maplibre-gl-js/docs/examples/add-support-for-right-to-left-scripts/).
+
+## Schema
+
+Diplomat can manipulate any GeoJSON or vector tile source, as long as it includes the following properties on each feature:
+
+- **`name`** (`string`): The name in the local or official language.
+- **<code>name:<var>xyz</var></code>** (`string`): The name in another language, where <var>xyz</var> is a valid [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). For example, <code>name:zh</code> for Chinese, <code>name:zh-Hant</code> for Traditional Chinese, <code>name:zh-Hant-TW</code> for Traditional Chinese (Taiwan), and <code>name:zh-Latn-pinyin</code> for Chinese in pinyin.
+
+For compatibility with the [OpenMapTiles](https://openmaptiles.org/schema/) schema, `name_en` and `name_de` are also recognized as alternatives to `name:en` and `name:de` for English and German, respectively, but only in the `transportation_name` layer. For performance reasons, this format is not supported for any other language or layer.
+
+Each of the supported properties may be set to a list of values separated by [semicolons](https://wiki.openstreetmap.org/wiki/Semi-colon_value_separator). For example, if a place speaks both English and French, `name` should be `English Name;French Name`. Similarly, if a landmark has three equally common names in Spanish, regardless of dialect, `name:es` should be `Nombre Uno;Nombre Dos;Nombre Tres`. In the rare case that a single name contains a semicolon, it should be escaped as a double semicolon (`;;`).
+
+## API
+
+This plugin adds several constants to a `maplibregl.Diplomat` namespace and adds a single method to each instance of `maplibregl.Map`.
+
+### `maplibregl.Diplomat.localizedName`
+
+An expression that produces the names in the user's preferred language, each on a separate line.
+
+This expression is appropriate for labeling a type of feature that almost always has a familiar translation in the user’s preferred language, such as the name of a country. It is also appropriate for minor features like points of interest, for which an extra local-language gloss would clutter the map.
+
+Example:
+
+```js
+map.setLayoutProperty(
+  "country-labels",
+  "text-field",
+  maplibregl.Diplomat.localizedName
+);
+```
+
+### `maplibregl.Diplomat.localizedNameInline`
+
+An expression that produces the names in the user's preferred language, all on the same line.
+
+This expression is appropriate for labeling a linear feature, such as a road or waterway. The symbol layer’s [`symbol-placement`](https://maplibre.org/maplibre-style-spec/layers/#symbol-placement) layout property should be set to either `line` or `line-center`.
+
+Example:
+
+```js
+map.setLayoutProperty(
+  "road-labels",
+  "text-field",
+  maplibregl.Diplomat.localizedNameInline
+);
+```
+
+### `maplibre.Diplomat.localizedNameWithLocalGloss`
+
+An expression that produces the name in the user's preferred language, followed by the name in the local language in parentheses if it differs.
+
+This expression is appropriate for labeling a type of feature that is only sometimes translated into user’s preferred language, such as the name of a city or town. The extra local-language gloss respects local customs and keeps the user informed, but it can also risk [information overload](https://en.wikipedia.org/wiki/Information_overload) and crowd out other useful labels.
+
+Example:
+
+```js
+map.setLayoutProperty(
+  "city-labels",
+  "text-field",
+  maplibregl.Diplomat.localizedNameWithGloss
+);
+```
+
+### `maplibregl.Diplomat.getCountryName()`
+
+Returns an expression that converts the given country code to a human-readable name in the user's preferred language.
+
+This method is useful for stylesheets powered by OpenMapTiles, which only provides the ISO&nbsp;3166-1 alpha-3 code of the country on either side of a boundary, but not the full country name in any language.
+
+Parameters:
+
+- **`code`** (`string`): An expression that evaluates to an ISO&nbsp;3166-1 alpha-3 country code.
+
+Example:
+
+```js
+map.setLayoutProperty(
+  "boundary-edge-labels",
+  "text-field",
+  getCountryName(["get", "adm0_l"])
+);
+```
+
+### `maplibregl.Diplomat.getLocales()`
+
+Returns the languages that the user prefers.
+
+Example:
+
+```js
+maplibregl.Diplomat.getLocales().includes("en");
+```
+
+### `maplibregl.Map.prototype.localizeLayers()`
+
+Updates localizable variables at the top level of each layer's `text-field` expression based on the given locales.
+
+Parameters:
+
+- **`layers`** (`[object]`): The style layers to localize.
+- **`locales`** (`[string]`): The locales to insert into each layer, as a comma-separated list of [IETF language tags](https://en.wikipedia.org/wiki/IETF_language_tag). Uses the `language` URL hash parameter or browser preferences by default.
+
+> [!NOTE]
+> This method modifies the `layers` structure in place. If it comes from the return value of [`maplibregl.Map.prototype.getStyle()`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#getstyle), you must manually synchronize the layers with the style afterwards by calling [`maplibregl.Map.prototype.setStyle()`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#setstyle).
+
+Example:
+
+```js
+const style = map.getStyle();
+map.localizeLayers(style.layers, locales);
+map.setStyle(style);
+```
+
+## Caveats
+
+Diplomat only switches between languages that are present in the stylesheet’s data sources. It does not fetch translations from other sources or generate its own transliterations. By convention, [OpenStreetMap’s coverage in some regions](https://wiki.openstreetmap.org/wiki/Multilingual_names) is largely limited to locally spoken languages. If you need more comprehensive coverage in a given language, consider using a tileset that combines names from OpenStreetMap and Wikidata, such as the [OpenStreetMap U.S. Tileservice](https://tiles.openstreetmap.us/vector/openmaptiles/).
+
+By default, MapLibre GL&nbsp;JS does not support bidirectional text. Arabic, Hebrew, and other right-to-left languages will be unreadable unless you [install the mapbox-gl-rtl-text plugin](https://maplibre.org/maplibre-gl-js/docs/examples/add-support-for-right-to-left-scripts/).
+
+Diplomat only performs basic language fallbacks according to the [ICU locale fallback algorithm](https://unicode-org.github.io/icu/userguide/locale/#fallback). It makes no attempt to fallback to a related but distinct language code, for example from `sr-Cyrl` to `ru` or from `nb` to `no`. Instead, the user can [set their preferred languages](https://www.w3.org/International/questions/qa-lang-priorities) in their browser or operating system settings.
+
+For historical reasons, [OpenStreetMap’s coverage in many reasons](https://wiki.openstreetmap.org/wiki/Multilingual_names) encodes multiple local names separated by human-readable punctuation. Diplomat makes no attempt to guess which punctuation is part of a name and which punctuation delimits two names.
+
+## Acknowledgments
+
+This plugin was spun out of the [OpenStreetMap Americana](https://github.com/osm-americana/openstreetmap-americana/) project. It was originally inspired by [Mapbox GL Language](https://github.com/mapbox/mapbox-gl-language/).

package/dist/example/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>MapLibre GL Diplomat</title>
+    <script
+      src="https://unpkg.com/maplibre-gl@%5E5.13.0/dist/maplibre-gl.js"
+      type="text/javascript"
+    ></script>
+    <script src="../index.js" type="text/javascript"></script>
+    <script src="./index.js" type="text/javascript"></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/maplibre-gl@%5E5.13.0/dist/maplibre-gl.css"
+    />
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      html,
+      body,
+      #map {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+  </body>
+</html>

package/dist/example/index.js

@@ -0,0 +1,75 @@
+addEventListener("load", () => {
+  window.map = new maplibregl.Map({
+    container: "map",
+    hash: "map",
+    style: {
+      version: 8,
+      glyphs: "https://font.americanamap.org/{fontstack}/{range}.pbf",
+      sources: {
+        openmaptiles: {
+          type: "vector",
+          url: "https://tiles.openstreetmap.us/vector/openmaptiles.json",
+        },
+      },
+      layers: [
+        {
+          type: "symbol",
+          id: "road-labels",
+          source: "openmaptiles",
+          "source-layer": "transportation_name",
+          layout: {
+            "symbol-placement": "line",
+            "text-field": maplibregl.Diplomat.localizedNameInline,
+            "text-font": ["Americana"],
+          },
+        },
+        {
+          type: "symbol",
+          id: "place-labels",
+          source: "openmaptiles",
+          "source-layer": "place",
+          layout: {
+            "text-field": ["get", "name"],
+            "text-font": ["Americana-Bold"],
+          },
+        },
+      ],
+    },
+  });
+
+  map.addControl(new maplibregl.NavigationControl(), "top-left");
+  map.addControl(new maplibregl.FullscreenControl(), "top-left");
+
+  maplibregl.setRTLTextPlugin(
+    "https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",
+    true
+  );
+
+  map.once("styledata", (event) => {
+    map.setLayoutProperty(
+      "place-labels",
+      "text-field",
+      maplibregl.Diplomat.localizedName
+    );
+    let locales = maplibregl.Diplomat.getLocales();
+    let style = map.getStyle();
+    map.localizeLayers(style.layers, locales);
+    map.setStyle(style);
+  });
+
+  addEventListener("hashchange", (event) => {
+    let oldLanguage = maplibregl.Diplomat.getLanguageFromURL(
+      new URL(event.oldURL)
+    );
+    let newLanguage = maplibregl.Diplomat.getLanguageFromURL(
+      new URL(event.newURL)
+    );
+    if (oldLanguage !== newLanguage) {
+      let locales = maplibregl.Diplomat.getLocales();
+      console.log(`Changed to ${locales}`);
+      let style = map.getStyle();
+      map.localizeLayers(style.layers, locales);
+      map.setStyle(style);
+    }
+  });
+});