Merge pull request #1785 from adube/example-labels

Example labels

examples/data/geojson/line-samples.geojson

@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Roussel" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.317812426119204, 48.287712285170407 ], [ -73.965445435101188, 48.287712285170407 ] ] } },
+{ "type": "Feature", "properties": { "name": "de la Grande-Décharge Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.890274359943689, 47.66777849648031 ], [ -73.03935270229745, 47.552045722357249 ], [ -73.03483517677158, 47.743778832463107 ], [ -72.750231068641639, 47.749854072477497 ], [ -72.754748594167509, 47.552045722357249 ] ] } },
+{ "type": "Feature", "properties": { "name": "du Saguenay Ouest" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.007730023616347, 48.07082744644633 ], [ -72.894791885469544, 47.889388912080449 ], [ -72.727643441012276, 48.082900678850329 ], [ -72.560494996555022, 47.895447137861773 ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Anicet" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.985142395986983, 48.338787334581873 ], [ -72.980624870461128, 48.161307640513321 ], [ -72.885756834417805, 48.164320903012829 ], [ -72.894791885469544, 48.338787334581873 ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.459482576203527, 47.53679865861892 ], [ -73.454965050677686, 47.719470781160837 ] ] } },
+{ "type": "Feature", "properties": { "name": "Sainte-Geneviève" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.716981531178234, 47.889388912080449 ], [ -73.423342371996569, 48.091953743979651 ], [ -73.242641350961676, 47.883329977544491 ], [ -73.685358852497131, 47.862118125007399 ] ] } },
+{ "type": "Feature", "properties": { "name": "de Lombard" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.631148546186679, 48.323770568268507 ], [ -73.626631020660795, 48.185408784389622 ], [ -73.55435061224685, 48.188420630879783 ], [ -73.55435061224685, 48.320766684325278 ], [ -73.473035152781165, 48.317762623483489 ], [ -73.482070203832905, 48.19745510840756 ], [ -73.400754744367205, 48.206487993065075 ], [ -73.396237218841335, 48.323770568268507 ], [ -73.301369182798027, 48.317762623483489 ], [ -73.319439284901506, 48.191432300378096 ] ] } },
+{ "type": "Feature", "properties": { "name": "de la Grande-Baie Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.439785615317746, 47.564240180362376 ], [ -74.227461915601779, 47.716431476953346 ], [ -74.055795945618627, 47.552045722357249 ], [ -73.879612450109633, 47.710352336655504 ] ] } },
+{ "type": "Feature", "properties": { "name": "de Tadoussac" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.313294900593348, 48.091953743979651 ], [ -74.313294900593348, 47.880300244488787 ], [ -73.974480486152942, 47.877270334238752 ], [ -73.978998011678812, 48.076864416783366 ] ] } }
+]
+}

examples/data/geojson/point-samples.geojson

@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Saguenay (Arrondissement Latterière)" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 47.6434349837781 ] } },
+{ "type": "Feature", "properties": { "name": "Canton Tremblay" }, "geometry": { "type": "Point", "coordinates": [ -75.840218528338056, 47.971115165183342 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Félix-d'Otis" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 48.278693733790902 ] } },
+{ "type": "Feature", "properties": { "name": "La Baie" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 47.649521925935176 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-David-de-Falardeau" }, "geometry": { "type": "Point", "coordinates": [ -74.801187657387501, 47.977163824275436 ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Honoré-de-Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 48.284706278302295 ] } },
+{ "type": "Feature", "properties": { "name": "Alma" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.6434349837781 ] } },
+{ "type": "Feature", "properties": { "name": "Jonquière" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.971115165183342 ] } },
+{ "type": "Feature", "properties": { "name": "Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -75.289080414181669, 48.284706278302295 ] } }
+]
+}

examples/data/geojson/polygon-samples.geojson

@@ -0,0 +1,16 @@
+{
+"type": "FeatureCollection",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+                                                                                
+"features": [
+{ "type": "Feature", "properties": { "name": "Parc de la Colline" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 47.72858763003908 ], [ -71.86027854004486, 47.527648291638172 ], [ -72.37075892446839, 47.539848426151735 ], [ -72.357206347890767, 47.72858763003908 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Centre Paul-Étienne Simard" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 48.013440900213297 ], [ -72.239750684218109, 48.013440900213297 ], [ -72.253303260795718, 47.856056000888501 ], [ -72.027426984502114, 47.856056000888501 ], [ -72.036462035553868, 48.013440900213297 ], [ -71.905453795303586, 48.01646283861713 ], [ -71.891901218725963, 47.801464984333364 ], [ -72.361723873416651, 47.810567474765456 ], [ -72.357206347890767, 48.013440900213297 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Rivière du Moulin" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.194575428959382, 48.33278115872843 ], [ -72.018391933450374, 48.33278115872843 ], [ -71.846725963467236, 48.251628525276693 ], [ -71.950629050562299, 48.107038644740094 ], [ -72.203610480011122, 48.107038644740094 ], [ -72.397864077623623, 48.221539261269051 ], [ -72.194575428959382, 48.33278115872843 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "L'Étoile-du-Nord" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.589227008492543, 47.649521925935176 ], [ -71.525981651130337, 47.734664642855655 ], [ -71.48532392139748, 47.649521925935169 ], [ -71.295587849310877, 47.637347332276697 ], [ -71.462736293768117, 47.585573652777313 ], [ -71.390455885354172, 47.475766052599219 ], [ -71.535016702182091, 47.552045722357242 ], [ -71.702165146639345, 47.491030857179695 ], [ -71.616332161647762, 47.591667334264848 ], [ -71.787998131630914, 47.655608158761908 ], [ -71.589227008492543, 47.649521925935176 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Lavoie et St-Jean-Baptiste" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.729270299794578, 48.010418784700107 ], [ -71.291070323784993, 48.004374022337799 ], [ -71.291070323784993, 47.777183877693901 ], [ -71.729270299794578, 47.786290622064854 ], [ -71.729270299794578, 48.010418784700107 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs Diamant" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.693130095587605, 48.341790157179155 ], [ -71.286552798259123, 48.344792802893032 ], [ -71.449183717190522, 48.224548983994914 ], [ -71.277517747207369, 48.070827446446337 ], [ -71.751857927423927, 48.085918544287573 ], [ -71.507911549026844, 48.21551928490868 ], [ -71.693130095587605, 48.341790157179155 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Sydenham" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.051641470913779, 47.710352336655504 ], [ -70.911598179611758, 47.710352336655504 ], [ -70.925150756189367, 47.619080121567436 ], [ -70.712827056473373, 47.616034965734443 ], [ -70.721862107525112, 47.448278226184989 ], [ -70.857387873301292, 47.448278226184989 ], [ -70.852870347775408, 47.552045722357249 ], [ -71.056158996439635, 47.552045722357249 ], [ -71.051641470913779, 47.710352336655504 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Saint-Luc" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.110369302750115, 47.798430466372736 ], [ -70.902563128560018, 47.983211774835986 ], [ -70.699274479895777, 47.789325849015306 ], [ -71.110369302750115, 47.798430466372736 ] ] ] } },
+{ "type": "Feature", "properties": { "name": "Loisirs du Fjord du Saguenay" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -70.988396113551573, 48.32977780546792 ], [ -70.812212618042579, 48.32977780546792 ], [ -70.807695092516681, 48.209498600656133 ], [ -70.631511597007702, 48.209498600656147 ], [ -70.636029122533571, 48.079882636349602 ], [ -71.146509506957088, 48.082900678850329 ], [ -71.151027032482972, 48.212509031269981 ], [ -70.983878588025689, 48.209498600656133 ], [ -70.988396113551573, 48.32977780546792 ] ] ] } }
+]
+}

examples/vector-labels.html

@@ -0,0 +1,322 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+      h2 {
+        font-size: 1.5em;
+        line-height: 15px;
+      };
+
+      .scale-cnt {
+        margin: 5px;
+      }
+
+      .edit-form-ctn {
+      }
+
+      .edit-form {
+        float: left;
+        margin: 5px;
+        width: 230px;
+        padding: 4px;
+        border: 1px solid black;
+      }
+
+      .edit-form input[type="button"] {
+        float: right;
+      }
+
+      .edit-form-elem label {
+        display: block;
+        float: left;
+        width: 85px;
+      }
+
+      .edit-form-elem input[type="text"] {
+        width: 60px;
+      }
+
+      .edit-form-elem select {
+        width: 130px;
+      }
+    </style>
+    <title>Vector labels example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="edit-form">
+        <input type="button" value="Refresh" onclick="refreshPoints();" />
+        <h2>Points</h2>
+        <div class="edit-form-elem">
+          <label>Text: </label>
+          <select id="points-text">
+            <option value="hide">Hide</option>
+            <option value="normal">Normal</option>
+            <option value="shorten" selected="selected">Shorten</option>
+            <option value="wrap">Wrap</option>
+          </select>
+          <br />
+          <label title="Max Resolution Denominator">MaxReso.:</label>
+          <select id="points-maxreso">
+            <option value="38400">38,400</option>
+            <option value="19200">19,200</option>
+            <option value="9600">9,600</option>
+            <option value="4800">4,800</option>
+            <option value="2400">2,400</option>
+            <option value="1200" selected="selected">1,200</option>
+            <option value="600">600</option>
+            <option value="300">300</option>
+            <option value="150">150</option>
+            <option value="75">75</option>
+            <option value="32">32</option>
+            <option value="16">16</option>
+            <option value="8">8</option>
+          </select>
+          <br />
+          <label>Align: </label>
+          <select id="points-align">
+            <option value="center" selected="selected">Center</option>
+            <option value="end">End</option>
+            <option value="left">Left</option>
+            <option value="right">Right</option>
+            <option value="start">Start</option>
+          </select>
+          <br />
+          <label>Baseline: </label>
+          <select id="points-baseline">
+            <option value="alphabetic">Alphabetic</option>
+            <option value="bottom">Bottom</option>
+            <option value="hanging">Hanging</option>
+            <option value="ideographic">Ideographic</option>
+            <option value="middle" selected="selected">Middle</option>
+            <option value="top">Top</option>
+          </select>
+          <br />
+          <label>Font: </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="Verdana">Verdana</option>
+          </select>
+          <br />
+          <label>Weight: </label>
+          <select id="points-weight">
+            <option value="bold">Bold</option>
+            <option value="normal" selected="selected">Normal</option>
+          </select>
+          <br />
+          <label>Size: </label>
+          <input type="text" value="12px" id="points-size" />
+          <br />
+          <label>Color :</label>
+          <input type="text" value="#aa3300" id="points-color" />
+          <br />
+          <label title="Outline Color">O. Color:</label>
+          <input type="text" value="#ffffff" id="points-outline" />
+          <br />
+          <label title="Outline Width">O. Width :</label>
+          <input type="text" value="3" id="points-outline-width" />
+        </div>
+      </div>
+
+      <div class="edit-form">
+        <input type="button" value="Refresh" onclick="refreshLines();" />
+        <h2>Lines</h2>
+        <div class="edit-form-elem">
+          <label>Text: </label>
+          <select id="lines-text">
+            <option value="hide">Hide</option>
+            <option value="normal">Normal</option>
+            <option value="shorten">Shorten</option>
+            <option value="wrap" selected="selected">Wrap</option>
+          </select>
+          <br />
+          <label title="Max Resolution Denominator">MaxReso.:</label>
+          <select id="lines-maxreso">
+            <option value="38400">38,400</option>
+            <option value="19200">19,200</option>
+            <option value="9600">9,600</option>
+            <option value="4800">4,800</option>
+            <option value="2400">2,400</option>
+            <option value="1200" selected="selected">1,200</option>
+            <option value="600">600</option>
+            <option value="300">300</option>
+            <option value="150">150</option>
+            <option value="75">75</option>
+            <option value="32">32</option>
+            <option value="16">16</option>
+            <option value="8">8</option>
+          </select>
+          <br />
+          <label>Align: </label>
+          <select id="lines-align">
+            <option value="center" selected="selected">Center</option>
+            <option value="end">End</option>
+            <option value="left">Left</option>
+            <option value="right">Right</option>
+            <option value="start">Start</option>
+          </select>
+          <br />
+          <label>Baseline: </label>
+          <select id="lines-baseline">
+            <option value="alphabetic">Alphabetic</option>
+            <option value="bottom">Bottom</option>
+            <option value="hanging">Hanging</option>
+            <option value="ideographic">Ideographic</option>
+            <option value="middle" selected="selected">Middle</option>
+            <option value="top">Top</option>
+          </select>
+          <br />
+          <label>Font: </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="Verdana">Verdana</option>
+          </select>
+          <br />
+          <label>Weight: </label>
+          <select id="lines-weight">
+            <option value="bold" selected="selected">Bold</option>
+            <option value="normal">Normal</option>
+          </select>
+          <br />
+          <label>Size: </label>
+          <input type="text" value="12px" id="lines-size" />
+          <br />
+          <label>Color :</label>
+          <input type="text" value="green" id="lines-color" />
+          <br />
+          <label title="Outline Color">O. Color:</label>
+          <input type="text" value="#ffffff" id="lines-outline" />
+          <br />
+          <label title="Outline Width">O. Width :</label>
+          <input type="text" value="3" id="lines-outline-width" />
+        </div>
+      </div>
+
+      <div class="edit-form">
+        <input type="button" value="Refresh" onclick="refreshPolygons();" />
+        <h2>Polygons</h2>
+        <div class="edit-form-elem">
+          <label>Text: </label>
+          <select id="polygons-text">
+            <option value="hide">Hide</option>
+            <option value="normal" selected="selected">Normal</option>
+            <option value="shorten">Shorten</option>
+            <option value="wrap">Wrap</option>
+          </select>
+          <br />
+          <label title="Max Resolution Denominator">MaxReso.:</label>
+          <select id="polygons-maxreso">
+            <option value="38400">38,400</option>
+            <option value="19200">19,200</option>
+            <option value="9600">9,600</option>
+            <option value="4800">4,800</option>
+            <option value="2400">2,400</option>
+            <option value="1200" selected="selected">1,200</option>
+            <option value="600">600</option>
+            <option value="300">300</option>
+            <option value="150">150</option>
+            <option value="75">75</option>
+            <option value="32">32</option>
+            <option value="16">16</option>
+            <option value="8">8</option>
+          </select>
+          <br />
+          <label>Align: </label>
+          <select id="polygons-align">
+            <option value="center" selected="selected">Center</option>
+            <option value="end">End</option>
+            <option value="left">Left</option>
+            <option value="right">Right</option>
+            <option value="start">Start</option>
+          </select>
+          <br />
+          <label>Baseline: </label>
+          <select id="polygons-baseline">
+            <option value="alphabetic">Alphabetic</option>
+            <option value="bottom">Bottom</option>
+            <option value="hanging">Hanging</option>
+            <option value="ideographic">Ideographic</option>
+            <option value="middle" selected="selected">Middle</option>
+            <option value="top">Top</option>
+          </select>
+          <br />
+          <label>Font: </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="Verdana" selected="selected">Verdana</option>
+          </select>
+          <br />
+          <label>Weight: </label>
+          <select id="polygons-weight">
+            <option value="bold" selected="selected">Bold</option>
+            <option value="normal">Normal</option>
+          </select>
+          <br />
+          <label>Size: </label>
+          <input type="text" value="10px" id="polygons-size" />
+          <br />
+          <label>Color :</label>
+          <input type="text" value="blue" id="polygons-color" />
+          <br />
+          <label title="Outline Color">O. Color:</label>
+          <input type="text" value="#ffffff" id="polygons-outline" />
+          <br />
+          <label title="Outline Width">O. Width :</label>
+          <input type="text" value="3" id="polygons-outline-width" />
+        </div>
+      </div>
+
+    <div style="clear:left;"></div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">Vector labels example</h4>
+          <p id="shortdesc">Example of GeoJSON features with labels.</p>
+          <div id="docs">
+            <p>See the <a href="vector-labels.js" target="_blank">vector-labels.js source</a> to see how this is done.</p>
+            <p><strong>Note:</strong> The 'Text/Wrap' option is currently not working properly.  It's supposed to add '\n' to allow multiline labels, but spaces are currently shown instead.</p>
+          </div>
+          <div id="tags">geojson, vector, openstreetmap, label</div>
+        </div>
+
+      </div>
+
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="loader.js?id=vector-labels" type="text/javascript"></script>
+
+  </body>
+</html>

examples/vector-labels.js

@@ -0,0 +1,224 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.source.MapQuest');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+goog.require('ol.style.Text');
+
+
+var myDom = {
+  'points': {
+    'text': document.getElementById('points-text'),
+    'align': document.getElementById('points-align'),
+    'baseline': document.getElementById('points-baseline'),
+    'font': document.getElementById('points-font'),
+    'weight': document.getElementById('points-weight'),
+    'size': document.getElementById('points-size'),
+    'color': document.getElementById('points-color'),
+    'outline': document.getElementById('points-outline'),
+    'outline-width': document.getElementById('points-outline-width'),
+    'maxreso': document.getElementById('points-maxreso')
+  },
+  'lines': {
+    'text': document.getElementById('lines-text'),
+    'align': document.getElementById('lines-align'),
+    'baseline': document.getElementById('lines-baseline'),
+    'font': document.getElementById('lines-font'),
+    'weight': document.getElementById('lines-weight'),
+    'size': document.getElementById('lines-size'),
+    'color': document.getElementById('lines-color'),
+    'outline': document.getElementById('lines-outline'),
+    'outline-width': document.getElementById('lines-outline-width'),
+    'maxreso': document.getElementById('lines-maxreso')
+  },
+  'polygons': {
+    'text': document.getElementById('polygons-text'),
+    'align': document.getElementById('polygons-align'),
+    'baseline': document.getElementById('polygons-baseline'),
+    'font': document.getElementById('polygons-font'),
+    'weight': document.getElementById('polygons-weight'),
+    'size': document.getElementById('polygons-size'),
+    'color': document.getElementById('polygons-color'),
+    'outline': document.getElementById('polygons-outline'),
+    'outline-width': document.getElementById('polygons-outline-width'),
+    'maxreso': document.getElementById('polygons-maxreso')
+  }
+};
+
+var getText = function(feature, resolution, dom) {
+  var type = dom['text'].value;
+  var maxResolution = dom['maxreso'].value;
+  var text = feature.getProperties().name;
+
+  if (resolution > maxResolution) {
+    text = '';
+  } else if (type == 'hide') {
+    text = '';
+  } else if (type == 'shorten') {
+    text = text.trunc(12);
+  } else if (type == 'wrap') {
+    text = stringDivider(text, 16, '\n');
+  }
+
+  return text;
+};
+
+
+var createTextStyle = function(feature, resolution, dom) {
+  var align = dom['align'].value;
+  var baseline = dom['baseline'].value;
+  var size = dom['size'].value;
+  var weight = dom['weight'].value;
+  var font = weight + ' ' + size + ' ' + dom['font'].value;
+  var fillColor = dom['color'].value;
+  var outlineColor = dom['outline'].value;
+  var outlineWidth = parseInt(dom['outline-width'].value, 10);
+
+  return new ol.style.Text({
+    textAlign: align,
+    textBaseline: baseline,
+    font: font,
+    text: getText(feature, resolution, dom),
+    fill: new ol.style.Fill({color: fillColor}),
+    stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth})
+  });
+};
+
+
+// Polygons
+var createPolygonStyleFunction = function() {
+  return function(feature, resolution) {
+    var style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: 'blue',
+        width: 1
+      }),
+      fill: new ol.style.Fill({
+        color: 'rgba(0, 0, 255, 0.1)'
+      }),
+      text: createTextStyle(feature, resolution, myDom.polygons)
+    });
+    return [style];
+  };
+};
+
+var vectorPolygons = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    projection: 'EPSG:3857',
+    url: 'data/geojson/polygon-samples.geojson'
+  }),
+  style: createPolygonStyleFunction()
+});
+
+
+// Lines
+var createLineStyleFunction = function() {
+  return function(feature, resolution) {
+    var style = new ol.style.Style({
+      stroke: new ol.style.Stroke({
+        color: 'green',
+        width: 2
+      }),
+      text: createTextStyle(feature, resolution, myDom.lines)
+    });
+    return [style];
+  };
+};
+
+var vectorLines = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    projection: 'EPSG:3857',
+    url: 'data/geojson/line-samples.geojson'
+  }),
+  style: createLineStyleFunction()
+});
+
+
+// Points
+var createPointStyleFunction = function() {
+  return function(feature, resolution) {
+    var style = new ol.style.Style({
+      image: new ol.style.Circle({
+        radius: 10,
+        fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}),
+        stroke: new ol.style.Stroke({color: 'red', width: 1})
+      }),
+      text: createTextStyle(feature, resolution, myDom.points)
+    });
+    return [style];
+  };
+};
+
+var vectorPoints = new ol.layer.Vector({
+  source: new ol.source.GeoJSON({
+    projection: 'EPSG:3857',
+    url: 'data/geojson/point-samples.geojson'
+  }),
+  style: createPointStyleFunction()
+});
+
+var map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.MapQuest({layer: 'osm'})
+    }),
+    vectorPolygons,
+    vectorLines,
+    vectorPoints
+  ],
+  renderer: 'canvas',
+  target: 'map',
+  view: new ol.View2D({
+    center: [-8161939, 6095025],
+    zoom: 8
+  })
+});
+
+var refreshPoints = function() {
+  vectorPoints.setStyle(createPointStyleFunction());
+};
+
+var refreshLines = function() {
+  vectorLines.setStyle(createLineStyleFunction());
+};
+
+var refreshPolygons = function() {
+  vectorPolygons.setStyle(createPolygonStyleFunction());
+};
+
+
+/**
+ * @param {number} n The max number of characters to keep.
+ * @return {string} Truncated string.
+ */
+String.prototype.trunc = String.prototype.trunc ||
+    function(n) {
+      return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0);
+    };
+
+
+// http://stackoverflow.com/questions/14484787/wrap-text-in-javascript
+function stringDivider(str, width, spaceReplacer) {
+  if (str.length > width) {
+    var p = width;
+    for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) {
+    }
+    if (p > 0) {
+      var left;
+      if (str.substring(p, p + 1) == '-') {
+        left = str.substring(0, p + 1);
+      } else {
+        left = str.substring(0, p);
+      }
+      var right = str.substring(p + 1);
+      return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
+    }
+  }
+  return str;
+}