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>


<nav id='toggle-group' class='absolute top left ml12 mt12 border border--2 border--white bg-white shadow-darken10 z1 round px6 py6 w240'>
  <label class='checkbox-container w-full'>
    <input type='checkbox' id='zenrin'>
    <div class='checkbox mr6'>
      <svg class='icon'><use xlink:href='#icon-check' /></svg>
    </div>
    <span class="txt-s mt3">Zenrin</span>
  </label>
  <label class='checkbox-container w-full'>
    <input type='checkbox' id='variable'>
    <div class='checkbox mr6'>
      <svg class='icon'><use xlink:href='#icon-check' /></svg>
    </div>
    <span class="txt-s mt3">
      <span class='inline-block bg-green color-white round px3 txt-bold txt-xs mr1'>New!</span>
      Variable label placement
    </span>
  </label>
  <label class='checkbox-container w-full'>
    <input type='checkbox' id='multi'>
    <div class='checkbox mr6'>
      <svg class='icon'><use xlink:href='#icon-check' /></svg>
    </div>
    <span class="txt-s mt3">
       <span class='inline-block bg-green color-white round px3 txt-bold txt-xs mr1'>New!</span>
       Multi text formatting
     </span>
  </label>
</nav>

JavaScript

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

const DEFAULT = 'mapbox://styles/tristen/cjulhngbb02l81fob3a8dg9zl?=v1';

const map = new mapboxgl.Map({
	container: 'map',
	style: DEFAULT,
  center: [139.770492, 35.682549],
  zoom: 15
});

document.getElementById('toggle-group').addEventListener('change', e => {
	const { id, checked } = e.target;
	if (checked) {
    switch (id) {
      case 'zenrin':
      map.setStyle('mapbox://styles/tristen/cjuk5eu8c0teg1fqjgon9bo66?=v1');
      break;
      case 'variable':
      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'
      ]);
      break;
      case 'multi':
      map.setLayoutProperty('settlement-label', 'text-field', 
      	[
        	'format',
        	['get', 'name_ja'], { 'font-scale': 1.2 },
        	'\n', {},
        	['get', 'name_en'], {
          	'font-scale': 0.8,
          	'text-font': ['literal', ['DIN Offc Pro Italic']]
        	}
        ]
      );
      break;
    }
   } else {
    switch (id) {
      case 'zenrin':
      map.setStyle(DEFAULT);
      break;
      case 'variable':
			map.setLayoutProperty('poi-label', 'text-justify', 'center');
      map.setLayoutProperty('poi-label', 'text-radial-offset', 0);
			map.setLayoutProperty('poi-label', 'text-variable-anchor', []);
      break;
      case 'multi':
      map.setLayoutProperty('settlement-label', 'text-field', ['coalesce', ['get', 'name_ja'], ['get', 'name']]);
      break;
    }
   }
});