Streets with Zenrin + new features

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.min.css">
<script src="https://api.mapbox.com/mapbox-assembly/mbx/v0.18.0/assembly.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0-beta.1/mapbox-gl.css">
<div id="map" class="absolute top bottom w-full"></div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

const map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [-73.9903, 40.7262],
  zoom: 16
});

map.on('load', () => {
	map.setLayoutProperty('poi-label', 'text-justify', 'auto');
	map.setLayoutProperty('poi-label', 'text-radial-offset', 0.75);
	map.setLayoutProperty('poi-label', 'text-variable-anchor', [
		'right', 'left', 'top', 'bottom'
	]);
});