MapGL geojson buildings

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', {
  style: '124f65d0-4beb-494e-8088-ff215eb717c3',
  defaultBackgroundColor: '#10181f',
  autoHideOSMCopyright: true,
  zoomControl: false,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
  zoom: 18,
  minZoom: 2,
  maxZoom: 20,
  rotation: 0,
  pitch: 0,
  center: [37.51607958254345, 55.751970624693055]
});

map.on('click', (ev) => console.log(ev.lngLat));

const geoJsonSource = new mapgl.GeoJsonSource(map, {
  data: {
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [37.51364682375571, 55.75168533169844],
          [37.515653110345724, 55.752298182128776],
          [37.5167689082136, 55.75154042060205]
        ]]
      }
    }]
  },
  attributes: {
    bar: 'asd'
  }
});

map.on('styleload', () => {
  map.addLayer({
    id: 'my-polygons-layer',
    filter: [
      'match',
      ['sourceAttr', 'bar'],
      ['asd'],
      true,
      false,
    ],
    type: 'line',
    style: {
      strokeColor: '#748794',
      strokeWidth: 4,
      color: '#393f42',
    },
  });
});