Add minimal example

nfreear · Oct 2, 2023 · 65d448f · 65d448f
1 parent bce8e7b
commit 65d448f
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,4 @@
 
-example
 index.json
 Leaflet.locale.js
 node_modules

diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+
+  <style>
+    #map { min-height: 220px; }
+  </style>
+
+  <title> Leaflet Locale Demo </title>
+
+  <h1> Leaflet Locale Demo </h1>
+
+  <nav>
+    <ul>
+      <li><a href="?">English</a></li><li><a href="?lang=fr">French</a></li><li><a href="?lang=en-TEST">English (test)</a></li>
+      <li><a href="https://github.com/nfreear/leaflet.locale">GitHub</a></li>
+    </ul>
+  </nav>
+
+  <div id="map"></div>
+
+  <script type="importmap">
+  {
+    "imports": {
+      "Leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js",
+      "Leaflet.i18n": "https://unpkg.com/leaflet-i18n@0.3.3/Leaflet.i18n.js",
+      "Leaflet.a11y": "./lib/Leaflet.a11y.js",
+      "Leaflet.locale": "../Leaflet.locale.js"
+    }
+  }
+  </script>
+
+  <script type="module" src="lib/app.mjs"></script>
+</html>
diff --git a/example/lib/app.mjs b/example/lib/app.mjs
@@ -0,0 +1,32 @@
+
+import 'Leaflet';
+import 'Leaflet.i18n';
+import 'Leaflet.locale';
+
+console.debug('App start:', window.L);
+
+const { L } = window;
+
+// Load language pack, based on URL parameter ('?lang=fr').
+await L.l10n.load(L.l10n.fromUrl());
+
+const MAP = L.map('map', {}).setView([51.505, -0.09], 13);
+
+L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  maxZoom: 19,
+  attribution: L._('© OpenStreetMap')
+}).addTo(MAP);
+
+L.marker([51.5, -0.09], {
+  alt: L._('Marker: {name}', { name: 'Sterry Street, London, SE1 4NE' }),
+  title: L._('Marker: {name}', { name: 'Sterry Street, London, SE1 4NE' })
+})
+  .addTo(MAP)
+  .bindPopup(L._('Hello! I’m a translation test.'));
+
+L.popup()
+  .setLatLng([51.513, -0.09])
+  .setContent(L._('I am a standalone popup.'))
+  .openOn(MAP);
+
+// End.
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "leaflet.locale",
   "version": "0.1.0",
-  "description": "A localization/ translation plugin for Leaflet.",
+  "description": "Locales / language packs for Leaflet.",
   "main": "./Leaflet.locale.js",
   "module": "./src/Locale.mjs",
   "license": "MIT",
   "author": "Nick Freear",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nfreear/leaflet.a11y.git"
+    "url": "https://github.com/nfreear/leaflet.locale.git"
   },
   "peerDependencies": {
     "leaflet": "^1.0.0"

diff --git a/src/build.mjs b/src/build.mjs
@@ -1,6 +1,8 @@
 /**
  * CLI: Build a UMD-pattern Leaflet plugin, based on the ESM class.
  *
+ * While its small, put ALL locale-data directly in the plugin JS file!
+ *
  * @see Locale.mjs
  * @see https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md
  */