GL JS text-pitch-alignment

by AJ Ashton

HTML

<body>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<div id='map'></div>
</body>

CSS

@import('https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css');
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYWoiLCJhIjoiY2l5eXR4cXFzMDAyODJ3cXdkOWtrc3FwZCJ9.O810ICnkpRJIAWQrV1oYFQ';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [-77, 38.9],
  zoom: 15,
  pitch: 50,
  bearing: 2
});

map.on('load', function () {
  var layers = [
  	'road-label-small',
  	'road-label-medium',
  	'road-label-large'
  ];
  for (var i = 0; i < layers.length; i++) {
    map.setLayoutProperty(
      layers[i],
      'text-pitch-alignment',
      'viewport'
    );
  }
});