Update <my-map> demos; Update keywords in package JSON (#40)

demo/my-map.historic.html

@@ -59,6 +59,9 @@ <h1> Historic Maps </h1>
   "imports": {
     "my-map": "../my.js?my-map",
     "fullScreen": "https://unpkg.com/[email protected]/Control.FullScreen.js"
+  },
+  "myElements": {
+    "use": [ "my-map", "my-codepen-button" ]
   }
 } </script>
 

demo/my-map.html

@@ -6,6 +6,8 @@
 
 <link rel="stylesheet" href="style/app.css" />
 
+<my-codepen-button import="https://unpkg.com/@nfreear/my-map"
+>
 <my-map
   lang="en-Test"
   latlng="51.505,-0.09"
@@ -23,25 +25,27 @@ <h1> my-map Web Component </h1>
   </p>
 
   <p> A map showing London landmarks. </p>
+</my-map>
 
-  <my-code>
-  &lt;my-map
-    latlng="51.505,-0.09"
-    zoom="13"
-    geojson="./data/landmarks.geo.json"
-    >
-    &lt;marker latlng="51.505, -0.09" hidden>Hello, I'm a popup!&lt;/marker>
-
-    &lt;p> Map description &lt;/p>
-  &lt;/my-map>
-</my-code>
+</my-codepen-button>
 
-</my-map>
 
+<script type="importmap">
+{
+  "imports": {
+    "my-map-etc": "../i.js"
+  },
+  "myElements": {
+    "use": [ "my-map", "my-codepen-button" ]
+  }
+}
+</script>
 
-<script type="module" src="./app.js"></script>
+<!-- <script type="module" src="./app.js"></script> -->
 
 <script type="module">
+  import 'my-map-etc';
+
   const myMap = document.querySelector('my-map');
 
   const { L, map } = await myMap.getLeafletMap();

package.json

@@ -2,7 +2,7 @@
   "name": "ndf-elements",
   "x-old-name": "ndf-web-components",
   "version": "1.6.0",
-  "description": "A collection of useful custom elements.",
+  "description": "My collection of useful custom elements.",
   "type": "module",
   "main": "index.js",
   "license": "MIT",
@@ -40,6 +40,11 @@
   },
   "keywords": [
     "ndf-web-components",
+    "my-elements",
+    "my",
+    "my-map",
+    "elements",
+    "MyElement",
     "web components",
     "components",
     "custom elements",

packages/my-map/README.md

@@ -55,7 +55,7 @@ To add copyright links to the `attribution` attribute, use the following short-c
 * `{MT}`  — [MapTiler](https://www.maptiler.com/copyright/),
 * `{NLS}` — [National Library of Scotland](https://maps.nls.uk/projects/api/),
 * `{OSM}` — [OpenStreetMap](https://www.openstreetmap.org/copyright),
-* `{OSC}`  — [Ordnance Survey (Crown ©)][oslegal] ([OS API][]),
+* `{OSC}` — [Ordnance Survey (Crown ©)][oslegal] ([OS API][]),
 * `{TF}`  — [ThunderForest](https://www.thunderforest.com/),
 
 ## License
@@ -68,7 +68,7 @@ To add copyright links to the `attribution` attribute, use the following short-c
 [wc-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
 [leaflet-img]: https://img.shields.io/badge/leaflet-1.9.4-green.svg?style=flat
 [codepen]: https://codepen.io/nfreear/pen/KKeJKov
-[demo]: https://nfreear.github.io/elements/demo/
+[demo]: https://nfreear.github.io/elements/demo/my-map.html
 [mit]: https://github.com/nfreear/elements/blob/main/LICENSE.txt
 [npm]: https://www.npmjs.com/package/@nfreear/my-map
 [npm-img]: https://img.shields.io/npm/v/%40nfreear/my-map

packages/my-map/package.json

@@ -7,7 +7,7 @@
   "module": "index.js",
   "author": "Nick Freear",
   "license": "MIT",
-  "homepage": "https://nfreear.github.io/elements/demo/",
+  "homepage": "https://nfreear.github.io/elements/demo/my-map.html",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nfreear/elements.git"
@@ -19,6 +19,8 @@
     "leaflet",
     "leafletjs",
     "map",
+    "my-elements",
+    "ndf-elements",
     "web components",
     "components",
     "custom elements",

src/components/MyMapElement.js

@@ -6,8 +6,8 @@
  *
  * @copyright © Nick Freear, 27-Nov-2021.
  *
- * @see https://codepen.io/nfreear/pen/KKeJKov
  * @see ../demo/my-map.html
+ * @see https://codepen.io/nfreear/pen/KKeJKov
  * @see https://leafletjs.com/
  *
  * @status beta