tag might be smaller, but
- // it is more likely to interfere with page styles
- '
' +
- // A single space is the text default
- (options.sampleText || ' ') +
- '
' +
- '
' +
- (options.sampleText || ' ') +
- '
'
- );
- }
-
- if (process.env.isLegacy) {
- // Attempt to finish early if the font is already loaded
- // The tryFinish call happens after the test elements are added
- tryFinish(
- // Save bytes by creating and assigning the root div inside call
- // appendChild returns the root, allowing innerHTML usage inline
- document.body.appendChild(root = document.createElement('div')).innerHTML =
- // IE6 cannot create automatically sized divs that will
- // contain an absolutely positioned element
- // Such elements will instead break out of their bounds
- // The only other method to associate the width of one
- // element's natural size with the size of another is table
- // Style value with no spaces does not require quotes
- // position:absolute breaks the element out of page flow
- // IE6 does not support position:fixed
- // Out of bounds percentage bottom/right prevents scrollbars
- // width:auto prevents interference from width:100% styles
- // which are commonly added
- '
' +
- // tag is implied
- '' +
- // position:relative allows the iframe's absolute
- // positioning to be relative to the |
- ' | ' +
- // | is implied
- //
is implied
- '' +
- // Inner needs surrounding, equal-sized periods
- // to prevent some older browsers from collapsing the
- // whitespace character (space) at insertion time
- // Monospace font compresses better than serif here
- // white-space:pre ensures no text wrapping will occur
- '| ' +
- // font combines font-size and font-family
- // Font size 999px differentiates fallback fonts
- // Using font size in pixels prevents possible
- // failure due to zero-sized default page fonts
- '.' +
- // A single space is the text default
- (options.sampleText || ' ') +
- '.' +
- // Closing tags for | , |
, and
are implied
- '
' +
- '
' +
- '' +
- '| ' +
- ' |
' +
- '| ' +
- '.' +
- (options.sampleText || ' ') +
- '.' +
- ' |
'
- );
- }
-
- // If the font is already loaded, tryFinish will have already destroyed
- // the root reference, so the iframes will never be inserted
- if (root) {
- if (process.env.isTest) {
- window.reporter.iframesCreated(fontNameCopy);
- }
-
- if (!process.env.isLegacy) {
- // The fontName value has already been used, reuse for reference
- // Save bytes by creating and assigning the iframe inside call
- // appendChild returns the iframe, allowing style usage inline
- // The iframe's width only needs to be relative to the parent's
- root.firstChild.appendChild(
- fontName = document.createElement('iframe')
- ).style.width = '999%';
-
- // contentWindow becomes available upon DOM insertion
- // Assigning a non-closure function to onresize prevents the
- // possibility of memory leaks through event handlers
- fontName.contentWindow.onresize = tryFinish;
-
- // By reusing the fontName (via reassignment), the DOM reference
- // to the first iframe is broken, reducing memory leak potential
- root.lastChild.appendChild(
- fontName = document.createElement('iframe')
- ).style.width = '999%';
-
- fontName.contentWindow.onresize = tryFinish;
- }
-
- if (process.env.isLegacy) {
- // The fontName value has already been used, reuse for reference
- // Save bytes by creating and assigning the iframe inside call
- // Save bytes by duplicating the deeply nested DOM insertion
- // appendChild returns the iframe, allowing style usage inline
- // position:absolute prevents the iframe from influencing the
- // table's width
- // Some IE browsers will generate scrollbars if the iframe
- // isn't positioned to the top-left
- // The iframe's width only needs to be relative to the parent's
- root.firstChild.firstChild.firstChild.firstChild.appendChild(
- fontName = document.createElement('iframe')
- ).style.cssText = 'position:absolute;bottom:999%;right:999%;width:999%';
-
- // contentWindow becomes available upon DOM insertion
- // Assigning a non-closure function to onresize prevents the
- // possibility of memory leaks through event handlers
- // Older IE browsers require iframe onresize event handlers
- // to be attached via attachEvent
- if (fontName.attachEvent) {
- fontName.contentWindow.attachEvent('onresize', tryFinish);
- } else {
- fontName.contentWindow.onresize = tryFinish;
- }
-
- // By reusing the fontName (via reassignment), the DOM reference
- // to the first iframe is broken, reducing memory leak potential
- root.lastChild.firstChild.firstChild.firstChild.appendChild(
- fontName = document.createElement('iframe')
- ).style.cssText = 'position:absolute;bottom:999%;right:999%;width:999%';
-
- if (fontName.attachEvent) {
- fontName.contentWindow.attachEvent('onresize', tryFinish);
- } else {
- fontName.contentWindow.onresize = tryFinish;
- }
- }
-
- if (!process.env.isTest) {
- // Because of iframe loading nuances, sometimes the font can finish
- // loading after the root is inserted, but before the onresize
- // event handler can be added to an iframe, creating a potential
- // for a missed resize event
- // This setTimeout gives the browser an additional chance to catch
- // a font load after returning control to the browser
- // By assigning the result of setTimeout (a timeout ID) to the
- // fontName, the DOM reference to the second iframe is broken,
- // further reducing the possibility of memory leaks
- fontName = setTimeout(tryFinish);
- }
-
- if (process.env.isTest) {
- // When testing, report that this timeout was used
- fontName = setTimeout(function() {
- if (root) {
- window.reporter.requiredExtraTimeout(fontNameCopy);
- tryFinish();
- }
- });
- }
- }
-};
-/**
- uses the onfontready function in a Promise throwing an error it the promise rejects (after 3000ms)
-*/
-export const loadFont = (fontName, options = {}) =>
- new Promise((resolve, reject) => {
- onfontready(fontName, resolve, {
- timeoutAfter: options.timeoutAfter,
-
- // Catch should only occur if onTimeout would normally be called
- onTimeout: reject,
- sampleText: options.sampleText,
- generic: options.generic
- });
- });
diff --git a/web/client/utils/styleparser/StyleParserUtils.js b/web/client/utils/styleparser/StyleParserUtils.js
index 21252393cb..b77a911df6 100644
--- a/web/client/utils/styleparser/StyleParserUtils.js
+++ b/web/client/utils/styleparser/StyleParserUtils.js
@@ -853,6 +853,26 @@ export const parseSymbolizerExpressions = (symbolizer, feature) => {
};
+const loadFontAwesome = () => {
+ return new Promise((resolve) => {
+ const fontAwesomeHref = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
+ if (!document.querySelector(`link[href='${fontAwesomeHref}']`)) {
+ const fontAwesome = document.createElement('link');
+ fontAwesome.setAttribute('rel', 'stylesheet');
+ fontAwesome.setAttribute('href', fontAwesomeHref);
+ document.head.appendChild(fontAwesome);
+ fontAwesome.onload = () => {
+ resolve();
+ };
+ fontAwesome.onerror = () => {
+ resolve();
+ };
+ } else {
+ resolve();
+ }
+ });
+};
+
/**
* prefetch all image or mark symbol in a geostyler style
* @param {object} geoStylerStyle geostyler style
@@ -886,16 +906,19 @@ export const drawIcons = (geoStylerStyle, options) => {
}, []);
const marks = symbolizers.filter(({ kind }) => kind === 'Mark');
const icons = symbolizers.filter(({ kind }) => kind === 'Icon');
- return new Promise((resolve) => {
- if (marks.length > 0 || icons.length > 0) {
- Promise.all([
- ...marks.map(getWellKnownNameImageFromSymbolizer),
- ...icons.map(getImageFromSymbolizer)
- ]).then((images) => {
- resolve(images);
- });
- } else {
- resolve([]);
- }
- });
+ return loadFontAwesome()
+ .then(
+ () => new Promise((resolve) => {
+ if (marks.length > 0 || icons.length > 0) {
+ Promise.all([
+ ...marks.map(getWellKnownNameImageFromSymbolizer),
+ ...icons.map(getImageFromSymbolizer)
+ ]).then((images) => {
+ resolve(images);
+ });
+ } else {
+ resolve([]);
+ }
+ })
+ );
};