/***********************************************************************
 * Copyright © 2024-2025 Guilhem Moulin <info@guilhem.se>
 * Vector and raster layer definitions
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Affero General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **********************************************************************/

import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import Icon from 'ol/style/Icon.js';
import RegularShape from 'ol/style/RegularShape.js';
import Stroke from 'ol/style/Stroke.js';
import Style from 'ol/style/Style.js';

/* TODO: this should really be refactored… */
export const layers = {
  'mrr.appr_ec': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 22,
          fill: new Fill({
            color: [247, 170, 67, Math.max((.2-1)/8 * z + 1, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [151, 173, 23, 1],
          }),
        });
      }),
  },
  'mrr.appl_ec': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 25,
          fill: new Fill({
            color: [247, 170, 67, Math.max((.2-1)/8 * z + 1, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [197, 14, 31, 1],
            lineDash: width >= 1.5 ? [2 * width] : undefined,
          }),
        });
      }),
  },
  'mrr.appr_met': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 24,
          fill: new Fill({
            color: [0, 0, 0, Math.max((.2-.4)/4 * z + .4, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [151, 173, 23, 1],
          }),
        });
      }),
  },
  'mrr.appl_met': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 26,
          fill: new Fill({
            color: [0, 0, 0, Math.max((.2-.4)/4 * z + .4, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [197, 14, 31, 1],
            lineDash: width >= 1.5 ? [2 * width] : undefined,
          }),
        });
      }),
  },
  'mrr.appr_ogd': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 24,
          fill: new Fill({
            color: [30, 55, 87, Math.max((.2-.4)/4 * z + .4, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [151, 173, 23, 1],
          }),
        });
      }),
  },
  'mrr.appl_ogd': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 26,
          fill: new Fill({
            color: [30, 55, 87, Math.max((.2-.4)/4 * z + .4, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [197, 14, 31, 1],
            lineDash: width >= 1.5 ? [2 * width] : undefined,
          }),
        });
      }),
  },
  'mrr.appr_dl': {
    legend: { zoomLevel: 4 },
    style: [0, .1, .5, .5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 20,
          fill: new Fill({
            color: [228, 53, 45, Math.max((.2-1)/6 * z + 1, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [151, 173, 23, 1],
          }),
        });
      }),
  },

  'svk.ledningar': {
    legend: { zoomLevel: 5, type: 'linestring', reuse_canvas: true },
    style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
        return new Style({
          zIndex: 52,
          stroke: new Stroke({
            color: 'black',
            width: width,
          }),
        });
      }),
  },
  'svk.stolpar': {
    legend: { zoomLevel: 5, type: 'point' },
    style: [undefined, undefined, undefined, undefined, undefined]
      .concat([3, 4, 5, 6, 8, 10, 15].map(function(radius) {
          return new Style({
            zIndex: 51,
            image: new CircleStyle({
              radius: radius,
              fill: new Fill({
                color: 'black',
              }),
            }),
          });
      })),
  },
  'svk.transmissionsnatsprojekt': {
    legend: { zoomLevel: 5, type: 'linestring' },
    style: [1, 1.5, 2, 2, 2, 2, 3, 4, 5, 6, 8, 10].map(function(width) {
        return new Style({
          zIndex: 53,
          stroke: new Stroke({
            color: 'black',
            width: width,
            lineDash: [4 * width],
          }),
        });
      }),
  },
  'svk.stationer': {
    legend: { zoomLevel: 3, type: 'point' },
    style: [3, 4, 5, 6, 7, 8.5, 10].map(function(radius) {
        return new Style({
          zIndex: 50,
          image: new RegularShape({
            radius: radius,
            points: 4,
            angle: Math.PI/4,
            fill: new Fill({
              color: 'black',
            }),
          }),
        });
      })
      .concat([.5, 1, 1.5, 2, 2].map(function(width) {
        return new Style({
          zIndex: 50,
          fill: new Fill({
            color: 'rgba(128, 128, 128, .7)',
          }),
          stroke: new Stroke({
            width: width,
            color: 'rgb(0, 0, 0)',
          }),
        });
      })),
  },

  'vbk.area_current': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: [168, 198, 223, Math.max((.2-1)/8 * z + 1, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [56, 96, 130, 1],
          }),
        });
      }),
  },
  'vbk.area_notcurrent': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: [222, 163, 199, Math.max((.2-1)/8 * z + 1, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [148, 55, 112, 1],
            lineDash: width >= 1.5 ? [2 * width] : undefined,
          }),
        });
      }),
  },
  'vbk.offshore_completed': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 17,
          fill: new Fill({
            color: [38, 107, 29, .5],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [38, 107, 29, 1],
          }),
        });
      }),
  },
  'vbk.offshore_approved': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 16,
          fill: new Fill({
            color: [56, 160, 44, .5],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [56, 160, 44, 1],
          }),
        });
      }),
  },
  'vbk.offshore_amended': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        const w = z < 4 ? .5 : z <= 5 ? 1.5 : 4;
        patternCanvas.width = width/2;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(247, 105, 162, 1)';
        patternContext.beginPath();
        patternContext.arc(.75*patternCanvas.width, .75*patternCanvas.height, 1.5*w, 0, 2*Math.PI, true)
        patternContext.fill();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 17,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: 2*w,
            color: [247, 105, 162, 1],
            lineDash: [8 * w],
          }),
        });
      }),
  },
  'vbk.offshore_rejected': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 11,
          fill: new Fill({
            color: [227, 26, 28, .5],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [227, 26, 28, 1],
          }),
        });
      }),
  },
  'vbk.offshore_appealed': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 15,
          fill: new Fill({
            color: [177, 88, 40, .5],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [177, 88, 40, 1],
          }),
        });
      }),
  },
  'vbk.offshore_applied': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 14,
          fill: new Fill({
            color: [255, 127, 0, .5],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [255, 128, 0, 1],
          }),
        });
      }),
  },
  'vbk.offshore_consultation': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 13,
          fill: new Fill({
            color: [254, 217, 118, .65],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [254, 183, 82, 1],
          }),
        });
      }),
  },
  'vbk.offshore_investigation': {
    legend: { zoomLevel: 1 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        const w = z < 4 ? .5 : z <= 5 ? 1.5 : 4;
        patternCanvas.width = width*2;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(68, 90, 166, 1)';
        patternContext.lineWidth = w;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 12,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: 2*w,
            color: [68, 90, 166, 1],
            lineDash: [8 * w],
          }),
        });
      }),
  },
  'vbk.offshore_revoked': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: [105, 61, 154, .5],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [105, 62, 153, 1],
          }),
        });
      }),
  },
  'vbk.station_completed': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-completed.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },
  'vbk.station_processed': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-processed.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },
  'vbk.station_approved': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-approved.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },
  'vbk.station_revoked': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-revoked.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },
  'vbk.station_rejected': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-rejected.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },
  'vbk.station_dismounted': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-dismounted.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },
  'vbk.station_appealed': {
    legend: { zoomLevel: 7, type: 'point' },
    style: [undefined, undefined, undefined, undefined, .125, .125, .25, .5, 1, 2, 4, 8].map(function(scale) {
        return scale === undefined ? undefined : new Style({
          zIndex: 99,
          image: new Icon({
            src: '/assets/icons/wind-turbine-appealed.svg',
            declutter: 'none',
            scale: scale,
          }),
        });
      }),
  },

  /* Documentation at
   * https://www.skogsstyrelsen.se/globalassets/sjalvservice/karttjanster/geodatatjanster/produktbeskrivningar/utforda-avverkningar---produktbeskrivning.pdf
   * */
  'avverk.utford': {
    legend: { zoomLevel: 7 },
    style: [0, 0, 0, 0, 0, .5, .75, 1, 1, 1, 1, 1].map(function(width, z) {
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: [255, 102, 102, Math.max((.2-1)/8 * z + 1, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [204, 0, 0, 1],
          }),
        });
      }),
  },
  /* Documentation at
   * https://www.skogsstyrelsen.se/globalassets/sjalvservice/karttjanster/geodatatjanster/produktbeskrivningar/yttre-granser-for-avverkningsanmalda-omraden---produktbeskrivning.pdf
   * */
  'avverk.anmald': {
    legend: { zoomLevel: 7 },
    style: [0, 0, 0, 0, 0, .5, .75, 1, 1, 1, 1, 1].map(function(width, z) {
        return new Style({
          zIndex: 10,
          fill: (width === undefined || width === 0) ?
            new Fill({ color: [255, 102, 102, Math.max((.2-1)/8 * z + 1, 0)*.75] }) :
            (function() {
              const patternCanvas = document.createElement('canvas');
              const patternContext = patternCanvas.getContext('2d');
              const slope = 45 * Math.PI/180;
              const spacing = z < 10 ? z*2 : 40;
              const len = Math.hypot(1, slope);
              const w = patternCanvas.width = Math.round(1/len + spacing)
              const h = patternCanvas.height = Math.round(slope/len + spacing * slope);

              patternContext.fillStyle = 'rgba(255, 102, 102, .1)';
              patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
              patternContext.strokeStyle = 'rgba(204, 0, 0, 1)';
              patternContext.lineWidth = Math.max(1, width/2);
              patternContext.beginPath();
              patternContext.moveTo(0, h);
              patternContext.lineTo(w, 0);
              patternContext.moveTo(-w, h);
              patternContext.lineTo(w, -h);
              patternContext.moveTo(0, 2*h);
              patternContext.lineTo(2*w, 0);
              patternContext.stroke();

              const canvas = document.createElement('canvas');
              const context = canvas.getContext('2d');
              return new Fill({ color: context.createPattern(patternCanvas, 'repeat') });
            })(),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [204, 0, 0, 1],
            lineDash: width >= 1.5 ? [2 * width] : undefined,
          }),
        });
      }),
  },

  'skydd.tilltradesforbud': {
    legend: { zoomLevel: 2 },
    style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
        return new Style({
          zIndex: 23,
          fill: new Fill({
            /* transparent fill so clicking the inside of the polygon triggers a popover */
            /* XXX could also use a custom renderer but that doesn't seem to work */
            color: [0, 0, 0, 0],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [255, 0, 0, 1],
          }),
        });
      }),
  },
  'skydd.nationalpark': {
    legend: { zoomLevel: 1 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(0, 55, 0, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 22,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [0, 55, 0, 1],
          }),
        });
      }),
  },
  'skydd.naturreservat': {
    legend: { zoomLevel: 1 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(7, 181, 7, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 21,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [7, 181, 7, 1],
          }),
        });
      }),
  },
  'skydd.naturreservat_kommunalt': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(7, 181, 7, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 20,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [7, 181, 7, 1],
          }),
        });
      }),
  },
  'skydd.naturvardsomrade': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(176, 255, 176, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 19,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [176, 255, 176, 1],
          }),
        });
      }),
  },
  'skydd.djur_och_vaxtskyddsomrade': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(255, 255, 0, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 18,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [255, 255, 0, 1],
          }),
        });
      }),
  },
  'skydd.kulturreservat': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(154, 102, 255, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 17,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [154, 102, 255, 1],
          }),
        });
      }),
  },
  'skydd.vattenskyddsomrade': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(0, 105, 212, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 16,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [0, 105, 212, 1],
          }),
        });
      }),
  },
  'skydd.landskapsbildsskyddsomrade': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(135, 110, 71, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 15,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [134, 110, 71, 1],
          }),
        });
      }),
  },
  'skydd.skogligt_biotopskyddsomrade': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(135, 90, 71, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 14,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
            color: [134, 90, 71, 1],
          }),
        });
      }),
  },
  'skydd.ovrigt_biotopskyddsomrade': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(255, 95, 0, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 13,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
            color: [255, 95, 0, 1],
          }),
        });
      }),
  },
  'skydd.naturminne_yta': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(113, 0, 116, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 12,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [134, 0, 116, 1],
          }),
        });
      }),
  },
  'skydd.naturminne_punkt': {
    legend: { zoomLevel: 6, type: 'point' },
    style: [undefined, undefined, undefined, undefined].concat([3, 4, 6, 8, 12, 16, 20, 24].map(function(width) {
        return new Style({
          zIndex: 12,
          image: new CircleStyle({
            radius: width,
            fill: new Fill({
              color: 'rgba(113, 0, 116, .5)',
            }),
            stroke: new Stroke({
              width: Math.log2(width)/2,
              color: 'rgba(113, 0, 116, 1)',
            }),
          }),
        });
      }))
  },
  'skydd.interimistiskt_forbud': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(168, 0, 0, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 11,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [168, 0, 0, 1],
          }),
        });
      }),
  },
  'skydd.fageldirektivet': {
    legend: { zoomLevel: 1 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width*2;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(230, 0, 0, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.beginPath();
        patternContext.lineWidth *= 6;
        patternContext.moveTo(-.5*patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -.5*patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 1.5*patternCanvas.height);
        patternContext.lineTo(1.5*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
            color: [230, 0, 0, 1],
          }),
        });
      }),
  },
  'skydd.habitatdirektivet': {
    legend: { zoomLevel: 1 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width*2;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(0, 77, 168, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();
        patternContext.beginPath();
        patternContext.lineWidth *= 6;
        patternContext.moveTo(0, -.5*patternCanvas.height);
        patternContext.lineTo(1.5*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-.5*patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 1.5*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
            color: [0, 77, 168, 1],
          }),
        });
      }),
  },
  'skydd.helcom': {
    legend: { zoomLevel: 1 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(130, 130, 130, 1)';
        const r = z < 5 ? (z+1)*.75 : z*.5;
        patternContext.beginPath();
        patternContext.arc(.5*patternCanvas.width, .5*patternCanvas.height, r, 0, 2*Math.PI, true)
        patternContext.fill();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 9,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [130, 130, 130, 1],
          }),
        });
      }),
  },
  'skydd.ramsar': {
    legend: { zoomLevel: 1 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(195, 0, 255, 1)';
        const r = z < 5 ? (z+1)*.75 : z*.5;
        patternContext.beginPath();
        patternContext.arc(.25*patternCanvas.width, .25*patternCanvas.height, r, 0, 2*Math.PI, true)
        patternContext.fill();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 9,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [195, 0, 255, 1],
          }),
        });
      }),
  },
  'skydd.ospar': {
    legend: { zoomLevel: 1 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(168, 0, 0, 1)';
        const r = z < 5 ? (z+1)*.75 : z*.5;
        patternContext.beginPath();
        patternContext.arc(.25*patternCanvas.width, .75*patternCanvas.height, r, 0, 2*Math.PI, true)
        patternContext.fill();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 9,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [168, 0, 0, 1],
          }),
        });
      }),
  },
  'skydd.varldsarv': {
    legend: { zoomLevel: 1 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(168, 0, 0, 1)';
        const r = z < 5 ? (z+1)*.75 : z*.5;
        patternContext.beginPath();
        patternContext.arc(.75*patternCanvas.width, .25*patternCanvas.height, r, 0, 2*Math.PI, true)
        patternContext.fill();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 9,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [168, 0, 0, 1],
          }),
        });
      }),
  },
  'skydd.biosfarsomraden': {
    legend: { zoomLevel: 1 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(131, 0, 219, 1)';
        const r = z < 5 ? (z+1)*.75 : z*.5;
        patternContext.beginPath();
        patternContext.arc(.75*patternCanvas.width, .75*patternCanvas.height, r, 0, 2*Math.PI, true)
        patternContext.fill();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 9,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [131, 0, 219, 1],
          }),
        });
      }),
  },
  'skydd.naturvardsavtal': {
    legend: { zoomLevel: 1 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(255, 0, 197, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 21,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
            color: [255, 0, 197, 1],
          }),
        });
      }),
  },
  'skydd.naturvardsavtal_skogsstyrelsen': {
    legend: { zoomLevel: 2 },
    style: [4, 8, 16, 16, 32, 32, 64, 64, 64, 128, 128, 128].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(255, 0, 197, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 20,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 4 ? .5 : z <= 5 ? 1 : 2,
            color: [255, 0, 197, 1],
          }),
        });
      }),
  },
  'skydd.atervatningsavtal': {
    legend: { zoomLevel: 0 },
    style: [0, 1, 2, 3, 4, 5, 6].map(function(width) {
        return new Style({
          zIndex: 5,
          fill: new Fill({
            color: [255, 115, 0, .4],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: .5,
            color: [255, 115, 0, 1],
          }),
        });
      })
      .concat([7, 8, 9, 10, 11].map(function() {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = 16;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(255, 115, 0, 1)';
        patternContext.lineWidth = 1;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 5,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: new Stroke({
            width: 1.5,
            color: [255, 115, 0, 1],
          }),
        });
      })),
  },
  'nv.naturvarde_sks': {
    legend: { zoomLevel: 0 },
    style: [0, 1, 2, 3, 4, 5].map(function(width) {
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: [255, 170, 0, .2],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: .5,
            color: [255, 170, 0, .8],
          }),
        });
      })
      .concat([6, 7, 8, 9, 10, 11].map(function() {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = 16;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(255, 170, 0, 1)';
        patternContext.lineWidth = 1;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: new Stroke({
            width: 1.5,
            color: [255, 170, 0, 1],
          }),
        });
      })),
  },
  'nv.nyckelbiotop': {
    legend: { zoomLevel: 0 },
    style: [0, 1, 2, 3, 4, 5].map(function(width) {
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: [217, 148, 9, .2],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: .5,
            color: [217, 148, 9, .8],
          }),
        });
      })
      .concat([6, 7, 8, 9, 10, 11].map(function() {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = 16;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(217, 148, 9, 1)';
        patternContext.lineWidth = 1;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: new Stroke({
            width: 1.5,
            color: [217, 148, 9, 1],
          }),
        });
      })),
  },
  'nv.nyckelbiotop_storskogsbruk': {
    legend: { zoomLevel: 0 },
    style: [0, 1, 2, 3, 4, 5].map(function(width) {
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: [217, 148, 9, .2],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: .5,
            color: [217, 148, 9, .8],
          }),
        });
      })
      .concat([6, 7, 8, 9, 10, 11].map(function() {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = 16;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(217, 148, 9, 1)';
        patternContext.lineWidth = 1;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: new Stroke({
            width: 1.5,
            color: [217, 148, 9, 1],
          }),
        });
      })),
  },
  'nv.sumpskog': {
    legend: { zoomLevel: 5 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        const w = Math.max(1, width);
        patternCanvas.width = z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 6 : 8;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(158, 200, 215, 1)';
        patternContext.lineWidth = w;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 5,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: w/2,
            color: [158, 200, 215, 1],
          }),
        });
      }),
  },
  'nv.pagaende_naturreservatsbildning': {
    legend: { zoomLevel: 1 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.setLineDash([width/4, width/4]);
        patternContext.strokeStyle = 'rgba(7, 181, 7, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(width/4, 0);
        patternContext.lineTo(width/4, patternCanvas.height);
        patternContext.stroke();
        patternContext.beginPath();
        patternContext.lineDashOffset = width/4;
        patternContext.moveTo(3*width/4, 0);
        patternContext.lineTo(3*width/4, patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 10,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 3 : 4,
            color: [7, 181, 7, 1],
            lineDash: [width/8, width/4],
          }),
        });
      }),
  },
  'nv.snus': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width) {
        return new Style({
          zIndex: 4,
          fill: new Fill({
            color: [168,168,0,.2],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [168,77,0,.75],
          }),
        });
      }),
  },

  'ri.naturvard': {
    legend: { zoomLevel: 0 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(154, 230, 0, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 8,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [154, 230, 0, 1],
          }),
        });
      }),
  },
  'ri.friluftsliv': {
    legend: { zoomLevel: 0 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(0, 127, 232, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 8,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 1 : z < 4 ? 2 : z <= 5 ? 4 : 8,
            color: [0, 127, 232, 1],
          }),
        });
      }),
  },
  'ri.rorligt_friluftsliv': {
    legend: { zoomLevel: 0 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(187, 227, 212, .25)';
        patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
        patternContext.strokeStyle = 'rgba(56, 151, 117, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, patternCanvas.height);
        patternContext.lineTo(patternCanvas.width, -patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, 2*patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 8,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
            color: [56, 151, 117, 1],
            lineDash: [width/4, width/3],
          }),
        });
      }),
  },
  'ri.obruten_kust': {
    legend: { zoomLevel: 0 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(227, 227, 187, .25)';
        patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
        patternContext.strokeStyle = 'rgba(156, 158, 56, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 8,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
            color: [156, 158, 56, 1],
            lineDash: [width/4, width/3],
          }),
        });
      }),
  },
  'ri.obrutet_fjall': {
    legend: { zoomLevel: 0 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = width;
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'rgba(255, 255, 209, .25)';
        patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
        patternContext.strokeStyle = 'rgba(219, 183, 60, 1)';
        patternContext.lineWidth = z < 4 ? .5 : z <= 5 ? 1 : 2;
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(0, -patternCanvas.height);
        patternContext.lineTo(2*patternCanvas.width, patternCanvas.height);
        patternContext.stroke();
        patternContext.moveTo(-patternCanvas.width, 0);
        patternContext.lineTo(patternCanvas.width, 2*patternCanvas.height);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 8,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
            color: [219, 183, 60, 1],
            lineDash: [width/4, width/3],
          }),
        });
      }),
  },
  'ri.skyddade_vattendrag': {
    legend: { zoomLevel: 0 },
    style: [8, 16, 32, 32, 64, 64, 128, 128, 128, 256, 256, 256].map(function(width, z) {
      return new Style({
        zIndex: 8,
        fill: new Fill({
          color: [102, 157, 240, .25],
        }),
        stroke: width === 0 ? undefined : new Stroke({
          width: z < 2 ? 2 : z < 4 ? 4 : z <= 5 ? 8 : 16,
          color: [41, 109, 197, 1],
          lineDash: [width/4, width/3],
        }),
      });
    }),
  },

  'ren.betesomrade': {
    legend: { zoomLevel: 0 },
    style: [1, 1.5, 2, 3, 3.5, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
        return new Style({
          zIndex: 4,
          fill: new Fill({
            /* transparent fill so clicking the inside of the polygon triggers a popover */
            /* XXX could also use a custom renderer but that doesn't seem to work */
            color: [0, 0, 0, 0],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [179, 153, 102, 1],
          }),
        });
      }),
  },
  'ren.flyttled': {
    legend: { zoomLevel: 2, type: 'linestring' },
    style: [.75, 1, 1.5, 2, 3, 4, 5, 5, 6, 7, 8, 10].map(function(width) {
        return new Style({
          zIndex: 7,
          stroke: new Stroke({
            width: 2*width,
            color: [119, 99, 59, 1],
            lineDash: [4 * width],
          }),
        });
      }),
  },
  'ren.riks_ren': {
    legend: { zoomLevel: 1 },
    style: [.5, 1, 1.5, 1.5, 2, 2, 2.5, 2.5, 3, 3.5, 4, 5].map(function(width, z) {
        const patternCanvas = document.createElement('canvas');
        const patternContext = patternCanvas.getContext('2d');
        patternCanvas.width = z < 4 ? 4 : z <= 5 ? 8 : Math.pow(2, Math.round(Math.log2(width) + 3));
        patternCanvas.height = patternCanvas.width;
        patternContext.fillStyle = 'transparent';
        patternContext.strokeStyle = 'rgba(179, 153, 102, 1)';
        patternContext.lineWidth = Math.max(1, width/2);
        patternContext.beginPath();
        patternContext.moveTo(0, 0);
        patternContext.lineTo(patternCanvas.width, 0);
        patternContext.stroke();

        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        return new Style({
          zIndex: 6,
          fill: new Fill({
            color: context.createPattern(patternCanvas, 'repeat'),
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [179, 153, 102, 1],
          }),
        });
      }),
  },
  'ren.omr_riks': {
    legend: { zoomLevel: 2 },
    style: [.5, .5, 1, 1, 1, 1.5, 1.5, 1.5, 2, 2, 2, 2].map(function(width, z) {
        return new Style({
          zIndex: 5,
          fill: new Fill({
            color: [203, 190, 163, Math.max((.3-.5)/8 * z + .5, 0)],
          }),
          stroke: width === 0 ? undefined : new Stroke({
            width: width,
            color: [179, 153, 102, 1],
          }),
        });
      }),
  },

  /* Documentation at
   * https://www.smhi.se/polopoly_fs/1.34541!/dammprod%202013_3%2C%20beskrivning%2C%20SVAR2012_2.pdf
   * */
  'misc.dammar': {
    legend: { zoomLevel: 5, type: 'point' },
    style: [2, 3, 4, 4, 4, 6, 8, 8, 8, 10, 16, 32].map(function(width) {
        return new Style({
          zIndex: 59,
          image: new CircleStyle({
            radius: width,
            fill: new Fill({
              color: 'rgb(219, 30, 42)',
            }),
            stroke: new Stroke({
              width: Math.log2(width) * 2/5,
              color: 'rgb(128, 17, 25)',
            }),
          }),
        });
      }),
  },

  'misc.gigafactories': {
    legend: { zoomLevel: 1, type: 'point' },
    style: [4, 6, 7, 8, 10, 12].map(function(width) {
        return new Style({
          zIndex: 60,
          image: new CircleStyle({
            radius: width,
            fill: new Fill({
              color: 'rgb(152, 78, 163)',
            }),
            stroke: new Stroke({
              width: Math.log2(width) * 2/5,
              color: 'rgb(119, 61, 128)',
            }),
          }),
        });
      })
      .concat([1.5, 2, 2, 2, 2, 2].map(function(width) {
        return new Style({
          zIndex: 58,
          fill: new Fill({
            color: 'rgba(152, 78, 163, .4)',
          }),
          stroke: new Stroke({
            width: width,
            color: 'rgb(119, 61, 128)',
          }),
        });
      })),
  },

  'kskog.1' : { style: [ 56, 168,   0, .2] }, /* #1 Sannolikt kontinuitetsskog (preciserad) */
  'kskog.2' : { style: [169,   0, 230, .2] }, /* #2 Sannolikt påverkad kontinuitetsskog (preciserad) */
  'kskog.3' : { style: [152, 230,   0, .2] }, /* #3 Sannolikt kontinuitetsskog i fjällen (grövre precisering) */
  'kskog.4' : { style: [ 76, 115, 0,   .2] }, /* #4 Potentiell kontinuitetsskog (2015) */
};