From a80458f2c30974c8c7999263a01a1a6bd71cea9f Mon Sep 17 00:00:00 2001
From: Andreas Hocevar <andreas.hocevar@gmail.com>
Date: Tue, 10 Oct 2017 18:57:15 +0200
Subject: [PATCH] Show dynamic font loading in the ugly vector-labels example

---
 examples/vector-labels.html | 9 +++++----
 examples/vector-labels.js   | 8 ++++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/examples/vector-labels.html b/examples/vector-labels.html
index 872bbb8213..67b00a4020 100644
--- a/examples/vector-labels.html
+++ b/examples/vector-labels.html
@@ -6,7 +6,8 @@ docs: >
   This example showcases a number of options that can be set on text styles.
   When "Text/Wrap" is chosen (for example for the line features), the label is
   wrapped by inserting the character `\n`, which will create a multi-line
-  label.
+  label. The "Open Sans" web font will be loaded on demand, to show dynamic font
+  loading.
 tags: "geojson, vector, openstreetmap, label"
 ---
 <div id="map" class="map"></div>
@@ -70,7 +71,7 @@ tags: "geojson, vector, openstreetmap, label"
     <select id="points-font">
       <option value="Arial" selected="selected">Arial</option>
       <option value="Courier New">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="Open Sans">Open Sans</option>
       <option value="Verdana">Verdana</option>
     </select>
     <br />
@@ -179,7 +180,7 @@ tags: "geojson, vector, openstreetmap, label"
     <select id="lines-font">
       <option value="Arial">Arial</option>
       <option value="Courier New" selected="selected">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="Open Sans">Open Sans</option>
       <option value="Verdana">Verdana</option>
     </select>
     <br />
@@ -288,7 +289,7 @@ tags: "geojson, vector, openstreetmap, label"
     <select id="polygons-font">
       <option value="Arial">Arial</option>
       <option value="Courier New">Courier New</option>
-      <option value="Quattrocento Sans">Quattrocento</option>
+      <option value="Open Sans">Open Sans</option>
       <option value="Verdana" selected="selected">Verdana</option>
     </select>
     <br />
diff --git a/examples/vector-labels.js b/examples/vector-labels.js
index c11bf40825..4e0e28f81b 100644
--- a/examples/vector-labels.js
+++ b/examples/vector-labels.js
@@ -11,6 +11,7 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
+var openSansAdded = false;
 
 var myDom = {
   points: {
@@ -96,6 +97,13 @@ var createTextStyle = function(feature, resolution, dom) {
   var maxAngle = dom.maxangle ? parseFloat(dom.maxangle.value) : undefined;
   var exceedLength = dom.exceedlength ? (dom.exceedlength.value == 'true') : undefined;
   var rotation = parseFloat(dom.rotation.value);
+  if (dom.font.value == 'Open Sans' && !openSansAdded) {
+    var openSans = document.createElement('link');
+    openSans.href = 'https://fonts.googleapis.com/css?family=Open+Sans';
+    openSans.rel = 'stylesheet';
+    document.getElementsByTagName('head')[0].appendChild(openSans);
+    openSansAdded = true;
+  }
   var font = weight + ' ' + size + ' ' + dom.font.value;
   var fillColor = dom.color.value;
   var outlineColor = dom.outline.value;