Website updates

dist/en/main/examples/drag-and-drop-custom-kmz.html

@@ -143,14 +143,13 @@ <h5 class="modal-title" id="tag-example-title"></h5>
 
       <div class="row-fluid">
         <p id="shortdesc">Example of using the drag-and-drop interaction with a custom format to handle KMZ files.</p>
-        <div id="docs"><p>Example of using the drag-and-drop interaction with a custom format to handle KMZ files. In addition to the formats used in the <a href="drag-and-drop.html">Drag-and-Drop</a> example a custom format (subclassing KML) is used to handle KMZ files. KML and icons must be extracted from the KMZ array buffer synchronously. <a href="https://stuk.github.io/jszip/documentation/upgrade_guide.html" target="_blank">JSZip 2.x</a> is used as it has better browser compatibility and is simpler to code than the more recent <a href="https://github.com/ericvergnaud/jszip#readme" target="_blank">JSZip-sync</a>. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
+        <div id="docs"><p>Example of using the drag-and-drop interaction with a custom format to handle KMZ files. In addition to the formats used in the <a href="drag-and-drop.html">Drag-and-Drop</a> example a custom format (subclassing KML) is used to handle KMZ files. KML and icons must be extracted from the KMZ array buffer synchronously. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.</p>
 </div>
       </div>
 
       <div class="row-fluid">
         <h5 class="source-heading">main.js</h5>
-        <pre><code id="example-js-source" class="language-js">import JSZip from &#x27;jszip&#x27;;
-import Map from &#x27;ol/Map.js&#x27;;
+        <pre><code id="example-js-source" class="language-js">import Map from &#x27;ol/Map.js&#x27;;
 import View from &#x27;ol/View.js&#x27;;
 import {
   DragAndDrop,
@@ -159,31 +158,32 @@ <h5 class="source-heading">main.js</h5>
 import {GPX, GeoJSON, IGC, KML, TopoJSON} from &#x27;ol/format.js&#x27;;
 import {OSM, Vector as VectorSource} from &#x27;ol/source.js&#x27;;
 import {Tile as TileLayer, Vector as VectorLayer} from &#x27;ol/layer.js&#x27;;
+import {unzipSync} from &#x27;fflate&#x27;;
 
 // Create functions to extract KML and icons from KMZ array buffer,
 // which must be done synchronously.
 
-const zip &#x3D; new JSZip();
+let zip;
 
 function getKMLData(buffer) {
-  let kmlData;
-  zip.load(buffer);
-  const kmlFile &#x3D; zip.file(/\.kml$/i)[0];
-  if (kmlFile) {
-    kmlData &#x3D; kmlFile.asText();
+  zip &#x3D; unzipSync(new Uint8Array(buffer));
+  const kml &#x3D; Object.keys(zip).find((key) &#x3D;&gt; /\.kml$/i.test(key));
+  if (!(kml in zip)) {
+    return null;
   }
-  return kmlData;
+  return new TextDecoder().decode(zip[kml]);
 }
 
 function getKMLImage(href) {
   const index &#x3D; window.location.href.lastIndexOf(&#x27;/&#x27;);
-  if (index !&#x3D;&#x3D; -1) {
-    const kmlFile &#x3D; zip.file(href.slice(index + 1));
-    if (kmlFile) {
-      return URL.createObjectURL(new Blob([kmlFile.asArrayBuffer()]));
-    }
+  if (index &#x3D;&#x3D;&#x3D; -1) {
+    return href;
+  }
+  const image &#x3D; href.slice(index + 1);
+  if (!(image in zip)) {
+    return href;
   }
-  return href;
+  return URL.createObjectURL(new Blob([zip[image]]));
 }
 
 // Define a KMZ format class by subclassing ol/format/KML
@@ -338,7 +338,7 @@ <h5 class="source-heading">package.json</h5>
   &quot;name&quot;: &quot;drag-and-drop-custom-kmz&quot;,
   &quot;dependencies&quot;: {
     &quot;ol&quot;: &quot;10.2.2-dev&quot;,
-    &quot;jszip&quot;: &quot;^3.8.0&quot;
+    &quot;fflate&quot;: &quot;^0.8.2&quot;
   },
   &quot;devDependencies&quot;: {
     &quot;vite&quot;: &quot;^3.2.3&quot;