Icon Symbolizer width and height

vector 72 style 24 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 Point from 'ol/geom/Point.js';
import TileJSON from 'ol/source/TileJSON.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.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: widthInput.value,
    height: heightInput.value,
  }),
});
iconFeature.setStyle(iconStyle);

const image = iconStyle.getImage().getImage();
image.addEventListener('load', () => {
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
});

widthInput.addEventListener('input', (event) => {
  iconStyle.getImage().setWidth(event.target.value);
  iconFeature.changed();
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
});
heightInput.addEventListener('input', (event) => {
  iconStyle.getImage().setHeight(event.target.value);
  iconFeature.changed();
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
});
clearWidthButton.addEventListener('click', () => {
  widthInput.value = undefined;
  iconStyle.getImage().setWidth(undefined);
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
  iconFeature.changed();
});
clearHeightButton.addEventListener('click', () => {
  heightInput.value = undefined;
  iconStyle.getImage().setHeight(undefined);
  scaleSpan.innerText = formatScale(iconStyle.getImage().getScale());
  iconFeature.changed();
});

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

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

const rasterLayer = new TileLayer({
  source: new TileJSON({
    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
    crossOrigin: '',
  }),
});

new Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: [0, 0],
    zoom: 3,
  }),
});

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="./resources/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>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="./resources/elm-pep.js"></script>
    <script src="./resources/bootstrap.bundle.min.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

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