replace example

examples/icon-scale.html

@@ -1,16 +1,211 @@
 ---
 layout: example.html
-title: Icon Scale
+title: Icon and Label Scale
 shortdesc: Example of scaling icons and labels.
 docs: >
   Icons and labels can be scaled in both dimensions if required. A negative value will flip the image
-  or text around its anchor point (reversed text is <b>not</b> suitable for line placement). A newline
-  character inserted in label text is interpreted in a <b>vector layer</b>, but will not be shown in
-  a <b>vector context</b>.
+  or text around its anchor point (reversed text is <b>not</b> suitable for line placement).
 tags: "vector, style, icon, label, scale"
-resources:
-  - https://code.jquery.com/jquery-3.5.1.min.js
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
-  - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js
 ---
-<div id="map" class="map"><div id="popup"></div></div>
+<div id="map" class="map"></div>
+<table class="controls">
+  <tr>
+    <th>
+      Image
+    </th>
+    <th></th>
+    <th style="visibility: hidden;">-0.00 π</th>
+    <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
+    <th>
+      Text
+    </th>
+    <th></th>
+    <th></th>
+  </tr>
+  <tr>
+    <td><label for="rotateWithView">Rotate with view</label>&nbsp;&nbsp;</td>
+    <td>
+      <input id="rotateWithView" type="checkbox" />
+    </td>
+    <td><span id="rotateWithViewOut"></span></td>
+    <td></td>
+    <td><label for="textRotateWithView">Rotate with view</label>&nbsp;&nbsp;</td>
+    <td>
+      <input id="textRotateWithView" type="checkbox" />
+    </td>
+    <td><span id="textRotateWithViewOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="rotation">Rotation</label></td>
+    <td>
+      <input
+        id="rotation"
+        type="range"
+        min="-1"
+        max="1"
+        step="0.05"
+        value="0.25"
+      />
+    </td>
+    <td><span id="rotationOut"></span> π</td>
+    <td></td>
+    <td><label for="textRotation">Rotation</label></td>
+    <td>
+      <input
+        id="textRotation"
+        type="range"
+        min="-1"
+        max="1"
+        step="0.05"
+        value="0.25"
+      />
+    </td>
+    <td><span id="textRotationOut"></span> π</td>
+  </tr>
+  <tr>
+    <td><label for="scaleX">Scale X</label></td>
+    <td>
+      <input
+        id="scaleX"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="scaleXOut"></span></td>
+    <td></td>
+    <td><label for="textScaleX">Scale X</label></td>
+    <td>
+      <input
+        id="textScaleX"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="textScaleXOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="scaleY">Scale Y</label></td>
+    <td>
+      <input
+        id="scaleY"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="scaleYOut"></span></td>
+    <td></td>
+    <td><label for="textScaleY">Scale Y</label></td>
+    <td>
+      <input
+        id="textScaleY"
+        type="range"
+        min="-2"
+        max="2"
+        step="0.1"
+        value="1"
+      />
+    </td>
+    <td><span id="textScaleYOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="anchorX">Anchor X</label></td>
+    <td>
+      <input
+        id="anchorX"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value="0.5"
+      />
+    </td>
+    <td><span id="anchorXOut"></span></td>
+    <td></td>
+    <td><label for="textAlign">Align</label></td>
+    <td>
+      <input
+        id="textAlign"
+        type="range"
+        min="0"
+        max="2"
+        step="1"
+        value="1"
+      />
+    </td>
+    <td><span id="textAlignOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="anchorY">Anchor Y</label></td>
+    <td>
+      <input
+        id="anchorY"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        value="1"
+      />
+    </td>
+    <td><span id="anchorYOut"></span></td>
+    <td></td>
+    <td><label for="textBaseline">Baseline</label></td>
+    <td>
+      <input
+        id="textBaseline"
+        type="range"
+        min="0"
+        max="2"
+        step="1"
+        value="0"
+      />
+    </td>
+    <td><span id="textBaselineOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="displacementX">Displacement X</label></td>
+    <td>
+      <input
+        id="displacementX"
+        type="range"
+        min="-100"
+        max="100"
+        value="0"
+      />
+    </td>
+    <td><span id="displacementXOut"></span></td>
+    <td></td>
+    <td><label for="textOffsetX">Offset X</label></td>
+    <td>
+      <input id="textOffsetX" type="range" min="-100" max="100" value="0" />
+    </td>
+    <td><span id="textOffsetXOut"></span></td>
+  </tr>
+  <tr>
+    <td><label for="displacementY">Displacement Y</label></td>
+    <td>
+      <input
+        id="displacementY"
+        type="range"
+        min="-100"
+        max="100"
+        value="0"
+      />
+    </td>
+    <td><span id="displacementYOut"></span></td>
+    <td></td>
+    <td><label for="textOffsetY">Offset Y</label></td>
+    <td>
+      <input id="textOffsetY" type="range" min="-100" max="100" value="0" />
+    </td>
+    <td><span id="textOffsetYOut"></span></td>
+  </tr>
+</table>

examples/icon-scale.js

@@ -1,14 +1,56 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import Overlay from '../src/ol/Overlay.js';
 import Point from '../src/ol/geom/Point.js';
 import TileJSON from '../src/ol/source/TileJSON.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import View from '../src/ol/View.js';
-import {Icon, Style, Text} from '../src/ol/style.js';
+import {Circle, Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {fromLonLat} from '../src/ol/proj.js';
-import {getVectorContext} from '../src/ol/render.js';
+
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+});
+
+const iconStyle = new Style({
+  image: new Icon({
+    anchor: [0.5, 1],
+    src: 'data/world.png',
+  }),
+  text: new Text({
+    text: 'World\nText',
+    font: 'bold 30px Calibri,sans-serif',
+    fill: new Fill({
+      color: 'black',
+    }),
+    stroke: new Stroke({
+      color: 'white',
+      width: 2,
+    }),
+  }),
+});
+
+const pointStyle = new Style({
+  image: new Circle({
+    radius: 7,
+    fill: new Fill({
+      color: 'black',
+    }),
+    stroke: new Stroke({
+      color: 'white',
+      width: 2,
+    }),
+  }),
+});
+
+iconFeature.setStyle([pointStyle, iconStyle]);
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
 
 const rasterLayer = new TileLayer({
   source: new TileJSON({
@@ -17,115 +59,118 @@ const rasterLayer = new TileLayer({
   }),
 });
 
-const iconFeature = new Feature({
-  geometry: new Point(fromLonLat([0, -10])),
-  name: 'Fish.1',
-});
-
-const feature1 = new Feature({
-  geometry: new Point(fromLonLat([0, -10])),
-  name: 'Fish.1 Island',
-});
-
-const feature2 = new Feature({
-  geometry: new Point(fromLonLat([-30, 10])),
-  name: 'Fish.2 Island',
-});
-
-const iconStyle = new Style({
-  image: new Icon({
-    anchor: [0.5, 0.9],
-    src: 'data/fish.png',
-    crossOrigin: '',
-    scale: [0, 0],
-    rotation: Math.PI / 4,
-  }),
-  text: new Text({
-    text: 'FISH\nTEXT',
-    scale: [0, 0],
-    rotation: Math.PI / 4,
-    textAlign: 'center',
-    textBaseline: 'top',
-  }),
-});
-
-let i = 0;
-let j = 45;
-
-iconFeature.setStyle(function () {
-  const x = Math.sin((i * Math.PI) / 180) * 3;
-  const y = Math.sin((j * Math.PI) / 180) * 4;
-  iconStyle.getImage().setScale([x, y]);
-  iconStyle.getText().setScale([x, y]);
-  return iconStyle;
-});
-
-rasterLayer.on('postrender', function (event) {
-  const vectorContext = getVectorContext(event);
-  const x = Math.cos((i * Math.PI) / 180) * 3;
-  const y = Math.cos((j * Math.PI) / 180) * 4;
-  iconStyle.getImage().setScale([x, y]);
-  iconStyle.getText().setScale([x, y]);
-  vectorContext.drawFeature(feature2, iconStyle);
-});
-
-const vectorSource = new VectorSource({
-  features: [iconFeature, feature1, feature2],
-});
-
-const vectorLayer = new VectorLayer({
-  source: vectorSource,
-});
-
 const map = new Map({
   layers: [rasterLayer, vectorLayer],
-  target: document.getElementById('map'),
+  target: 'map',
   view: new View({
-    center: fromLonLat([-15, 0]),
+    center: [0, 0],
     zoom: 3,
   }),
 });
 
-setInterval(function () {
-  i = (i + 4) % 360;
-  j = (j + 5) % 360;
-  vectorSource.changed();
-}, 1000);
-
-const element = document.getElementById('popup');
-
-const popup = new Overlay({
-  element: element,
-  positioning: 'bottom-center',
-  stopEvent: false,
-});
-map.addOverlay(popup);
-
-// display popup on click
-map.on('click', function (evt) {
-  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
-    return feature;
-  });
-  $(element).popover('dispose');
-  if (feature) {
-    popup.setPosition(evt.coordinate);
-    $(element).popover({
-      placement: 'top',
-      html: true,
-      animation: false,
-      content: feature.get('name'),
-    });
-    $(element).popover('show');
+const textAlignments = ['left', 'center', 'right'];
+const textBaselines = ['top', 'middle', 'bottom'];
+const controls = {};
+const controlIds = [
+  'rotation',
+  'rotateWithView',
+  'scaleX',
+  'scaleY',
+  'anchorX',
+  'anchorY',
+  'displacementX',
+  'displacementY',
+  'textRotation',
+  'textRotateWithView',
+  'textScaleX',
+  'textScaleY',
+  'textAlign',
+  'textBaseline',
+  'textOffsetX',
+  'textOffsetY',
+];
+controlIds.forEach(function (id) {
+  const control = document.getElementById(id);
+  const output = document.getElementById(id + 'Out');
+  function setOutput() {
+    const value = parseFloat(control.value);
+    if (control.type === 'checkbox') {
+      output.innerText = control.checked;
+    } else if (id === 'textAlign') {
+      output.innerText = textAlignments[value];
+    } else if (id === 'textBaseline') {
+      output.innerText = textBaselines[value];
+    } else {
+      output.innerText = control.step.startsWith('0.')
+        ? value.toFixed(2)
+        : value;
+    }
   }
+  control.addEventListener('input', function () {
+    setOutput();
+    updateStyle();
+  });
+  setOutput();
+  controls[id] = control;
 });
 
+function updateStyle() {
+  iconStyle
+    .getImage()
+    .setRotation(parseFloat(controls['rotation'].value) * Math.PI);
+
+  iconStyle.getImage().setRotateWithView(controls['rotateWithView'].checked);
+
+  iconStyle
+    .getImage()
+    .setScale([
+      parseFloat(controls['scaleX'].value),
+      parseFloat(controls['scaleY'].value),
+    ]);
+
+  iconStyle
+    .getImage()
+    .setAnchor([
+      parseFloat(controls['anchorX'].value),
+      parseFloat(controls['anchorY'].value),
+    ]);
+
+  iconStyle
+    .getImage()
+    .setDisplacement([
+      parseFloat(controls['displacementX'].value),
+      parseFloat(controls['displacementY'].value),
+    ]);
+
+  iconStyle
+    .getText()
+    .setRotation(parseFloat(controls['textRotation'].value) * Math.PI);
+
+  iconStyle.getText().setRotateWithView(controls['textRotateWithView'].checked);
+
+  iconStyle
+    .getText()
+    .setScale([
+      parseFloat(controls['textScaleX'].value),
+      parseFloat(controls['textScaleY'].value),
+    ]);
+
+  iconStyle
+    .getText()
+    .setTextAlign(textAlignments[parseFloat(controls['textAlign'].value)]);
+
+  iconStyle
+    .getText()
+    .setTextBaseline(textBaselines[parseFloat(controls['textBaseline'].value)]);
+
+  iconStyle.getText().setOffsetX(parseFloat(controls['textOffsetX'].value));
+
+  iconStyle.getText().setOffsetY(parseFloat(controls['textOffsetY'].value));
+}
+updateStyle();
+
 // change mouse cursor when over marker
 map.on('pointermove', function (e) {
-  const pixel = map.getEventPixel(e.originalEvent);
-  const hit = map.hasFeatureAtPixel(pixel);
-  map.getTarget().style.cursor = hit ? 'pointer' : '';
-});
-// Close the popup when the map is moved
-map.on('movestart', function () {
-  $(element).popover('dispose');
+  const hit = map.hasFeatureAtPixel(e.pixel);
+  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
 });