Tamil text bug on Mapbox GL JS

by cheeaun

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
  <div id="map"></div>
  <div id="text">சைனாடவுன்</div>
</body>
</html>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#text {
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 999;
  font-size: 50px;
  background-color: yellow;
  padding: 20px;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlZWF1biIsImEiOiJja2N6anp6bHYwZHhjMnpvN2liYTc4MHd2In0.4mf3zkKBTtnrlHJwKBIW6w';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  center: [-74.5, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});

map.on('load', function(){
map.addSource('point', {
  'type': 'geojson',
  'data': {
    'type': 'FeatureCollection',
    'features': [
      {
        'type': 'Feature',
        'geometry': {
          'type': 'Point',
          'coordinates': [-74.5, 40],
        }
      }
    ]
  }
});

map.addLayer({
  'id': 'points',
  'type': 'symbol',
  'source': 'point',
  'layout': {
    'text-field': 'சைனாடவுன்',
    'text-size': 50,
  },
});
});