`<gui-map />`

Maplibregl

This component relies on maplibre-gl in order to work. This library is not vendored with @greycat/web, it is your responsibility to define maplibregl globally prior to initializing the SDK:

import '@greycat/web';
import maplibregl from 'maplibre-gl';

globalThis.maplibregl = maplibregl; // This ensures `maplibregl` is globally available

await gc.sdk.init();

Example

Display markers on a map from a sampled nodeGeo.

PreviewSourceGreyCat

el = document.createElement('div');
el.style.height = '600px';
const markers = document.createElement('gui-map-markers');
const map = document.createElement('gui-map');
map.options = {
  style: 'https://demotiles.maplibre.org/style.json',
  center: gc.core.geo.fromLatLng(49.6181, 6.162),
  zoom: 3,
};
el.appendChild(map);
map.appendChild(markers);

const root = await gc.$.default.root();
const nCities = root['project::cities'];
map.ready.then((m) => {
  m.on('zoomend', updateCities);
  m.on('dragend', updateCities);
  async function updateCities() {
    const bounds = m.getBounds();
    const tCities = await gc.core.nodeGeo.sample(
      [nCities],
      gc.core.geo.fromLatLng(bounds.getSouthWest()),
      gc.core.geo.fromLatLng(bounds.getNorthEast()),
      1000,
      gc.core.SamplingMode.dense,
    );
    const cities = [];
    for (const row of tCities) {
      cities.push({ geo: row[0], data: row[1] });
    }
    console.log(cities);
    markers.value = cities;
  }
  updateCities();
});

var cities: nodeGeo<City>;

type City {
  country: String;
  name: String;
  location: geo;
  population: int;
  type: CapitalType;
}

enum CapitalType {
  Others,
  "Administrative Capital",
  "Seat of Government",
  Capital,
  "Legislative Capital",
  "Economic Capital",
}

fn import() {
  if (cities.size() != 0) {
    return;
  }
  var reader = CsvReader<City> {
    path: "csv/cities.csv",
    format: CsvFormat {
      header_lines: 1,
    },
  };

  while (reader.can_read()) {
    var record = reader.read();
    cities.set(record.location, record);
  }
}