evergis-mapgl-projects

by Trufi

HTML

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

CSS

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

.ui {
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  padding: 5px;
}

.title {
  font-size: 20px;
}

.project {
  height: 20px;
  width: 250px;
  line-height: 20px;
  border: 1px solid transparent;
  margin: 0 0 5px 0;
  cursor: pointer;
  background: #e7e7e7;
  padding: 0 5px;
}

.project:hover {
  background: #e0e0e0;
}

.project.active {
  border-color: #000000;
}

.item {
  margin: 5px;
  width: 250px;
  display: flex;
  justify-content: space-between;
}

JavaScript

const auth = {
  username: 'sbgisuser',
  password: 'D<mANDN/8bNn,+3j',
};

const defaultProjectAlias = 'High way patrol';

if (!mapgl.isSupported()) {
  document.querySelector('#map').innerHTML = `WebGL is not supoorted in your browser!`;
  throw new Error('WebGL is not supoorted in your browser!');
}

const map = new mapgl.Map('map', {
  key: '042b5b75-f847-4f2a-b695-b5f58adc9dfd	',
  center: [47.4936977377508, 26.1686477267334],
  zoom: 6,
  useRtlTextPlugin: 'always-on',
});
window.addEventListener('resize', () => map.invalidateSize());
updateData();

map.once('styleload', () => {
  map.addLayer({
    id: `my-polygon`,
    type: 'polygon',
    filter: [
      'all',
      ['match', ['sourceAttr', 'foo'],
        ['bar'], true, false
      ],
      ['match', ['get', 'itemName'],
        ['___stub___'], true, false
      ],
    ],
    style: {},
  });
  map.addLayer({
    id: `my-line`,
    type: 'line',
    filter: [
      'all',
      ['match', ['sourceAttr', 'foo'],
        ['bar'], true, false
      ],
      ['match', ['get', 'itemName'],
        ['___stub___'], true, false
      ],
    ],
    style: {},
  });
  map.addLayer({
    id: `my-point`,
    type: 'point',
    filter: ['match', ['sourceAttr', 'foo'],
      ['bar'], true, false
    ],
    style: {
      iconImage: 'ent_i',
      iconWidth: 15,
      iconAnchor: [0.5, 0.5],
      // allowOverlap: true,
      textField: ['get', 'Name'],
      textFont: 'Noto_Sans',
    },
  });
});

const geojson = new mapgl.GeoJsonSource(map, {
  data: {
    type: 'FeatureCollection',
    features: [],
  },
  attributes: {
    foo: 'bar',
  },
});
let activeProjectName;
let projectsData;

async function updateData() {
  projectsData = await fetchData();

  if (!activeProjectName) {
    const defaultProject = Object.values(projectsData).find(
      (project) => project.alias === defaultProjectAlias,
    );
    if (defaultProject) {
      activeProjectName = defaultProject.name;
    } else {
      activeProjectName =...