mapgl wfs geojson example

by Trufi

HTML

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

CSS

html,
body,
#container {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#loading {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 72px;
  pointer-events: none;
}

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: [69.06182185, 39.93825489],
  zoom: 8,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});

fetch('https://riskinfo.tj/geoserver/wfs?callback=getJson&service=WFS&version=1.1.0&request=GetFeature&typename=tajikistan%3Ajamoat&CQL_FILTER=name_rg%3D%3D%27Sughd%27&srsname=EPSG%3A4326&outputFormat=application%2Fjson&_=1637730574070')
  .then((res) => res.json())
  .then((data) => {
  	document.querySelector('#loading').style.display = 'none';
    new mapgl.GeoJsonSource(map, {
      data,
      attributes: {
        bar: 'asd',
      },
    });
  });


map.on('styleload', () => {
  map.addLayer({
    type: 'polygon',
    id: 'my-stars',
    filter: ['match', ['sourceAttr', 'bar'],
      ['asd'], true, false
    ],
    style: {
      color: '#ff000055',
      strokeColor: '#ff0000'
    },
  });
});