Interpolation bug
by Tristen Brown
HTML
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js"></script>
<div id="map">
</div>
CSS
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
JavaScript
mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';
const style = {
version: 8,
center: [-79.327, 43.846],
zoom: 6,
sources: {
composite: {
url: 'mapbox://mapbox.mapbox-streets-v8',
type: 'vector'
}
},
sprite: 'mapbox://sprites/tristen/cjwurvssn93s01cny9t91anji/a3zx8crhca28a1j1ljgwyyo1z',
glyphs: 'mapbox://fonts/tristen/{fontstack}/{range}.pbf',
layers: [{
id: 'building-number-label-outline',
type: 'symbol',
source: 'composite',
'source-layer': 'housenum_label',
layout: {
'text-field': 'I am a label',
'text-size': 12.5,
'text-allow-overlap': true,
'text-variable-anchor': [
'center',
'left',
'right',
'top',
'bottom',
'top-left',
'top-right',
'bottom-left',
'bottom-right'
],
'text-justify': 'auto'
}
}]
};
new mapboxgl.Map({
container: 'map',
style
});