dgalli1 · October 7, 2021 06:54
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
 <head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.js"></script>
  <link href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" rel="stylesheet" />
  <style>
    #map
    {
      position: absolute; 
      top:      0; 
      right:    0; 
      bottom:   0; 
      left:     0;
    }
    
    #buttons
    {
      position: absolute;
      top:      0; 
      left:    0;
      margin:   0;
      padding:  0.25em 0.50em;
    }
    
    .button
    {
      display:       inline-block;
      position:      relative;
      cursor:        pointer;
      width:         3.00em;
      padding:       0.50em;
      border-radius: 0.25em;
      border: 1.5px solid rgba(0, 0, 0, 0.2);
      font-size:     1.00em;
      text-align:    center;
      color:         #404040;
      background:    #fff;
      font-family:   sans-serif;
      font-weight:   bold;
    }
  </style>
  <script>
    style = 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json';
  </script>
 </head>
 <body>

  <div id="map"></div>

  <ul id="buttons">
    <li id="button-latin" class="button">default</li>  
    <li id="button-de"    class="button">DE</li>
    <li id="button-fr"    class="button">FR</li>
    <li id="button-it"    class="button">IT</li>
    <li id="button-rm"    class="button">RM</li>
  </ul>

  <script>
    // You can remove the following line if you don't need support for RTL (right-to-left) labels:
    mapboxgl.setRTLTextPlugin('https://cdn.maptiler.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.2/mapbox-gl-rtl-text.js');
    var map = new mapboxgl.Map(
    {
      container: 'map',
      style: style,
      // set the default map location
      center: [8.1, 46.8],
      zoom: 7.7
    });
    
    map.addControl(new mapboxgl.NavigationControl());

    var fLang  = (l) => "name:" + l;
    var fCurly = (l) => "{" + fLang(l) + "}";
    var fGet   = (l) => ["get", fLang(l)];
    var fPeaks = (l) => ["format", fGet(l), {}, "\n", {}, ["get", "ele"], {"font-scale": 0.75}];
 	
    var dFunc = {'curly': fCurly, 'get': fGet, 'peaks': fPeaks};

    document
      .getElementById('buttons')
      .addEventListener('click', function(event)
      {

        var language = event.target.id.substr('button-'.length);

        var dTexts = 
        {
          'curly':
          [
            'road_label',
            'park_label',
            'place_country',
            'omt_place_country',
            'place_state',
            'omt_place_state',
            'water_name_point_label',
            'water_name_line_label'
          ],
          'get':
          [
            'aerodrome_label',
            'place_city',
            'omt_place_city',
            'place_town',
            'omt_place_town',
            'place_village',
            'omt_place_village',
            'place_hamlet_isolated_dwelling',
            'omt_place_hamlet_isolated_dwelling',
            'place_other',
            'omt_place_other',
            'poi_rank1',
            'poi_rank2',
            'poi_rank3',
            'waterway_line_label'
          ],
          'peaks':
          [
            'peaks_rank1',
            'peaks_rank2',
            'peaks_rank3+',
            'peaks_other'
          ]
        };

        for (sFunc in dTexts)
        {
          var lTexts = dTexts[sFunc];
          var fFunc  = dFunc [sFunc];
          for (var sText of lTexts)
          {
            map.setLayoutProperty(
              sText, 
              'text-field',
              fFunc(language));
          }
        }

      });

  </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.js"></script>
	<link href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" rel="stylesheet" />
	<style>
	#map
	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

	#buttons
	{
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0.25em 0.50em;
	}

	.button
	{
	display: inline-block;
	position: relative;
	cursor: pointer;
	width: 3.00em;
	padding: 0.50em;
	border-radius: 0.25em;
	border: 1.5px solid rgba(0, 0, 0, 0.2);
	font-size: 1.00em;
	text-align: center;
	color: #404040;
	background: #fff;
	font-family: sans-serif;
	font-weight: bold;
	}
	</style>
	<script>
	style = 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte.vt/style.json';
	</script>
	</head>
	<body>

	<div id="map"></div>

	<ul id="buttons">
	<li id="button-latin" class="button">default</li>
	<li id="button-de" class="button">DE</li>
	<li id="button-fr" class="button">FR</li>
	<li id="button-it" class="button">IT</li>
	<li id="button-rm" class="button">RM</li>
	</ul>

	<script>
	// You can remove the following line if you don't need support for RTL (right-to-left) labels:
	mapboxgl.setRTLTextPlugin('https://cdn.maptiler.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.2/mapbox-gl-rtl-text.js');
	var map = new mapboxgl.Map(
	{
	container: 'map',
	style: style,
	// set the default map location
	center: [8.1, 46.8],
	zoom: 7.7
	});

	map.addControl(new mapboxgl.NavigationControl());

	var fLang = (l) => "name:" + l;
	var fCurly = (l) => "{" + fLang(l) + "}";
	var fGet = (l) => ["get", fLang(l)];
	var fPeaks = (l) => ["format", fGet(l), {}, "\n", {}, ["get", "ele"], {"font-scale": 0.75}];

	var dFunc = {'curly': fCurly, 'get': fGet, 'peaks': fPeaks};

	document
	.getElementById('buttons')
	.addEventListener('click', function(event)
	{

	var language = event.target.id.substr('button-'.length);

	var dTexts =
	{
	'curly':
	[
	'road_label',
	'park_label',
	'place_country',
	'omt_place_country',
	'place_state',
	'omt_place_state',
	'water_name_point_label',
	'water_name_line_label'
	],
	'get':
	[
	'aerodrome_label',
	'place_city',
	'omt_place_city',
	'place_town',
	'omt_place_town',
	'place_village',
	'omt_place_village',
	'place_hamlet_isolated_dwelling',
	'omt_place_hamlet_isolated_dwelling',
	'place_other',
	'omt_place_other',
	'poi_rank1',
	'poi_rank2',
	'poi_rank3',
	'waterway_line_label'
	],
	'peaks':
	[
	'peaks_rank1',
	'peaks_rank2',
	'peaks_rank3+',
	'peaks_other'
	]
	};

	for (sFunc in dTexts)
	{
	var lTexts = dTexts[sFunc];
	var fFunc = dFunc [sFunc];
	for (var sText of lTexts)
	{
	map.setLayoutProperty(
	sText,
	'text-field',
	fFunc(language));
	}
	}

	});

	</script>

	</body>
	</html>