@prushforth/map 1.0.0-preview.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Natural Resources Canada
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# `<gcds-ext-map>`
+
+A Government of Canada Design System (GCDS) extension map component that provides an accessible, standards-based web map viewer using [MapML](https://geo.ca/initiatives/mapml/).
+
+## Installation
+
+Install and use locally:
+
+```bash
+npm install @prushforth/map @gcds-core/components
+```
+
+`@gcds-core/components` is a peer dependency and must be installed alongside this package.
+
+## Verify your installation
+
+Run:
+
+```bash
+npx http-server node_modules/@prushforth/map -p 8080 -c-1
+```
+
+Open http://localhost:8080/demo/ — you should see an interactive map.
+
+## Usage
+
+### Basic Example
+
+```html
+
+<!-- If installed via npm, reference the files from your node_modules folder.
+     Paths shown are relative to a page at your project root: -->
+      <script type="module" src="node_modules/@prushforth/map/dist/gcds-ext-map/gcds-ext-map.esm.js"></script>
+      <!-- Optionally, to use the full GCDS component system, also include: -->
+      <script type="module" src="node_modules/@gcds-core/components/dist/gcds/gcds.esm.js"></script>
+      <link rel="stylesheet" href="node_modules/@gcds-core/components/dist/gcds/gcds.css">
+
+<!--
+    A CDN distribution is planned but NOT yet available for this preview release.
+    Once published, the CDN tags will look like this:
+      <script type="module" src="https://cdn.design-system.canada.ca/@gcds-extensions/map@latest/dist/gcds-ext-map.esm.js"></script>
+      <link rel="stylesheet" href="https://cdn.design-system.canada.ca/@gcds-core/components@latest/dist/gcds/gcds.css">
+      <script type="module" src="https://cdn.design-system.canada.ca/@gcds-core/components@latest/dist/gcds/gcds.esm.js"></script>
+-->
+
+<!-- important: use CSS to define the width and height of the map (default size is quite small!) -->
+<gcds-ext-map projection="CBMTILE" lat="45.4215" lon="-75.6972" zoom="10" style="width: 60%; height: 400px">
+  <map-layer checked>
+    <map-title>Canada Base Map - Transportation (CBMT)</map-title>
+    <map-link rel="license" href="https://open.canada.ca/en/open-government-licence-canada" title="Open Government Licence - Canada"></map-link>
+    <map-link rel="suggestions" tref="https://geolocator.api.geo.ca/?q={searchTerms}&lang=en&keys=geonames"></map-link>
+    <map-link rel="search" tref="https://geolocator.api.geo.ca/?q={searchTerms}&lang=en&keys=geonames"></map-link>
+    <map-extent units="CBMTILE" checked hidden>
+      <map-input name="z" type="zoom" value="22" min="0" max="22"></map-input>
+      <map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-3262924.7" max="3823954.0"></map-input>
+      <map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-1554977.6" max="4046262.8"></map-input>
+      <map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-3262924.7" max="3823954.0"></map-input>
+      <map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-1554977.6" max="4046262.8"></map-input>
+      <map-input name="w" type="width"></map-input>
+      <map-input name="h" type="height"></map-input>
+      <map-link rel="image" tref="https://geogratis.gc.ca/maps/CBMT?SERVICE=WMS&VERSION=1.1.1&SRS=EPSG:3978&LAYERS=CBMT&BBOX={xmin},{ymin},{xmax},{ymax}&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=TRUE&WIDTH={w}&HEIGHT={h}&STYLES="></map-link>
+    </map-extent>
+  </map-layer>
+</gcds-ext-map>
+```
+
+See [the map components documentation](https://nrcan.github.io/gcds-ext-map/en/components/map-components/) for further usage examples.
+
+## Architecture
+
+The `<gcds-ext-map>` component replaces the usage of the `<mapml-viewer>` element. See the [MapML documentation](https://maps4html.org/web-map-doc/) for how to use MapML. When using GCDS, you use `<gcds-ext-map>` in place of `<mapml-viewer>` (it supports all the same attributes). All other MapML elements work as described.
+
+`<gcds-ext-map>` and associated MapML children are implemented as Stencil components, like other GCDS components.  `<gcds-ext-map>` is
+a self-contained component that renders map content in a shadow root, and does not expose slots for including content besides 
+what is rendered on the map.
+
+## Accessibility
+
+The `<gcds-ext-map>` component includes several accessibility features:
+- Keyboard navigation
+- Screen reader support
+- ARIA labels and descriptions
+- Focus management
+
+If you notice things that could be improved, please [open an issue](https://github.com/gcds-extensions/map/issues/new).
+
+## License
+
+MIT License

package/demo/index.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<!--
+  ============================================================================
+  RELEASE ARTIFACT — DO NOT edit paths casually.
+
+  This file is shipped inside the published @gcds-extensions/gcds-ext-map
+  package.  After a consumer runs `npm install @gcds-extensions/gcds-ext-map`
+  it lands at:
+
+      <consumer-project>/node_modules/@gcds-extensions/gcds-ext-map/demo/index.html
+
+  All resource paths here are RELATIVE and computed from THAT install
+  location — not from this repo's src/www layout.  They are intentionally
+  different from src/index.html (which uses /build/... paths for the Stencil
+  dev server) and must not be unified with it.
+
+  Path map (from demo/index.html inside node_modules):
+    ../dist/gcds-ext-map/...............  this package's own build output
+    ../../../@gcds-core/components/....   sibling peer-dep package in node_modules
+                                          ( demo/  -> gcds-ext-map/  -> @gcds-extensions/
+                                            -> node_modules/  ->  @gcds-core/components/ )
+
+  Consumer serve command (documented in README):
+      npx http-server node_modules -p 8080 -c-1
+      then open http://localhost:8080/@gcds-extensions/gcds-ext-map/demo/
+  ============================================================================
+-->
+<html dir="ltr" lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>&lt;gcds-ext-map&gt; component - composant</title>
+
+    <!-- gcds-ext-map component (this project's build output) -->
+    <script type="module" src="../dist/gcds-ext-map/gcds-ext-map.esm.js"></script>
+    <!-- Optionally, to use the full GCDS component system, also include: -->
+    <script type="module" src="../../../@gcds-core/components/dist/gcds/gcds.esm.js"></script>
+    <link rel="stylesheet" href="../../../@gcds-core/components/dist/gcds/gcds.css">
+
+    <style>gcds-ext-map { display: block; width: 100%; height: 400px;}</style>
+
+  </head>
+  <body>
+    <gcds-container size="xl" main-container centered tag="main">
+
+      <gcds-heading tag="h4">&lt;gcds-ext-map&gt; composant de carte </gcds-heading>
+
+      <gcds-ext-map id="map" width="640" height="480" lat="45.4215" lon="-75.6972" zoom="10" projection="CBMTILE" controls controlslist="search">
+        <map-layer checked src="../dist/gcds-ext-map/assets/mapml/fr/cbmtile/cbmt"></map-layer>
+      </gcds-ext-map>
+
+      <gcds-heading tag="h4">&lt;gcds-ext-map&gt; map component</gcds-heading>
+      <gcds-ext-map lang="en" id="map2" width="640" height="480" lat="45.4215" lon="-75.6972" zoom="10" projection="OSMTILE" controls controlslist="search">
+        <map-layer checked src="../dist/gcds-ext-map/assets/mapml/en/osmtile/cbmt"></map-layer>
+      </gcds-ext-map>
+
+      <gcds-heading tag="h2">Button</gcds-heading>
+
+        <gcds-button button-role="danger">Primary</gcds-button>
+
+      <gcds-heading tag="h2">Input</gcds-heading>
+
+        <gcds-input input-id="form-name" label="Name" hint="Please enter your full name."></gcds-input>
+
+      <gcds-heading tag="h2">Header</gcds-heading>
+
+      <gcds-header>
+        <gcds-search slot="search"></gcds-search>
+        <gcds-topic-menu slot="menu"></gcds-topic-menu>
+        <gcds-breadcrumbs slot="breadcrumb">
+          <gcds-breadcrumbs-item href="#">Design System</gcds-breadcrumbs-item>
+          <gcds-breadcrumbs-item href="#">Components</gcds-breadcrumbs-item>
+        </gcds-breadcrumbs>
+      </gcds-header>
+
+    </gcds-container>
+  </body>
+</html>

package/dist/cjs/AttributionButton-DgbgLHy4.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var ContextMenu = require('./index-CW_WOSnc.js');
+
+var AttributionButton = ContextMenu.leafletSrcExports.Control.Attribution.extend({
+  _getLocale: function () {
+    return this.options.mapEl && this.options.mapEl.locale
+      ? this.options.mapEl.locale
+      : M.options.locale;
+  },
+  onAdd: function (map) {
+    map.attributionControl = this;
+    this._container = ContextMenu.leafletSrcExports.DomUtil.create('details', 'leaflet-control-attribution');
+    ContextMenu.leafletSrcExports.DomEvent.disableClickPropagation(this._container);
+
+    for (var i in map._layers) {
+      if (map._layers[i].getAttribution) {
+        this.addAttribution(map._layers[i].getAttribution());
+      }
+    }
+
+    this._update();
+
+    map.on('layeradd', this._addAttribution, this);
+
+    let dialog = document.createElement('dialog');
+    dialog.setAttribute('class', 'shortcuts-dialog');
+    dialog.setAttribute('autofocus', '');
+    dialog.onclick = function (e) {
+      e.stopPropagation();
+    };
+    let locale = this._getLocale();
+    dialog.innerHTML =
+      `<b>${locale.kbdShortcuts} </b><button aria-label="Close" onclick='this.parentElement.close()'><span class="gcds-icon-close" aria-hidden="true"></span></button>` +
+      `<ul><b>${locale.kbdMovement}</b><li><kbd>&#8593</kbd> ${locale.kbdPanUp}</li><li><kbd>&#8595</kbd> ${locale.kbdPanDown}</li><li><kbd>&#8592</kbd> ${locale.kbdPanLeft}</li><li><kbd>&#8594</kbd> ${locale.kbdPanRight}</li><li><kbd>+</kbd> ${locale.btnZoomIn}</li><li><kbd>-</kbd> ${locale.btnZoomOut}</li><li><kbd>shift</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 3x ${locale.kbdPanIncrement}</li><li><kbd>ctrl</kbd> + <kbd>&#8592/&#8593/&#8594/&#8595</kbd> 0.2x ${locale.kbdPanIncrement}</li><li><kbd>shift</kbd> + <kbd>+/-</kbd> ${locale.kbdZoom}</li></ul>` +
+      `<ul><b>${locale.kbdFeature}</b><li><kbd>&#8592/&#8593</kbd> ${locale.kbdPrevFeature}</li><li><kbd>&#8594/&#8595</kbd> ${locale.kbdNextFeature}</li></ul>`;
+    map._container.appendChild(dialog);
+
+    return this._container;
+  },
+
+  _update: function () {
+    if (!this._map) {
+      return;
+    }
+
+    var attribs = [];
+
+    for (var i in this._attributions) {
+      if (this._attributions[i]) {
+        attribs.push(i);
+      }
+    }
+
+    var prefixAndAttribs = [];
+
+    if (this.options.prefix) {
+      prefixAndAttribs.push(this.options.prefix);
+    }
+    if (attribs.length) {
+      prefixAndAttribs.push(attribs.join(', '));
+    }
+    let locale = this._getLocale();
+    this._container.innerHTML =
+      `<summary><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></summary>` +
+      '<div class="mapml-attribution-container">' +
+      `<button onclick="this.closest(\'.leaflet-container\').querySelector(\'.shortcuts-dialog\').showModal()" class="shortcuts-button mapml-button">${locale.kbdShortcuts}</button> | ` +
+      prefixAndAttribs.join(' <span aria-hidden="true">|</span> ') +
+      '</div>';
+    this._container.setAttribute('role', 'group');
+    this._container.setAttribute('aria-label', `${locale.btnAttribution}`);
+  }
+});
+
+ContextMenu.leafletSrcExports.Map.mergeOptions({
+  attributionControl: false,
+  toggleableAttributionControl: true
+});
+
+ContextMenu.leafletSrcExports.Map.addInitHook(function () {
+  if (this.options.toggleableAttributionControl) {
+    attributionButton({ mapEl: this.options.mapEl }).addTo(this);
+  }
+});
+
+var attributionButton = function (opts) {
+  // Inline the Canada flag icon as data URL to avoid asset path resolution issues
+  const flagIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE1NS4zOCA3NS4wMSI+PHBhdGggZD0iTTAsMCAzNi44NCwwIDM2Ljg0LDc1LjAxIDAsNzUuMDF6IE0xMTguNTQsMCAxNTUuMzgsMCAxNTUuMzgsNzUuMDEgMTE4LjU0LDc1LjAxeiBNNzIuNTgsMTUuNjEsNzcuODQsNC45bDUuMjIsMTAuMzJjLjY1LDEuMDksMS4xOCwxLDIuMjIuNDhsNC40OS0yLjIyTDg2Ljg1LDI3Ljg5Yy0uNjEsMi44MywxLDMuNjYsMi43NSwxLjc0TDk2LDIyLjc5bDEuNywzLjg3Yy41NywxLjE3LDEuNDMsMSwyLjU3Ljc5bDYuNjEtMS4zOS0yLjIyLDguMzUsMCwuMThjLS4yNiwxLjA5LS43OCwyLC40NCwyLjUzbDIuMzUsMS4xN0w5My43Nyw0OS44MmMtMS4zOSwxLjQzLS45MSwxLjg3LS4zOSwzLjQ4bDEuMjYsMy44Ny0xMi43MS0yLjNjLTEuNTctLjM5LTIuNjYtLjM5LTIuNy44N2wuNTIsMTQuNThINzUuOTNsLjUyLTE0LjU0YzAtMS40My0xLjA5LTEuMzktMy42Ni0uODZMNjEsNTcuMThsMS41Mi0zLjg3Yy41Mi0xLjQ4LjY2LTIuNDgtLjUyLTMuNDhMNDguMTEsMzguNDZsMi41Ny0xLjU3Yy43NC0uNTcuNzgtMS4xNy4zOS0yLjQ0TDQ4LjQ2LDI2bDYuNywxLjQzYzEuODcuNDQsMi4zOSwwLDIuODctMWwxLjg3LTMuODNMNjYuNTIsMzBjMS4xNywxLjM5LDIuODMuNDgsMi4zMS0xLjUyTDY1LjY1LDEyLjg2bDQuOTIsMi44M2MuNzguNDgsMS42MS42MSwyLjA5LS4zIiBmaWxsPSIjRUIyRDM3Ii8+PC9zdmc+';
+  const isFr = opts.mapEl && opts.mapEl.closest && opts.mapEl.closest(':lang(fr)') === opts.mapEl;
+  const gcdsHref = isFr
+    ? 'https://nrcan.github.io/gcds-ext-map/fr/composants/composants-de-carte/'
+    : 'https://nrcan.github.io/gcds-ext-map/en/components/map-components/';
+  const gcdsLabel = isFr
+    ? 'Système de design GC - Cartes'
+    : 'GC Design System - Maps';
+  const gcdsAlt = isFr
+    ? 'Système de design du gouvernement du Canada - Cartes'
+    : 'Government of Canada Design System - Maps';
+  const options = Object.assign(opts, {
+    prefix: `<img src="${flagIcon}" style="position: relative; top: 2px" alt="${gcdsAlt}"> <a href="${gcdsHref}">${gcdsLabel}</a> `
+  });
+  return new AttributionButton(options);
+};
+
+exports.AttributionButton = AttributionButton;
+exports.attributionButton = attributionButton;