Improves argument handling and script loading

assets/loader.js

@@ -0,0 +1,18 @@
+var openfreemapModuleUrl;
+var openfreemapStyleUrl;
+
+if (document.querySelector('.openfreemap') && typeof openfreemapModuleUrl === 'string') {
+  if (typeof openfreemapStyleUrl === 'string') {
+    var link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = openfreemapStyleUrl;
+    link.onerror = function () {
+      console.error('[OpenFreeMap] Failed to load the map stylesheet.');
+    };
+    document.head.appendChild(link);
+  }
+
+  import(openfreemapModuleUrl).catch(function (error) {
+    console.error('[OpenFreeMap] Failed to load the map library.', error);
+  });
+}

assets/openfreemap.js

@@ -1,23 +1,45 @@
 import * as maplibregl from '../vendor/maplibre-gl/maplibre-gl.mjs';
 
+const NO_WEBGL_MESSAGE =
+  'The map could not be displayed. Please enable WebGL or use a different browser.';
+
+function readNumber(value, fallback) {
+  const parsed = parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
 document.querySelectorAll('.openfreemap').forEach((container) => {
   const center = [
-    parseFloat(container.dataset.lon),
-    parseFloat(container.dataset.lat)
+    readNumber(container.dataset.lon, 12.3453356),
+    readNumber(container.dataset.lat, 47.1092664)
   ];
-  const zoom = parseFloat(container.dataset.zoom);
-  const map = new maplibregl.Map({
-    style: container.dataset.style,
-    center: center,
-    zoom: zoom,
-    container: container
+  const zoom = readNumber(container.dataset.zoom, 16.5);
+  const popupText = container.dataset.popup;
+
+  let map;
+  try {
+    map = new maplibregl.Map({
+      style: container.dataset.style,
+      center: center,
+      zoom: zoom,
+      container: container
+    });
+  } catch (error) {
+    // MapLibre throws when WebGL is unavailable, leaving an empty box behind.
+    console.error('[OpenFreeMap] Could not initialise the map.', error);
+    container.textContent = NO_WEBGL_MESSAGE;
+    return;
+  }
+
+  map.on('error', (event) => {
+    console.warn('[OpenFreeMap]', event.error);
   });
+
   const marker = new maplibregl.Marker({
     color: container.dataset.color
   })
     .setLngLat(center)
     .addTo(map);
-  const popupText = container.dataset.popup;
   if (popupText) {
     const popup = new maplibregl.Popup({
       closeOnClick: false
@@ -27,4 +49,3 @@ document.querySelectorAll('.openfreemap').forEach((container) => {
   }
   map.addControl(new maplibregl.NavigationControl());
 });
-