main.js

/*
Объявление переменной const, let, var
Объявление функции const f = () => {}, function f() {}
Асинхронность async / await, fetch...then, callback
*/

/*
1. добавьте на карту слой с озёрами `data/ne_50m_lakes.geojson`
2. добавьте отображение информации о названии и численности населения страны по клику
3. установите размер пунсона города в зависимости от численности населения в нём
4* добавьте легенду к слою с населением по странам
*/

// data source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const fetchAndFilterCities = async () => {
  const response = await fetch("./data/ne_50m_populated_places.geojson");
  const allCities = await response.json();
  const bigCities = {
    // features фильтруем, а остальное оставляем как было
    ...allCities,
    features: allCities.features.filter(
      (feature) => feature.properties.POP_MAX > 1000000
    ),
  };
  return bigCities;
};
const cities = fetchAndFilterCities();
// .then(c => console.log(c)); // после завершения асинхронной функции
// console.log(cities); // если не дожидаемся завершения, получаем Promise

const getColor = (pop) => {
  return pop > 1000000000
    ? [128, 0, 38]
    : pop > 300000000
    ? [189, 0, 38]
    : pop > 100000000
    ? [227, 26, 28]
    : pop > 50000000
    ? [252, 78, 42]
    : pop > 25000000
    ? [253, 141, 60]
    : pop > 10000000
    ? [254, 178, 76]
    : pop > 1000000
    ? [254, 217, 118]
    : [255, 237, 160];
};

const deckgl = new deck.DeckGL({
  // mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json', // для использования mapStyle необходимо подключить библиотеку MapLibre
  style: {
    "background-color": "rgb(0, 0, 60)",
  },
  container: "map",
  initialViewState: {
    latitude: 51.47,
    longitude: 0.45,
    zoom: 4,
    bearing: 0,
    pitch: 0,
  },
  controller: true,
  getCursor: ({ isHovering, isDragging }) =>
    isHovering ? "pointer" : isDragging ? "grabbing" : "grab",
  layers: [
    new deck.GeoJsonLayer({
      id: "countries",
      data: "./data/ne_50m_admin_0_countries.geojson",
      // Styles
      stroked: true,
      filled: true,
      lineWidthMinPixels: 2,
      opacity: 0.4,
      getLineColor: [255, 255, 255],
      getFillColor: (feature) => getColor(feature.properties.POP_EST),
    }),
    new deck.GeoJsonLayer({
      id: "rivers",
      data: "./data/ne_50m_rivers_lake_centerlines.geojson",
      getLineColor: [0, 0, 60],
      lineWidthUnits: "pixels",
      lineWidth: 2,
    }),
    new deck.GeoJsonLayer({
      id: "cities",
      data: cities, // deck сам дожидается завершения Promise
      // Styles
      filled: true,
      pointRadiusUnits: "pixels",
      getPointRadius: 4,
      getFillColor: [0, 200, 0, 200],
      // Interactive props
      pickable: true,
      autoHighlight: true,
      onClick: (info, event) =>
        (document.getElementById(
          "name"
        ).innerText = `Латинское название города: ${info.object.properties.NAME}`),
    }),
  ],
});