WMS loader with SVG format

Using the WMS loader to use SVG images with an Image source.

The Image source can be configured with service specific loaders. By default, the loader returns the image as decoded ImageBitmap. When using the ol/source/Image.load() function instead, SVG images will scale during zooming, because they will be used as HTMLImageElement directly instead of an ImageBitmap.

main.js

import {load} from 'ol/Image.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import ImageLayer from 'ol/layer/Image.js';
import TileLayer from 'ol/layer/Tile.js';
import ImageSource from 'ol/source/Image.js';
import OSM from 'ol/source/OSM.js';
import {createLoader} from 'ol/source/wms.js';

const layers = [
  new TileLayer({
    source: new OSM(),
  }),
  new ImageLayer({
    extent: [-13884991, 2870341, -7455066, 6338219],
    source: new ImageSource({
      loader: createLoader({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {'LAYERS': 'topp:states', 'FORMAT': 'image/svg+xml'},
        ratio: 1,
        load: load,
      }),
    }),
  }),
];
const map = new Map({
  layers: layers,
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4,
  }),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>WMS loader with SVG format</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "wms-image-svg",
  "dependencies": {
    "ol": "10.4.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}