Icon Symbolizer width and height

vector 82 style 25 icon 9 marker 6 width 1 height 1

Width:

Height:

Scale approx.:

Example using the width and height properties of an icon.

Example using the width and height properties of an icon. Adjust the actual width and height with the input fields above.

main.js

import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Point from 'ol/geom/Point.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import Icon from 'ol/style/Icon.js';
import Style from 'ol/style/Style.js';

const widthInput = document.getElementById('width-input');
const heightInput = document.getElementById('height-input');
const clearWidthButton = document.getElementById('clear-width-button');
const clearHeightButton = document.getElementById('clear-height-button');
const scaleSpan = document.getElementById('scale');

const iconFeature = new Feature({
  geometry: new Point([0, 0]),
  name: 'Null Island',
  population: 4000,
  rainfall: 500,
});
const iconStyle = new Style({
  image: new Icon({
    src: 'data/icon.png',
    width: Number(widthInput.value),
    height: Number(heightInput.value),
  }),
});
iconFeature.setStyle(iconStyle);

widthInput.addEventListener('input', (event) => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      width: Number(event.target.value),
      height: currentIcon.getHeight(),
    }),
  );
  iconFeature.setStyle(iconStyle);
});
heightInput.addEventListener('input', (event) => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      height: Number(event.target.value),
      width: currentIcon.getWidth(),
    }),
  );
  iconFeature.setStyle(iconStyle);
});
clearWidthButton.addEventListener('click', () => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      height: currentIcon.getHeight(),
    }),
  );
  iconFeature.setStyle(iconStyle);
  widthInput.value = String(Math.round(iconStyle.getImage().getWidth()));
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
  iconFeature.setStyle(iconStyle);
});
clearHeightButton.addEventListener('click', () => {
  const currentIcon = iconStyle.getImage();
  iconStyle.setImage(
    new Icon({
      src: 'data/icon.png',
      width: currentIcon.getWidth(),
    }),
  );
  iconFeature.setStyle(iconStyle);
  heightInput.value = String(Math.round(iconStyle.getImage().getHeight()));
  iconFeature.setStyle(iconStyle);
});

const vectorSource = new VectorSource({
  features: [iconFeature],
});

const vectorLayer = new VectorLayer({
  source: vectorSource,
});

const map = new Map({
  layers: [vectorLayer],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 3,
  }),
});
map.on(
  'rendercomplete',
  () => (scaleSpan.innerText = formatScale(iconStyle.getImage().getScale())),
);

function formatScale(scale) {
  return Array.isArray(scale)
    ? '[' + scale?.map((v) => v.toFixed(2)).join(', ') + ']'
    : scale;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Icon Symbolizer width and height</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"><div id="popup"></div></div>

    <div class="controls">
      <div style="margin: 1em 0;">
        <label for="width">Width:</label>
        <input id="width-input" name="width" type="number" value="40"/>
        <button id="clear-width-button">clear</button>
      </div>
      <div style="margin: 1em 0;">
        <label for="height">Height:</label>
        <input id="height-input" name="height" type="number" value="40"/>
        <button id="clear-height-button">clear</button>
      </div>
      <div style="margin: 1em 0;">
        <label for="height">Scale approx.:</label>
        <span id="scale"></span>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "icon-width",
  "dependencies": {
    "ol": "10.5.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}