alpha-mapgl geojson textoffset

by Trufi

HTML

<script src="https://jakarta.web-staging.2gis.ru/sdk/index.js"></script>
<div id="container"></div>
<button id="button">Change</button>

CSS

html,
body,
#container {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#button {
  position: absolute;
  top: 5px;
  left: 5px;
}

JavaScript

const map = new mapgl.Map('container', {
  center: [82.90324, 54.97875],
  zoom: 15,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

const data = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "prop1": "Первая подпись",
      "prop2": "Вторая подпись"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [82.90324, 54.97875],
    }
  }]
};

const data2 = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "prop1": "aaaa",
      "prop2": "бббб"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [82.90324, 54.97875],
    }
  }]
};

fetch('https://styles.api.2gis.com/styles/c080bb6a-8134-4993-93a1-5b4d8c36a59b')
  .then((res) => res.json())
  .then((response) => {
    const style = response.result;
    style.layers.push({
      type: 'point',
      filter: ['match', ['sourceAttr', 'name'],
        ['my-points'], true, false
      ],
      style: {
        text: [
          ["get", "prop1"],
          ["get", "prop2"]
        ],
        textFont: ['Noto_Sans', 'Noto_Sans_Italic'],
        textOffset: [0, 0],
        allowOverlap: true,
      },
    });
    map.setStyle(style);

    new mapgl.Source(map, {
      type: 'geojson',
      data,
      attributes: {
        name: 'my-points',
      },
    });

    let s;
    document.getElementById('button').onclick = () => {
      if (s) {
        s.destroy();
        return;
      }
      s = new mapgl.Source(map, {
        type: 'geojson',
        data: data2,
        attributes: {
          name: 'my-points',
        },
      })
    };
  });