Update dependencies, externalized OL for IMD and improve examples (#34)

* updated dependencies and externalized ol variable for umd * cleaned-up examples; added ol vanilla js example
maptiler · Jun 20, 2024 · 2171aef · 2171aef
1 parent 7d50210
commit 2171aef
Show file tree

Hide file tree

Showing 11 changed files with 521 additions and 467 deletions.
diff --git a/examples/leaflet/AppLeaflet.svelte b/examples/leaflet/AppLeaflet.svelte
@@ -6,15 +6,10 @@
 
   let containerElement: HTMLElement;
 
-  const apiKey = import.meta.env.VITE_API_KEY;
-
-  if (!apiKey) {
-    const errMsg = "missing VITE_API_KEY environment variable";
-
-    window.alert(errMsg);
-
-    throw new Error(errMsg);
-  }
+  const apiKey =
+    import.meta.env.VITE_API_KEY ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
 
   onMount(() => {
     const map = L.map(containerElement).fitBounds([

diff --git a/examples/maplibregl/AppMapLibreGl.svelte b/examples/maplibregl/AppMapLibreGl.svelte
@@ -6,15 +6,10 @@
 
   let containerElement: HTMLElement;
 
-  const apiKey = import.meta.env.VITE_API_KEY;
-
-  if (!apiKey) {
-    const errMsg = "missing VITE_API_KEY environment variable";
-
-    window.alert(errMsg);
-
-    throw new Error(errMsg);
-  }
+  const apiKey =
+    import.meta.env.VITE_API_KEY ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
 
   onMount(() => {
     const map = new Map({

diff --git a/examples/maptiler-sdk/AppMapTilerSdk.svelte b/examples/maptiler-sdk/AppMapTilerSdk.svelte
@@ -8,15 +8,10 @@
 
   maptilersdk.config.apiKey = import.meta.env.VITE_API_KEY;
 
-  const apiKey = import.meta.env.VITE_API_KEY;
-
-  if (!apiKey) {
-    const errMsg = "missing VITE_API_KEY environment variable";
-
-    window.alert(errMsg);
-
-    throw new Error(errMsg);
-  }
+  maptilersdk.config.apiKey =
+    import.meta.env.VITE_API_KEY ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
 
   onMount(() => {
     const map = new maptilersdk.Map({

diff --git a/examples/openlayers/AppOpenLayers.svelte b/examples/openlayers/AppOpenLayers.svelte
@@ -10,15 +10,10 @@
 
   let containerElement: HTMLElement;
 
-  const apiKey = import.meta.env.VITE_API_KEY;
-
-  if (!apiKey) {
-    const errMsg = "missing VITE_API_KEY environment variable";
-
-    window.alert(errMsg);
-
-    throw new Error(errMsg);
-  }
+  const apiKey =
+    import.meta.env.VITE_API_KEY ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
 
   const scale = devicePixelRatio > 1.5 ? "@2x" : "";
 

diff --git a/examples/standalone/leaflet.html b/examples/standalone/leaflet.html
@@ -31,15 +31,10 @@
 <script>
   addEventListener("hashchange", (event) => location.reload());
 
-  const apiKey = new URLSearchParams(location.hash.slice(1)).get("key");
-
-  if (!apiKey) {
-    const errMsg = "Missing #key=your_api_key in URL";
-
-    window.alert(errMsg);
-
-    throw new Error(errMsg);
-  }
+  const apiKey =
+    new URLSearchParams(location.hash.slice(1)).get("key") ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
 
   const map = L.map(document.getElementById("map")).setView([49.2, 16.3], 6);
 

diff --git a/examples/standalone/maplibregl.html b/examples/standalone/maplibregl.html
@@ -31,15 +31,10 @@
 <script>
   addEventListener("hashchange", (event) => location.reload());
 
-  const apiKey = new URLSearchParams(location.hash.slice(1)).get("key");
-
-  if (!apiKey) {
-    const errMsg = "Missing #key=your_api_key in URL";
-
-    window.alert(errMsg);
-
-    throw new Error(errMsg);
-  }
+  const apiKey =
+    new URLSearchParams(location.hash.slice(1)).get("key") ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
 
   const map = new maplibregl.Map({
     container: "map",

diff --git a/examples/standalone/ol.html b/examples/standalone/ol.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<meta charset="utf-8" />
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" />
+
+<script src="../../dist/openlayers.umd.js" charset="UTF-8"></script>
+
+<link href="../../dist/style.css" rel="stylesheet" />
+
+<!--
+<script src="https://unpkg.com/@maptiler/geocoding-control@latest/openlayers.umd.js"></script>
+
+<link
+  href="https://unpkg.com/@maptiler/geocoding-control@latest/style.css"
+  rel="stylesheet"
+/>
+-->
+
+<style>
+  #map {
+    position: absolute;
+    inset: 0;
+  }
+
+  .ol-search {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+  }
+</style>
+
+<div id="map"></div>
+
+<script>
+  addEventListener("hashchange", (event) => location.reload());
+
+  const apiKey =
+    new URLSearchParams(location.hash.slice(1)).get("key") ||
+    prompt("Please provide your MapTiler API key") ||
+    "";
+
+  const scale = devicePixelRatio > 1.5 ? "@2x" : "";
+
+  new ol.Map({
+    target: document.getElementById("map"),
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          url: `https://api.maptiler.com/maps/basic-v2/{z}/{x}/{y}${scale}.png?key=${apiKey}`,
+          tileSize: 512,
+          attributions: [
+            '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>',
+            '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
+          ],
+        }),
+      }),
+    ],
+    view: new ol.View({
+      center: [0, 0],
+      zoom: 0,
+    }),
+    controls: ol.control.defaults.defaults().extend([
+      new openlayersMaptilerGeocoder.GeocodingControl({
+        apiKey,
+        enableReverse: "always",
+        iconsBaseUrl: "/icons/",
+      }),
+    ]),
+  });
+</script>
diff --git a/index.html b/index.html
@@ -11,10 +11,22 @@
 
 <h1>MapTiler Geocoding Control Examples</h1>
 
+<h2>Svelte</h2>
 <ul>
   <li><a href="/examples/maptiler-sdk/">MapTiler SDK</a></li>
   <li><a href="/examples/maplibregl/">MapLibre GL JS</a></li>
   <li><a href="/examples/leaflet/">Leaflet</a></li>
   <li><a href="/examples/openlayers/">OpenLayers</a></li>
-  <li><a href="/examples/react/">React</a></li>
+</ul>
+
+<h2>React</h2>
+<ul>
+  <li><a href="/examples/react/">Headless (no map, just the control)</a></li>
+</ul>
+
+<h2>Vanilla JS</h2>
+<ul>
+  <li><a href="/examples/standalone/maplibregl.html">MapLibre GL JS</a></li>
+  <li><a href="/examples/standalone/leaflet.html">Leaflet</a></li>
+  <li><a href="/examples/standalone/ol.html">OpenLayers</a></li>
 </ul>