Country names not overzooming
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,
name: '#164',
metadata: {},
center: [139.767, 35.679],
zoom: 14.5,
sources: {
composite: {
url: 'mapbox://mapbox.road-v3',
type: 'vector'
}
},
sprite: 'mapbox://sprites/tristen/cjypuo2tn12591co4icbzjota/5d619gkr0qptmmw5pb49l3549',
glyphs: 'mapbox://fonts/tristen/{fontstack}/{range}.pbf',
layers: [{
id: 'rail',
type: 'line',
metadata: {
'mapbox:featureComponent': 'road-network'
},
source: 'composite',
'source-layer': 'road_v3',
filter: [
'all', ['==', ['get', 'class'], 'major_rail'],
['>=', ['get', 'layer'], 0],
['==', ['geometry-type'], 'LineString']
],
paint: {
'line-dasharray': [4, 2],
'line-width': 3,
'line-opacity': 0.25
}
}]
};
new mapboxgl.Map({
container: 'map',
style
});