diff --git a/src/content/docs/2-webmap.mdx b/src/content/docs/2-webmap.mdx index d7951cc..6d80cf9 100644 --- a/src/content/docs/2-webmap.mdx +++ b/src/content/docs/2-webmap.mdx @@ -169,6 +169,8 @@ const map = new maplibregl.Map({ > > Страница HTML является корневой. Ей необходимо дать информацию о том, какие внешние библиотеки и файлы будут использоваться. Например, `style.css` и `main.js` являются внешними файлами, а MapLibre является внешней библиотекой. Находящиеся на сервере файлы необходимо подключать по URL. +### Запуск локального сервера + После этого запустим Live Server, перейдём по адресу локального сервера и увидим карту. > Live Server обычно запускается по адресу `127.0.0.1:5500`. `127.0.0.1` или `localhost` -- это внутренний адрес сервера на нашем компьютере. Он будет одним и тем же у всех компьютеров. И он недоступен для запросов снаружи. На одном веб-сервере может быть запущено несколько приложений. Для их разграничения используется порт, в нашем случае `5500`. @@ -410,12 +412,12 @@ map.on('load', () => { }) ``` +## Что мы получили + У нас получилась отличная карта! При желании посмотрите [полный код](https://github.com/gtitov/geojson-maplibre-map) и [возможный результат](https://gtitov.github.io/geojson-maplibre-map/). -## Что мы получили - Откроем вкладку Сеть в инструментах разработчика и ещё разок проследим поток данных ![geojson-network-tab](../../assets/geojson-network-tab.png) diff --git a/src/content/docs/3-api.mdx b/src/content/docs/3-api.mdx index 371a006..43adbd1 100644 --- a/src/content/docs/3-api.mdx +++ b/src/content/docs/3-api.mdx @@ -1,6 +1,5 @@ --- title: API -draft: true --- import { Card, FileTree, LinkCard, TabItem, Tabs } from '@astrojs/starlight/components'; @@ -16,26 +15,39 @@ import Option from '../../components/Option.astro'; - определение API - асинхронность JavaScript - запрос `fetch...then` +- кластеризацию точек на карте +- связку элементов веб-страницы с картой -В рамках практической части создадим карту вакансий на основе изменяющегося содержания Google-таблицы. +В рамках практической части создадим карту вакансий на основе изменяющегося содержания онлайн-таблицы. При желании посмотрите [полный код](https://github.com/gtitov/sheet-maplibre-map) и [возможный результат](https://gtitov.github.io/sheet-maplibre-map/). + ## API API обычно переводят как прикладной программный интерфейс или программный интерфейс приложений. На практике чаще говорят просто "апи". -Помните формулировку +Помните формулировку из предыдущего упражнения > ...клиент (браузер) обращается к серверу с запросом, сервер возвращает клиенту ответ ![alt text](../../assets/image-16.png) -Откуда браузер знает, куда обращаться? Мы написали. А откуда мы знаем? Мы знаем, потому что ожидаем, что при обращении к определённому *адресу* (URL) нам вернётся определённый ответ. Например, при обращении за файлом `style.css` мы получим стили. +Откуда браузер знает, куда обращаться? + +Мы написали, куда ему нужно обращаться. + +А откуда мы знаем? + +Мы знаем, потому что ожидаем, что при обращении к определённому *адресу* (URL) нам вернётся определённый ответ. Например, при обращении за файлом `style.css` мы получим стили, потому что сами и создали этот файл. Совокупность *адресов* (URL) и правил обращения к ним называется API. Отдельные адреса называются методами API или, в обиходе, ручками API. -В идеале API будет иметь интуитивно понятное назначение и описание каждого метода, но это не всегда так. +В идеале API будет иметь интуитивно понятное назначение и описание каждого метода. -> Для пространственных и картографических данных существует ряд стандартов для API. Обращаясь к API, который следует стандарту пользователь знает, чего ему ожидать. Мы уже использовали стандртный формат обмена GeoJSON и видели, что MapLibre принимает его без необходимости предварительной обработки. К другим популярным стандартам следует отнести протоколы WMS, WFS и векторные тайлы. Ряд стандартов курирует Open Geospatial Consortium, некоторые приняты как стандарты ISO и ГОСТ. +> Про то, как этого добиться написана не одна книга. Но помните, сложно понять, что такое хорошо и что такое плохо, без практики, поэтому для начала надо дерзать и пробовать. + +Существуют стандарты API. Обращаясь к API, который следует стандарту пользователь знает, чего ему ожидать. + +> Ряд стандартов API существует для пространственных и картографических данных. Мы уже использовали стандартный формат обмена GeoJSON и видели, что MapLibre принимает его без необходимости предварительной обработки. К другим популярным стандартам следует отнести протоколы WMS, WFS, векторные тайлы. Ряд стандартов курирует Открытый Геопространственный Консорциум (Open Geospatial Consortium), некоторые приняты как стандарты ISO и ГОСТ. Подключая источники данных, мы тоже использовали API, просто вызовом необходимых методов занималась библиотека MapLibre. @@ -43,8 +55,7 @@ API обычно переводят как прикладной программ Попробуем обратиться к публично доступным методам API Google-таблиц, а именно загрузить данные таблицы в формате CSV. -По аналогии с первым упражнением создадим заготовку для карты из файлов `index.html`, `style.css`, `main.js`. - +Для начала по аналогии с первым упражнением создадим заготовку для карты из файлов `index.html`, `style.css`, `main.js`. @@ -83,19 +94,15 @@ API обычно переводят как прикладной программ ```js title="main.js" const map = new maplibregl.Map({ - container: 'map', - style: "https://raw.githubusercontent.com/gtitov/basemaps/refs/heads/master/positron-nolabels.json", - center: [51, 37], - zoom: 4 + container: 'map', + style: "https://raw.githubusercontent.com/gtitov/basemaps/refs/heads/master/positron-nolabels.json", + center: [51, 37], + zoom: 4 }); ``` -{/* <div id="map"></div> это'}> */} - {/* */} -{/* */} - <div id="map"></div> это'}>