fix: Switch from separate template file to local template (#40)

src/components/MyMapElement.js

@@ -21,7 +21,7 @@ const { fetch } = window;
 const LEAFLET_CDN_LIBS = [
   'https://unpkg.com/[email protected]/dist/leaflet.js',
   'https://unpkg.com/[email protected]/Leaflet.i18n.js',
-  'https://unpkg.com/leaflet.translate@0.2.0/Leaflet.translate.js',
+  'https://unpkg.com/leaflet.translate@0.3.0/Leaflet.translate.js',
   'https://unpkg.com/[email protected]/Leaflet.a11y.js'
 ];
 
@@ -30,24 +30,60 @@ const DEF = {
   // Greenwich Observatory, London, UK. (Was: Central London 51.505,-0.09)
   lat: 51.476852,
   long: -0.000500,
-  zoom: 14,
+  zoom: 13, // Was 14
   // See: github:Leaflet/Leaflet/pull/8418 (Was: 'https://{s}.tile.op..')
   osmTileUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
 };
 
+const TEMPLATE = `
+<template>
+<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+  crossorigin=""/>
+<style>
+.map-desc {
+  color: #333;
+  font: 1rem sans-serif;
+  max-width: 35rem;
+  margin: 0 auto;
+}
+#my-map {
+  border: 1px solid #ddd;
+  border-radius: .2rem;
+  height: 82vh; /* Was: 78 vh */
+  max-height: 540px;
+  min-height: 180px;
+}
+.my-loading {
+  font-size: 1.3rem;
+  margin: 1.3rem;
+}
+.leaflet-marker-icon {
+  border: 1px solid var(--marker-color, navy);
+  border-radius: 5px;
+}
+</style>
+<div id="desc" class="map-desc"><slot> Description of the map. </slot></div>
+<div id="my-map" role="region" aria-describedby="desc">
+  <p class="my-loading">Loading map…</p>
+</div>
+</template>
+`;
+
 export class MyMapElement extends MyElement {
   static getTag () {
     return 'my-map';
   }
 
   get lang () { return this.getAttribute('lang') || ''; }
 
-  async getLeaflet () {
-    return await this._whenReady(() => this.$$.L, 'getLeaflet');
-  }
-
-  async getMap () {
+  /* async getMap () {
     return await this._whenReady(() => this.$$.map, 'getMap');
+  } */
+
+  async getLeafletMap () {
+    await this._whenReady(() => this.$$.map && this.$$.L, 'getMap');
+    return { L: this.$$.L, map: this.$$.map };
   }
 
   async connectedCallback () {
@@ -69,15 +105,17 @@ export class MyMapElement extends MyElement {
 
   async _initialize (attr) {
     // .
-    await this.getTemplate('my-map');
+    this._attachLocalTemplate(TEMPLATE); // Was: await this.getTemplate('my-map');
 
     const mapElem = this.shadowRoot.querySelector('#my-map');
 
     // this.shadowRoot.querySelector('#caption').textContent = attr.caption;
 
     const L = await this._importLeafletLibs();
 
-    L.translate.load(this.lang);
+    if (L.translate) {
+      L.translate.load(this.lang);
+    }
 
     const map = L.map(mapElem, { a11yPlugin: true }).setView([attr.lat, attr.long], attr.zoom);
 

src/templates/my-map.tpl.html

@@ -1,4 +1,6 @@
 <!--
+  DEPRECATED.
+
   Easily embed a map powered by Leaflet.js - optionally with a GeoJSON feed.
 
   Nick Freear, 27-Nov-2021.