diff --git a/rendering/cases/layer-vector-decluttering/expected.png b/rendering/cases/layer-vector-decluttering/expected.png
index 9e862e38d8..dd582db887 100644
Binary files a/rendering/cases/layer-vector-decluttering/expected.png and b/rendering/cases/layer-vector-decluttering/expected.png differ
diff --git a/rendering/cases/layer-vector-decluttering/main.js b/rendering/cases/layer-vector-decluttering/main.js
index a709c5d207..65e809b1e8 100644
--- a/rendering/cases/layer-vector-decluttering/main.js
+++ b/rendering/cases/layer-vector-decluttering/main.js
@@ -90,7 +90,7 @@ layer2.setStyle(function(feature) {
return new Style({
text: new Text({
text: feature.get('text'),
- font: '12px sans-serif'
+ font: '16px Ubuntu'
})
});
});
@@ -119,7 +119,7 @@ layer3.setStyle(function(feature) {
}),
text: new Text({
text: feature.get('text'),
- font: '12px sans-serif',
+ font: '16px Ubuntu',
textBaseline: 'bottom',
offsetY: -5
})
@@ -151,7 +151,8 @@ line.setStyle(new Style({
text: new Text({
placement: 'line',
text: 'east-west',
- font: '12px sans-serif'
+ font: '16px Ubuntu',
+ overflow: true
})
}));
source4.addFeature(point);
diff --git a/rendering/cases/layer-vectorimage-decluttering/expected.png b/rendering/cases/layer-vectorimage-decluttering/expected.png
new file mode 100644
index 0000000000..981c045ee7
Binary files /dev/null and b/rendering/cases/layer-vectorimage-decluttering/expected.png differ
diff --git a/rendering/cases/layer-vectorimage-decluttering/main.js b/rendering/cases/layer-vectorimage-decluttering/main.js
new file mode 100644
index 0000000000..05cb3406c0
--- /dev/null
+++ b/rendering/cases/layer-vectorimage-decluttering/main.js
@@ -0,0 +1,79 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Point from '../../../src/ol/geom/Point.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import Text from '../../../src/ol/style/Text.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+ source: source,
+ style: function(feature) {
+ return new Style({
+ image: new CircleStyle({
+ radius: 15,
+ stroke: new Stroke({
+ color: 'blue'
+ })
+ }),
+ text: new Text({
+ text: feature.get('text'),
+ font: '16px Ubuntu'
+ })
+ });
+ }
+});
+
+const centerFeature = new Feature({
+ geometry: new Point(center),
+ text: 'center'
+});
+source.addFeature(centerFeature);
+source.addFeature(new Feature({
+ geometry: new Point([center[0] - 540, center[1]]),
+ text: 'west'
+}));
+source.addFeature(new Feature({
+ geometry: new Point([center[0] + 540, center[1]]),
+ text: 'east'
+}));
+
+const line = new Feature(new LineString([
+ [center[0] - 650, center[1] - 200],
+ [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+ stroke: new Stroke({
+ color: '#CCC',
+ width: 12
+ }),
+ text: new Text({
+ placement: 'line',
+ text: 'east-west',
+ font: '16px Ubuntu'
+ })
+}));
+source.addFeature(line);
+
+const map = new Map({
+ pixelRatio: 1,
+ layers: [
+ vectorLayer1
+ ],
+ target: 'map',
+ view: new View({
+ center: center,
+ zoom: 13
+ })
+});
+
+map.getView().fit(source.getExtent());
+
+render({tolerance: 0.02});
diff --git a/rendering/cases/text-style-linestring-nice/expected.png b/rendering/cases/text-style-linestring-nice/expected.png
index 7d0c9beaa2..9bd98d1ac2 100644
Binary files a/rendering/cases/text-style-linestring-nice/expected.png and b/rendering/cases/text-style-linestring-nice/expected.png differ
diff --git a/rendering/cases/text-style-linestring-nice/main.js b/rendering/cases/text-style-linestring-nice/main.js
index dbfa9fa703..8ea50ef7a9 100644
--- a/rendering/cases/text-style-linestring-nice/main.js
+++ b/rendering/cases/text-style-linestring-nice/main.js
@@ -23,6 +23,7 @@ feature1.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Hello world',
+ font: '10px Ubuntu',
placement: 'line'
})
}));
@@ -35,11 +36,11 @@ feature2.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Scale 2',
+ font: 'normal 400 12px/1 Ubuntu',
scale: 2,
textBaseline: 'bottom',
textAlign: 'right',
- placement: 'line',
- font: 'bold italic 0.8em serif'
+ placement: 'line'
})
}));
vectorSource.addFeature(feature2);
@@ -50,10 +51,10 @@ const feature3 = new Feature({geometry: lineString3});
feature3.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
+ font: 'italic bold 0.75em Ubuntu',
text: 'Set properties'
})
}));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
feature3.getStyle().getText().setTextAlign('left');
feature3.getStyle().getText().setOffsetX(10);
feature3.getStyle().getText().setOffsetY(-10);
@@ -71,6 +72,7 @@ feature4.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'negative offsetX',
+ font: 'normal 400 10px/1 Ubuntu',
offsetX: -10,
textAlign: 'start',
textBaseline: 'top',
@@ -86,6 +88,7 @@ feature5.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Small text',
+ font: '10px Ubuntu',
offsetY: 5,
scale: 0.7,
textAlign: 'end',
@@ -101,6 +104,7 @@ feature6.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'FILL AND STROKE',
+ font: '10px Ubuntu',
placement: 'line',
fill: new Fill({color: '#FFC0CB'}),
stroke: new Stroke({
diff --git a/rendering/cases/text-style-linestring-ugly/expected.png b/rendering/cases/text-style-linestring-ugly/expected.png
index e15763b567..d91f5b6bba 100644
Binary files a/rendering/cases/text-style-linestring-ugly/expected.png and b/rendering/cases/text-style-linestring-ugly/expected.png differ
diff --git a/rendering/cases/text-style-linestring-ugly/main.js b/rendering/cases/text-style-linestring-ugly/main.js
index c5a8f0ac65..91a2d454bb 100644
--- a/rendering/cases/text-style-linestring-ugly/main.js
+++ b/rendering/cases/text-style-linestring-ugly/main.js
@@ -20,6 +20,7 @@ feature1.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Hello world',
+ font: '10px Ubuntu',
placement: 'line',
overflow: true
})
@@ -37,7 +38,7 @@ feature2.setStyle(new Style({
textBaseline: 'bottom',
textAlign: 'right',
placement: 'line',
- font: 'bold italic 0.8em serif',
+ font: 'italic bold 0.5em Ubuntu',
overflow: true
})
}));
@@ -52,7 +53,6 @@ feature3.setStyle(new Style({
text: 'Set properties'
})
}));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
feature3.getStyle().getText().setTextAlign('left');
feature3.getStyle().getText().setOffsetX(10);
feature3.getStyle().getText().setOffsetY(-10);
@@ -72,6 +72,7 @@ feature4.setStyle(new Style({
stroke: new Stroke({color: 'red'}),
text: new Text({
text: 'PLEASE OMIT ME IM UGLY',
+ font: '10px Ubuntu',
offsetX: -10,
textAlign: 'start',
textBaseline: 'top',
@@ -88,6 +89,7 @@ feature5.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Small text',
+ font: '10px Ubuntu',
offsetY: 5,
scale: 0.7,
rotation: 4,
@@ -106,6 +108,7 @@ feature6.setStyle(new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'FILL AND STROKE',
+ font: '10px Ubuntu',
placement: 'line',
overflow: true,
fill: new Fill({color: '#FFC0CB'}),
diff --git a/rendering/cases/text-style-overlap/expected.png b/rendering/cases/text-style-overlap/expected.png
index f4f1c2daac..34dea782bb 100644
Binary files a/rendering/cases/text-style-overlap/expected.png and b/rendering/cases/text-style-overlap/expected.png differ
diff --git a/rendering/cases/text-style-overlap/main.js b/rendering/cases/text-style-overlap/main.js
index a67c75936e..f6085ee963 100644
--- a/rendering/cases/text-style-overlap/main.js
+++ b/rendering/cases/text-style-overlap/main.js
@@ -19,6 +19,7 @@ const vectorSource = new VectorSource();
const pointStyle = new Style({
text: new Text({
text: 'Point Label',
+ font: 'Ubuntu',
fill: new Fill({
color: 'red'
}),
@@ -31,6 +32,7 @@ const lineStyle = new Style({
stroke: new Stroke({color: 'blue'}),
text: new Text({
text: 'Line Label',
+ font: 'Ubuntu',
fill: new Fill({
color: 'red'
}),
diff --git a/rendering/cases/text-style/expected.png b/rendering/cases/text-style/expected.png
index 6cac4b25d5..c2041072bf 100644
Binary files a/rendering/cases/text-style/expected.png and b/rendering/cases/text-style/expected.png differ
diff --git a/rendering/cases/text-style/main.js b/rendering/cases/text-style/main.js
index 981551850d..547d2e1c36 100644
--- a/rendering/cases/text-style/main.js
+++ b/rendering/cases/text-style/main.js
@@ -20,7 +20,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'hello',
- font: '14px sans-serif',
+ font: '12px Ubuntu',
scale: 2,
fill: new Fill({
color: 'red'
@@ -39,7 +39,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'upside down',
- font: '14px sans-serif',
+ font: '12px Ubuntu',
rotation: Math.PI,
stroke: new Stroke({
color: 'red',
@@ -55,6 +55,7 @@ feature = new Feature({
});
feature.setStyle(new Style({
text: new Text({
+ font: 'Ubuntu',
text: 'rotateWithView',
rotateWithView: true,
stroke: new Stroke({
@@ -71,7 +72,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'hello',
- font: '14px sans-serif',
+ font: '12px Ubuntu',
padding: [1, 2, 3, 5],
backgroundFill: new Fill({
color: 'rgba(55, 55, 55, 0.25)'
@@ -91,7 +92,7 @@ feature = new Feature({
feature.setStyle(new Style({
text: new Text({
text: 'hello',
- font: '14px sans-serif',
+ font: '12px Ubuntu',
padding: [1, 2, 3, 5],
backgroundFill: new Fill({
color: 'rgba(55, 55, 55, 0.25)'
diff --git a/rendering/data/fonts/ubuntu-bold-italic-webfont.eot b/rendering/data/fonts/ubuntu-bold-italic-webfont.eot
new file mode 100644
index 0000000000..9be35a013d
Binary files /dev/null and b/rendering/data/fonts/ubuntu-bold-italic-webfont.eot differ
diff --git a/rendering/data/fonts/ubuntu-bold-italic-webfont.svg b/rendering/data/fonts/ubuntu-bold-italic-webfont.svg
new file mode 100644
index 0000000000..8991b3f3f2
--- /dev/null
+++ b/rendering/data/fonts/ubuntu-bold-italic-webfont.svg
@@ -0,0 +1,2405 @@
+
+
+
\ No newline at end of file
diff --git a/rendering/data/fonts/ubuntu-bold-italic-webfont.ttf b/rendering/data/fonts/ubuntu-bold-italic-webfont.ttf
new file mode 100755
index 0000000000..72a5a99ac0
Binary files /dev/null and b/rendering/data/fonts/ubuntu-bold-italic-webfont.ttf differ
diff --git a/rendering/data/fonts/ubuntu-bold-italic-webfont.woff b/rendering/data/fonts/ubuntu-bold-italic-webfont.woff
new file mode 100644
index 0000000000..5e1a99d899
Binary files /dev/null and b/rendering/data/fonts/ubuntu-bold-italic-webfont.woff differ
diff --git a/rendering/data/fonts/ubuntu-bold-italic-webfont.woff2 b/rendering/data/fonts/ubuntu-bold-italic-webfont.woff2
new file mode 100644
index 0000000000..c5c0efc566
Binary files /dev/null and b/rendering/data/fonts/ubuntu-bold-italic-webfont.woff2 differ
diff --git a/rendering/data/fonts/ubuntu-regular-webfont.eot b/rendering/data/fonts/ubuntu-regular-webfont.eot
new file mode 100644
index 0000000000..87f22e6c8a
Binary files /dev/null and b/rendering/data/fonts/ubuntu-regular-webfont.eot differ
diff --git a/rendering/data/fonts/ubuntu-regular-webfont.svg b/rendering/data/fonts/ubuntu-regular-webfont.svg
new file mode 100644
index 0000000000..542bc761f0
--- /dev/null
+++ b/rendering/data/fonts/ubuntu-regular-webfont.svg
@@ -0,0 +1,2405 @@
+
+
+
\ No newline at end of file
diff --git a/rendering/data/fonts/ubuntu-regular-webfont.ttf b/rendering/data/fonts/ubuntu-regular-webfont.ttf
new file mode 100755
index 0000000000..d748728a20
Binary files /dev/null and b/rendering/data/fonts/ubuntu-regular-webfont.ttf differ
diff --git a/rendering/data/fonts/ubuntu-regular-webfont.woff b/rendering/data/fonts/ubuntu-regular-webfont.woff
new file mode 100644
index 0000000000..29e0a37735
Binary files /dev/null and b/rendering/data/fonts/ubuntu-regular-webfont.woff differ
diff --git a/rendering/data/fonts/ubuntu-regular-webfont.woff2 b/rendering/data/fonts/ubuntu-regular-webfont.woff2
new file mode 100644
index 0000000000..1ab75a4288
Binary files /dev/null and b/rendering/data/fonts/ubuntu-regular-webfont.woff2 differ
diff --git a/rendering/default/index.html b/rendering/default/index.html
index c7131e82f1..f585b44d03 100644
--- a/rendering/default/index.html
+++ b/rendering/default/index.html
@@ -16,6 +16,20 @@
.ol-control {
display: none;
}
+ @font-face {
+ font-family: "Ubuntu";
+ src: url("/data/fonts/ubuntu-regular-webfont.eot");
+ src: url("/data/fonts/ubuntu-regular-webfont.woff") format("woff"),
+ url("/data/fonts/ubuntu-regular-webfont.svg#filename") format("svg");
+ }
+ @font-face {
+ font-family: "Ubuntu";
+ font-weight: bold;
+ font-style: italic;
+ src: url("/data/fonts/ubuntu-bold-italic-webfont.eot");
+ src: url("/data/fonts/ubuntu-bold-italic-webfont.woff") format("woff"),
+ url("/data/fonts/ubuntu-bold-italic-webfont.svg#filename") format("svg");
+ }
diff --git a/rendering/test.js b/rendering/test.js
index a6653316b4..9941a920a9 100755
--- a/rendering/test.js
+++ b/rendering/test.js
@@ -313,6 +313,7 @@ if (require.main === module) {
const options = yargs.
option('fix', {
describe: 'Accept all screenshots as accepted',
+ type: 'boolean',
default: false
}).
option('host', {
diff --git a/test/rendering/ol/layer/expected/vector-canvas-declutter-image.png b/test/rendering/ol/layer/expected/vector-canvas-declutter-image.png
deleted file mode 100644
index e361809630..0000000000
Binary files a/test/rendering/ol/layer/expected/vector-canvas-declutter-image.png and /dev/null differ
diff --git a/test/rendering/ol/layer/expected/vector-canvas-declutter-line.png b/test/rendering/ol/layer/expected/vector-canvas-declutter-line.png
deleted file mode 100644
index 7cb8c929d0..0000000000
Binary files a/test/rendering/ol/layer/expected/vector-canvas-declutter-line.png and /dev/null differ
diff --git a/test/rendering/ol/layer/expected/vector-canvas-declutter.png b/test/rendering/ol/layer/expected/vector-canvas-declutter.png
deleted file mode 100644
index d92be539df..0000000000
Binary files a/test/rendering/ol/layer/expected/vector-canvas-declutter.png and /dev/null differ
diff --git a/test/rendering/ol/layer/vectorimage.test.js b/test/rendering/ol/layer/vectorimage.test.js
deleted file mode 100644
index 0097c21847..0000000000
--- a/test/rendering/ol/layer/vectorimage.test.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import Circle from '../../../../src/ol/geom/Circle.js';
-import CircleStyle from '../../../../src/ol/style/Circle.js';
-import Feature from '../../../../src/ol/Feature.js';
-import Fill from '../../../../src/ol/style/Fill.js';
-import LineString from '../../../../src/ol/geom/LineString.js';
-import Map from '../../../../src/ol/Map.js';
-import Point from '../../../../src/ol/geom/Point.js';
-import Polygon from '../../../../src/ol/geom/Polygon.js';
-import Stroke from '../../../../src/ol/style/Stroke.js';
-import Style from '../../../../src/ol/style/Style.js';
-import Text from '../../../../src/ol/style/Text.js';
-import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
-import VectorSource from '../../../../src/ol/source/Vector.js';
-import View from '../../../../src/ol/View.js';
-
-describe('ol.rendering.layer.VectorImage', function() {
-
- const center = [1825927.7316762917, 6143091.089223046];
-
- let map, source;
- function createMap() {
- source = new VectorSource();
- map = new Map({
- pixelRatio: 1,
- target: createMapDiv(80, 80),
- view: new View({
- center: center,
- zoom: 13
- })
- });
- }
-
- afterEach(function() {
- if (map) {
- disposeMap(map);
- }
- map = null;
- });
-
- function addCircle(r) {
- source.addFeature(new Feature(new Circle(center, r)));
- }
-
- function addPolygon(r) {
- source.addFeature(new Feature(new Polygon([
- [
- [center[0] - r, center[1] - r],
- [center[0] + r, center[1] - r],
- [center[0] + r, center[1] + r],
- [center[0] - r, center[1] + r],
- [center[0] - r, center[1] - r]
- ]
- ])));
- }
-
- it('unskips features correctly', function(done) {
- createMap();
- addCircle(500);
- addPolygon(300);
- map.skipFeature(source.getFeatures()[1]);
- map.addLayer(new VectorImageLayer({
- source: source,
- style: new Style({
- fill: new Fill({
- color: 'rgba(255,0,0,0.5)'
- }),
- stroke: new Stroke({
- width: 2,
- color: 'black'
- })
- })
- }));
- map.renderSync();
- map.unskipFeature(source.getFeatures()[1]);
- map.once('postrender', function() {
- expectResemble(map, 'rendering/ol/layer/expected/vector.png',
- IMAGE_TOLERANCE, done);
- });
- });
-
- it('declutters text', function(done) {
- createMap();
- const layer = new VectorImageLayer({
- declutter: true,
- source: source
- });
- map.addLayer(layer);
-
- const centerFeature = new Feature({
- geometry: new Point(center),
- text: 'center'
- });
- source.addFeature(centerFeature);
- source.addFeature(new Feature({
- geometry: new Point([center[0] - 540, center[1]]),
- text: 'west'
- }));
- source.addFeature(new Feature({
- geometry: new Point([center[0] + 540, center[1]]),
- text: 'east'
- }));
-
- layer.setStyle(function(feature) {
- return new Style({
- text: new Text({
- text: feature.get('text'),
- font: '12px sans-serif'
- })
- });
- });
-
- map.once('postrender', function() {
- const hitDetected = map.getFeaturesAtPixel([42, 42]);
- expect(hitDetected).to.have.length(1);
- expect(hitDetected[0]).to.equal(centerFeature);
- expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter.png',
- 2.2, done);
- });
- });
-
- it('declutters images', function(done) {
- createMap();
- const layer = new VectorImageLayer({
- declutter: true,
- source: source
- });
- map.addLayer(layer);
-
- const centerFeature = new Feature({
- geometry: new Point(center)
- });
- source.addFeature(centerFeature);
- source.addFeature(new Feature({
- geometry: new Point([center[0] - 540, center[1]])
- }));
- source.addFeature(new Feature({
- geometry: new Point([center[0] + 540, center[1]])
- }));
-
- layer.setStyle(function(feature) {
- return new Style({
- image: new CircleStyle({
- radius: 15,
- stroke: new Stroke({
- color: 'blue'
- })
- })
- });
- });
-
- map.once('postrender', function() {
- const hitDetected = map.getFeaturesAtPixel([40, 40]);
- expect(hitDetected).to.have.length(1);
- expect(hitDetected[0]).to.equal(centerFeature);
- expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image.png',
- IMAGE_TOLERANCE, done);
- });
- });
-
- it('declutters text along lines and images', function(done) {
- createMap();
- const layer = new VectorImageLayer({
- declutter: true,
- source: source
- });
- map.addLayer(layer);
-
- const point = new Feature(new Point(center));
- point.setStyle(new Style({
- image: new CircleStyle({
- radius: 8,
- stroke: new Stroke({
- color: 'blue'
- })
- })
- }));
- const line = new Feature(new LineString([
- [center[0] - 650, center[1] - 200],
- [center[0] + 650, center[1] - 200]
- ]));
- line.setStyle(new Style({
- stroke: new Stroke({
- color: '#CCC',
- width: 12
- }),
- text: new Text({
- placement: 'line',
- text: 'east-west',
- font: '12px sans-serif'
- })
- }));
-
- source.addFeature(point);
- source.addFeature(line);
-
- map.once('postrender', function() {
- expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line.png',
- IMAGE_TOLERANCE, done);
- });
- });
-
-});