From ead961f7c6b903bb5bbfbc3f128362bb46d421eb Mon Sep 17 00:00:00 2001
From: Molly Lloyd <molly@mapbox.com>
Date: Thu, 25 Oct 2018 20:42:13 -0700
Subject: [PATCH] Variable label placement example.

---
 .../example/variable-label-placement.html     | 108 ++++++++++++++++++
 .../pages/example/variable-label-placement.js |  10 ++
 2 files changed, 118 insertions(+)
 create mode 100644 docs/pages/example/variable-label-placement.html
 create mode 100644 docs/pages/example/variable-label-placement.js

diff --git a/docs/pages/example/variable-label-placement.html b/docs/pages/example/variable-label-placement.html
new file mode 100644
index 00000000000..ee09db5bbc3
--- /dev/null
+++ b/docs/pages/example/variable-label-placement.html
@@ -0,0 +1,108 @@
+<div id='map'></div>
+
+<script>
+var places = {
+    "type": "FeatureCollection",
+    "features": [{
+        "type": "Feature",
+        "properties": {
+            "description": "Ford's Theater",
+            "icon": "theatre"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.038659, 38.931567]
+        }
+    }, {
+        "type": "Feature",
+        "properties": {
+            "description": "The Gaslight",
+            "icon": "theatre"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.003168, 38.894651]
+        }
+    }, {
+        "type": "Feature",
+        "properties": {
+            "description": "Horrible Harry's",
+            "icon": "bar"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.090372, 38.881189]
+        }
+    }, {
+        "type": "Feature",
+        "properties": {
+            "description": "Bike Party",
+            "icon": "bicycle"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.052477, 38.943951]
+        }
+    }, {
+        "type": "Feature",
+        "properties": {
+            "description": "Rockabilly Rockstars",
+            "icon": "music"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.031706, 38.914581]
+        }
+    }, {
+        "type": "Feature",
+        "properties": {
+            "description": "District Drum Tribe",
+            "icon": "music"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.020945, 38.878241]
+        }
+    }, {
+        "type": "Feature",
+        "properties": {
+            "description": "Motown Memories",
+            "icon": "music"
+        },
+        "geometry": {
+            "type": "Point",
+            "coordinates": [-77.007481, 38.876516]
+        }
+    }]
+};
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v9',
+    center: [-77.04, 38.907],
+    zoom: 11.15
+});
+
+map.on('load', function() {
+    // Add a GeoJSON source containing place coordinates and information.
+    map.addSource("places", {
+        "type": "geojson",
+        "data": places
+    });
+
+    map.addLayer({
+        "id": "poi-labels",
+        "type": "symbol",
+        "source": "places",
+        "layout": {
+            "text-field": ["get", "description"],
+            "text-variable-anchor": ["top", "bottom", "left", "right"],
+            "text-radial-offset": 0.5,
+            "text-justify": "auto",
+            "icon-image": ["concat", ["get", "icon"], "-15"]
+        }
+    });
+
+    map.rotateTo(180, { duration: 10000 });
+});
+</script>
diff --git a/docs/pages/example/variable-label-placement.js b/docs/pages/example/variable-label-placement.js
new file mode 100644
index 00000000000..fadc993072d
--- /dev/null
+++ b/docs/pages/example/variable-label-placement.js
@@ -0,0 +1,10 @@
+/*---
+title: Variable label placement
+description: Use `text-variable-anchor` to allow high priority labels to shift position to stay on the map
+tags:
+  - layers
+pathname: /mapbox-gl-js/example/variable-label-placement/
+---*/
+import Example from '../../components/example';
+import html from './variable-label-placement.html';
+export default Example(html);