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 ImageSource from 'ol/source/Image.js';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import View from 'ol/View.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import {createLoader} from 'ol/source/wms.js';
import {load} from 'ol/Image.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.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}