Variable label placement example.

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>

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);