mapgl-geojson-label-fontsize

by Trufi

HTML

<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="container"></div>

CSS

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
  center: [55.27599, 25.21674],
  styleZoom: 13,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

const geojsonData = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "foo": "polyline"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            55.25779,
            25.20928
          ],
          [
            55.29453,
            25.20928
          ],
          [
            55.29453,
            25.22357
          ],
          [
            55.25779,
            25.22357
          ],
          [
            55.25779,
            25.20928
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "foo": "label",
        "text": "Some text"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          55.27599,
          25.21674
        ]
      }
    }
  ]
};

new mapgl.GeoJsonSource(map, {
  data: geojsonData,
  attributes: {
    name: 'my-data'
  }
});

map.once('styleload', () => {
  map.addLayer({
    id: 'my-pline',
    type: 'line',
    filter: ['all',
      ['match', ['sourceAttr', 'name'],
        ['my-data'], true, false
      ],
      ['match', ['get', 'foo'],
        ['polyline'], true, false
      ]
    ],
    style: {}
  });

  map.addLayer({
    id: 'my-label',
    type: 'point',
    filter: ['all',
      ['match', ['sourceAttr', 'name'],
        ['my-data'], true, false
      ],
      ['match', ['get', 'foo'],
        ['label'], true, false
      ]
    ],
    minzoom: 9.5,
    style: {
      textField: ['get', 'text'],
      textFont: 'Noto_Sans',
      textFontSize: ['interpolate', ['exponential', 2],
        ['zoom'], 9.5, 7, 13, 80
      ],
      allowOverlap: true
    }
  });
});