Add decode/load buttons to the scaled-svg example

openlayers · Dec 5, 2024 · 12681c2 · 12681c2
1 parent 472be26
commit 12681c2
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 13 deletions.
diff --git a/examples/scaled-svg.html b/examples/scaled-svg.html
@@ -7,9 +7,37 @@
     <link rel="icon" type="image/svg+xml" href="https://openlayers.org/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)">
     <link rel="stylesheet" href="./common.css">
     <title>Scaled SVG</title>
+    <style>
+    #output {
+      position: absolute;
+      top: 2em;
+      right: 2em;
+      text-align: center;
+      -webkit-text-stroke: 0.5px white;
+      font-weight: bold;
+      font-size: 1.2em;
+    }
+    #output a {
+      display: block;
+      cursor: pointer;
+      text-decoration: none;
+      color: inherit;
+      background-color: var(--example-background);
+      -webkit-text-stroke: inherit;
+      padding: 3px;
+      margin: 5px;
+      width: 100px;
+      border-radius: 5px;
+      border: 1px solid black;
+    }
+    </style>
   </head>
   <body>
     <div id="map"></div>
+    <div id="output">
+      <a id="decode">decode</a>
+      <a id="load">load</a>
+    </div>
     <script type="module" src="./scaled-svg.js"></script>
   </body>
 </html>
diff --git a/examples/scaled-svg.js b/examples/scaled-svg.js
@@ -3,28 +3,36 @@ import Map from 'ol/Map.js';
 import Source from 'ol/source/Image.js';
 import View from 'ol/View.js';
 import {createLoader as createStatic} from 'ol/source/static.js';
-import {load as loadImage} from 'ol/Image';
+import {decode as decodeImage, load as loadImage} from 'ol/Image';
 import {useGeographic} from 'ol/proj.js';
 
 useGeographic();
 
-const source = new Source({
-  loader: createStatic({
-    url: '../wms.svg',
-    imageExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
-    load: loadImage,
-  }),
-});
+const layer = new Layer();
+const changeSource = (load) => {
+  const source = new Source({
+    loader: createStatic({
+      url: '../wms.svg',
+      imageExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
+      load,
+    }),
+  });
+  layer.setSource(source);
+};
+changeSource(loadImage);
 
 const map = new Map({
   target: 'map',
-  layers: [
-    new Layer({
-      source,
-    }),
-  ],
+  layers: [layer],
   view: new View({
     center: [-58, 0],
     zoom: 5,
   }),
 });
+
+document.getElementById('decode').addEventListener('click', function () {
+  changeSource(decodeImage);
+});
+document.getElementById('load').addEventListener('click', function () {
+  changeSource(loadImage);
+});