Примеры js: Java Script. Примеры скриптов.

Интерактивные SQL-примеры на JavaScript

Читать про SQL хорошо, но пробовать запросы вживую еще лучше! Поэтому я разработал виджеты, которые помогут вам превратить статичные SQL-запросы в статьях в интерактивные примеры.

Вот рабочий пример, попробуйте его:

select * from employees
limit 5;

А вот четыре шага, которые помогут настроить интерактивные примеры в ваших статьях или документации:

1. Подключите зависимости

Вам понадобится три JavaScript-файла:

• sqlite3.js — SQLite, скомпилированная для браузера.
• sqlime-db.js — веб-компонент базы данных.
• sqlime-examples.js — веб-компонент интерактивных примеров.

Подключите их через CDN или (предпочтительно) скачайте и разместите локально:

<script src="https://unpkg.com/@antonz/[email protected]/dist/sqlite3.js"></script>
<script src="https://unpkg.com/[email protected]/dist/sqlime-db.js"></script>
<script src="https://unpkg. com/[email protected]/dist/sqlime-examples.js"></script>

Если выбрали локальный вариант, придется еще скачать WebAssembly-файл SQLite:

https://unpkg.com/@antonz/[email protected]/dist/sqlite3.wasm

sqlite3.wasm неявно используется скриптом sqlite3.js, так что разместите их в одном каталоге.

Я советую держать SQLite локально, потому что она весит ≈1Мб, а CDN часто подвисают на таких больших файлах.

Все файлы можно установить через npm:

npm install @antonz/sqlite
npm install sqlime

Примечание. @antonz/sqlite — это копия официальной сборки SQLite Wasm. Я завернул ее в npm-пакет для удобства, но если хотите — используйте оригинальную сборку с сайта SQLite.

2. Напишите статью, как делаете это обычно

Допустим, вы пишете небольшую заметку о ранжировании данных в SQL:

<p>Для ранжирования данных в SQL
используют оконную функцию <code>rank()<code>:</p>
<pre>select
  rank() over w as "rank",
  name, department, salary
from employees
window w as (order by salary desc)
order by "rank", id;</pre>
<p>статья продолжается.
  ..</p>

Отображается как обычный HTML:

Для ранжирования данных в SQL используют оконную функцию rank():

select
  rank() over w as "rank",
  name, department, salary
from employees
window w as (order by salary desc)
order by "rank", id;

статья продолжается…

3. Загрузите базу данных

Вы можете создать базу из бинарного файла БД SQLite или SQL-скрипта. Я выбрал второй вариант и использую employees.sql, который создает таблицу employees и заполняет ее данными.

Загрузите базу с помощью компонента sqlime-db:

<sqlime-db name="employees" path="./employees.sql"></sqlime-db>

• name — название базы, по которому будем обращаться к ней в дальнейшем.
• path — URL, по которому доступен SQL-скрипт (или бинарный файл) базы.

4. Активируйте примеры

Осталось только превратить SQL-запросы из обычных элементов pre в интерактивные примеры. За это отвечает компонент sqlime-examples:

<sqlime-examples db="employees" selector="pre.example" editable></sqlime-examples>

• db — название базы, которую мы загрузили раньше.
• selector — CSS-селектор для элементов, которые содержат SQL.
• editable — разрешает редактировать код примеров (если убрать, можно будет только запускать).

Готово!

Для ранжирования данных в SQL используют оконную функцию rank():

select
  rank() over w as "rank",
  name, department, salary
from employees
window w as (order by salary desc)
order by "rank", id;

статья продолжается…

sqlime-examples преобразует все элементы с указанным селектором, так что достаточно добавить его на страницу только один раз (кроме случаев, когда у вас несколько групп примеров, которые работают с разными базами данных).

Итого

Интерактивные SQL-примеры отлично подходят для любой документации:

• более информативные, чем статические запросы;
• лучше вовлекают читателя и поощряют эксперименты;
• легко настраиваются и не требуют сервера.

Попробуйте добавить интерактива своим статьям, или задайте вопрос на гитхабе, если что-то непонятно.

Подписывайтесь на канал, чтобы не пропустить новые заметки 🚀

JavaScript в примерах.

---

Найти: на sergejj-kilin.narod.ru Народ.Ру Яндексе

---

Note. Для выделения кодов скриптов из таблиц используйте Ctrl + Click правой кнопкой мыши, выберите «выделить всё», второй Click правой кнопкой мыши (без Ctrl) «копировать». Скопированные скрипты сначала поместите в любой текстовый редактор, например, в Блокнот, и только затем, скопировав вновь, вставляйте в код страницы.

•  JavaScript — Калькулятор;
•  Инженерный калькулятор.;
•  Простой полнофункциональный Javascript калькулятор;
• Игра «Морской бой»;
• Игра «Полигон»;
• Игра «Саймон»;
• Игра «Зрительная память»;
• Игра «Зрительная память память на числа»;
• Игра простые КРЕСТИКИ-НОЛИКИ;
• Игра 5-линейные КРЕСТИКИ-НОЛИКИ;
• Игра «Пятнашки»;
• Игра «Пятнашки — Алфавит»;
• Игра «Шашки»;
• Игра «Отелло»;
• Игра «Пирамидка»;
• Игра «Спички» — многорядные;
• Игра «Закрой все книги!»;
•  Анимированный календарь;
• Отсчет до любого момента в днях;
• Полный календарь на месяц;
• «Квартальный» календарь;
• Анимированный текст;
• Еще анимация текста;
• Анимация текста в статусной строке;
• Вопрос при входе на страницу;
• Добавить в избранное (Favorites);
• Определитель типа браузера;
• Персональный счетчик посещений (требуется вкл.
  Cookie);
• Приветственное сообщение;
• Случайная цитата;
• Изменение курсора мыши;
•  Графические часы;
• Простые часы (в форме, европейский вид);
• 24-часовые часы (в форме);
• Обычные часы, не в форме;
• Часы с использованием Images;
• Будильник (напоминатель);
• Время существования страницы;
•  Бабочки (бабочка);
• Фейерверк 1;
• Фейерверк 2;
• Летящие звезды;
• Переливающиеся линки;
•  ТАБЛИЦА ЦВЕТОВ;
• Таблица цветов (информационная);
• Таблица цветов с использованием карты рисунка;
• Изминение цвета фона страницы;
•  Кнопка — рисунок;
•  Отжимаемая кнопка;
• КНОПКА (линк) «ЗАКРЫТЬ ОКНО»;
• КНОПКА «Показать источник»;
• Изменение цвета кнопки-рисунка при наведении мыши;
• Переливающаяся JavaScript-кнопка;
• Изменение картинки при наведении мыши на кнопку;
• «Радио» кнопка в качестве линка;
• Включение радио-кнопок при наведении мыши на линк;
• Замена текста на кнопке после клика;
• «Разговорчивая» «почтовая» кнопка (линк);
• Кнопка «Применить» со скроллингом;
• Многофункциональная анимированная кнопка с различными видами скроллинга заголовка и разными URLs;
•  Покрутка рисунков — МИНИГАЛЕРЕЯ;
• Рисунок во весь экран;
• Пропорциональное изменение размеров рисунка;
• Занавес для рисунка;
• Описание к рисунку-ссылке (в форме);
• Галерея рисунков;
• Скроллинг рисунков;
• Pop-up рисунки при клике по thumb-nail;
• Просмотр больших рисунков в POP-UP;
• Анимированное POP-UP окно;
• Связанный со страницей pop-up;
• Показать все линки страницы;
• Окно со скроллингом без scrollbars!;
• Просмотр рисунка для фона в POP-UP окне;

 

_

 

 

примеров | p5.

js пример | p5.js перейти к содержанию

• Английский
• Испанский
• 简体中文
• 한국어
• हिन्दी

Структура

Комментарии/Отчеты
Координаты
Ширина/Высота
Настройка/Рисование
Без Цикла
Цикл
Перерисовка
Функции
Рекурсия
Создание Графики

Форма

Точки/линии
Примитивы формы
Круговая диаграмма
Правильный многоугольник
Звезда
Треугольная полоса
Безье
Трехмерные примитивы
Триггерные колеса/круговая диаграмма

Данные

Переменные
True/False
Область действия переменной
Числа

Массивы

Массив
Массив 2D
Массив объектов
Обход 2dмассива

Управление

Итерация
Встроенная итерация
Условные операторы 1
Условные операторы 2
Логические операторы
Логические операторы 2
Условные формы

Изображение

Загрузка/дисплей изображение
Фоновое изображение
Прозрачность
Альфа -маска
Создание изображения
точка
Blur
Обнаружение краев
Яркость
Своилка
Copy () Метод

Color

. Оттенок
Насыщенность
Яркость
Цветовые переменные
Относительность
Линейный градиент
Радиальный градиент
Lerp Color

Математика

Приращение Декремент
Приоритет оператора
Расстояние 1D
Расстояние 2D
Синус
Синус косинус
Синусоида
Аддитивная волна
Полярно-декартово
Арктангенс
Линейная интерполяция
Двойное случайное
Случайное
Noise1D
Noise Wave
Noise2D
Noise3D
Случайные Аккорды
Случайный Гауссиан
Карта
Графические 2D-уравнения
Параметрические уравнения

Моделирование

Forces
Particle System
Flocking
Wolfram CA
Game of Life
Multiple Particle Systems
Spirograph
L-Systems
Spring
Springs
Soft Body
SmokeParticles
Brownian Motion
Chain 9001 7 снежинок
Плитки Пенроуза
Рекурсивное дерево
Множество Мандельброта
Кривая Коха
Пузырьковая сортировка
Шагающие ноги Иллюзия
Частицы
Быстрая сортировка

Взаимодействие

Tickle
Weight Line
Follow 1
Follow 2
Follow 3
Snake game
Wavemaker
Reach 1
Reach 2
Reach 3
Данные датчика Arduino через WebJack
Kaleidoscope

Объекты

Объекты
Несколько объектов
Массив объектов
Объекты 2
Наследование
Составные объекты
Экземпляры автомобилей

Фары

Направленный
Смесь

Движение

Неортогональное отражение
Линейное
Отскок
Прыгающие пузырьки
Трансформация
Движение по кривым
Круговое столкновение

Режим экземпляра

Экземпляр
Контейнер экземпляра

DOM

Ввод/кнопка
Ползунок
Изменение DOM
Видео
Видеохолст
Видеопиксели
Захват видео
Удаление
Элементы формы DOM

Рисование

Непрерывные линии
Шаблоны
Импульсы

Преобразование

Переместить
Масштаб
Повернуть
Рычаг

Типография

Буквы
Слова
Поворот текста

3D

Геометрии
Синус Косинус в 3D
Несколько источников света
Материалы
Текстуры
Приведение лучей
Управление орбитой
Базовый шейдер
Шейдер как текстура
Униформы шейдера передачи
Шейдер с использованием веб-камеры

Ввод

Часы
Ограничение
Ослабление
Клавиатура
Миллисекунды
Мышь 1D
Мышь 2D
Функции мыши
Сигналы мыши
Нажатие мыши
Прокрутка
Сохранение ввода

Дополнительные данные 90 015

Загрузить сохраненную таблицу JSON
Загрузить сохраненную таблицу

Звук

Load/Play Sound
Preload SoundFile
soundFormats
Play Mode
Pan Sound
Sound Effect
Playback Rate
Measuring Amplitude
Noise Drum Envelope
Note Envelope
Частота генератора
Микрофонный вход
Частота Spectrum
Микрофонный порог
Фильтр LowPass
Фильтр BandPass
Задержка
Реверберация
Конволюционная реверберация
Запись сохранения звука
Частотная модуляция
Амплитудная модуляция

Мобильный

Acceleration Ball Bounce
Simple Draw
Acceleration Color
Shake Ball Bounce
Tilted 3D Box

Hello p5

Простые фигуры
Интерактивность 1
Интерактивность 2
Анимация
Стая
Погода
Рисование
Песня

 

примеров | Mapbox GL JS

Примеры | Картбокс GL JS | Mapbox

All docschevron-rightarrow-leftMapbox GL JSchevron-rightExamples

Поиск

Темы

Все темыНачало работы3DАтмосфераПоддержка браузераКамераУправление и наложенияГеокодерПоддержка интернационализацииСлоиПроекцииИсточникиСтилиВзаимодействие с пользователем

Отображение веб-карты с использованием альтернативной проекции mbert, Winkel Tripel или другая картографическая проекция.

Отображение карты на веб-странице

Инициализация карты в элементе HTML с помощью Mapbox GL JS.

Начертить многоугольник и вычислить его площадь

Используйте mapbox-gl-draw для рисования многоугольника и Turf.js для вычисления его площади в квадратных метрах.

Создание и стиль кластеров

Использование встроенных функций Mapbox GL JS для визуализации точек в виде кластеров.

Добавление полигона на карту с использованием источника GeoJSON

Стиль полигона с типом слоя заливки.

Отображать всплывающее окно при нажатии

Когда пользователь щелкает символ, показывать всплывающее окно с дополнительной информацией.

Добавить геокодер

Используйте элемент управления mapbox-gl-geocoder для поиска мест с помощью Mapbox Geocoding API.

Добавьте 3D-модель с помощью threebox

Используйте слой пользовательского стиля с threebox.js, чтобы добавить 3D-модель на карту.

Добавить 3D-модель

Используйте слой пользовательского стиля с three. js, чтобы добавить 3D-модель на карту.

Добавьте линию на карту, используя источник GeoJSON

Добавьте линию GeoJSON на карту, используя addSource, затем стилизуйте ее, используя свойства рисования addLayer.

Добавить маркер по умолчанию на веб-карту

Добавить маркер на карту с помощью метода маркера по умолчанию в Mapbox GL JS.

Добавление пользовательских значков с помощью маркеров

Добавление пользовательских значков маркеров на карту.

Добавить значок на карту

Добавить значок на карту с внешнего URL-адреса и использовать его в слое символов.

Показать и скрыть слои

Создайте настраиваемый переключатель слоев для отображения различных наборов данных.

Изменение стиля карты

Переключение на другой стиль карты.

Отображение элементов управления масштабированием и вращением

Добавление элементов управления масштабированием и вращением на карту.

Добавление маркеров на веб-карту с помощью слоя символов

Нанесение точек из коллекции GeoJSON на карту.

Отображать всплывающее окно при наведении

Когда пользователь наводит курсор на настраиваемый маркер, показывать всплывающее окно с дополнительной информацией.

Отображение направлений навигации

Используйте подключаемый модуль mapbox-gl-directions для отображения результатов API Mapbox Directions.

Показать всплывающее окно

Добавить всплывающее окно на карту.

Добавление 3D местности на карту

Используйте setTerrain для добавления 3D-территории на карту с использованием источника растровой местности.

Принять координаты в качестве входных данных для геокодера

Используйте элемент управления mapbox-gl-geocoder для поиска мест с помощью Mapbox Geocoding API.

Добавить источник холста

Добавить источник холста на карту.

Добавить слой пользовательского стиля

Использовать слой пользовательского стиля для визуализации пользовательского содержимого WebGL.

Добавление полноэкранного элемента управления на карту

Переключение между текущим видом и полноэкранным режимом.

Добавить сгенерированный значок на карту

Добавить на карту значок, сгенерированный во время выполнения.

Добавить изображение с географической привязкой

Добавить на карту файл изображения с географической привязкой.

Добавление маркера с использованием названия места

Добавление маркера с использованием названия места или адреса его местоположения с помощью прямого геокодера.

Добавить новый слой под метками

Используйте второй аргумент addLayer, чтобы добавить слой под метками.

Добавить шаблон к многоугольнику

Используйте шаблон заполнения, чтобы нарисовать многоугольник из повторяющегося шаблона изображения.

Добавьте растровое изображение к слою карты

Добавьте наложение изображения погоды с радара поверх темной векторной карты.

Добавить источник растровых листов

Добавить на карту сторонний источник растра.

Добавить на карту растягиваемое изображение

Использовать растягиваемое изображение в качестве фона для текста.

Добавить сторонний источник векторных листов

Рендеринг векторных данных, предоставленных Mapillary.

Добавить источник векторных листов

Добавить источник векторов на карту.

Добавить видео

Отображение видео поверх базового слоя спутникового растра.

Добавить источник WMS

Добавить внешний растровый слой веб-картографического сервиса на карту с помощью опции плиток addSource.

Добавить анимированный значок на карту

Добавить анимированный значок на карту, созданную во время выполнения с помощью Canvas API.

Добавить анимацию пути муравья к линии

Стиль линии с анимированным штриховым массивом для создания эффекта «пути муравья».

Добавление совместных жестов на карту

Использование совместных жестов для управления масштабированием прокруткой и сенсорным панорамированием.

Добавление пользовательского тумана на карту

Настройка атмосферного стиля с помощью setFog.

Добавить отмывку рельефа

Добавить растровую отмывку на карту.

Добавить данные в режиме реального времени

Используйте потоки данных о местоположении в реальном времени для перемещения символа на карте.

Добавить несколько геометрий из одного источника GeoJSON

Добавить слой многоугольника и окружности из одного источника GeoJSON.

Добавить поддержку сценариев с написанием справа налево

Используйте подключаемый модуль mapbox-gl-rtl-text для поддержки языков с написанием справа налево, таких как арабский и иврит.

Настройка непрозрачности слоя

Перетащите ползунок диапазона, чтобы настроить непрозрачность растрового слоя поверх карты.

Анимация 3D-зданий на основе окружающих звуков

Создание 3D-карты, которая реагирует на звуки окружающей среды.

Анимация линии

Анимация линии путем обновления источника GeoJSON в каждом кадре.

Анимация маркера

Анимация положения маркера путем обновления его положения в каждом кадре.

Анимация точки вдоль линии

Анимация положения точки путем обновления источника GeoJSON в каждом кадре.

Анимация точки на маршруте

Используйте «Терф» для плавной анимации точки вдоль линии.

Анимация серии изображений

Используйте серию источников изображений для создания анимации.

Анимация камеры карты вокруг точки

Анимация камеры карты вокруг точки.

Анимация камеры по траектории

Используйте FreeCamera API для движения по траектории в трехмерной местности.

Анимация камеры вокруг точки с трехмерным ландшафтом

Используйте API FreeCamera для создания анимации пролета, сфокусированной на точке.

Прикрепить всплывающее окно к экземпляру маркера

Прикрепить всплывающее окно к маркеру и отображать его по щелчку.

Центрировать карту на выбранном объекте

Используйте события и flyTo, чтобы центрировать карту на объекте.

Изменение цвета слоя с помощью кнопок

Используйте setPaintProperty для изменения цвета заливки слоя.

Изменение языка карты

Используйте setLayoutProperty для динамического переключения языков.

Изменение цвета здания в зависимости от уровня масштабирования

Используйте выражение интерполяции для упрощения слоя здания и плавного перехода от одного цвета к другому.

Изменение регистра меток

Используйте выражения верхнего и нижнего регистра для изменения регистра меток.

Изменить позицию по умолчанию для атрибуции

Поместить атрибуцию в верхнюю левую позицию при инициализации карты.

Изменение мировоззрения административных границ

Используйте значение мировоззрения для настройки административных границ в зависимости от аудитории карты.

Проверить, поддерживается ли Mapbox GL JS

Проверить, поддерживается ли браузер Mapbox GL.

Создание перетаскиваемого маркера

Перетащите маркер в новое место на карте и введите его координаты на дисплее.

Создание точки, которую можно перетаскивать

Перетащите точку в новое место на карте и введите ее координаты на дисплее.

Создайте градиентную линию с помощью выражения

Используйте свойство рисования градиента линии и выражение для визуализации расстояния от начальной точки линии.

Создайте слой тепловой карты

Визуализируйте частоту землетрясений по местоположению с помощью слоя тепловой карты.

Создание эффекта наведения

Использование событий и состояний элементов для создания эффекта наведения для каждого элемента.

Создание вращающегося глобуса

Отображение карты в виде интерактивного вращающегося глобуса.

Создание ползунка времени

Визуализация землетрясений с помощью ползунка диапазона.

Настройка анимации камеры

Настройка анимации камеры с помощью AnimationOptions.

Отключить поворот карты

Запретить пользователям поворачивать карту.

Отключить масштабирование прокруткой

Запретить масштабирование карты прокруткой.

Отображение карты с пользовательским стилем

Использование пользовательского стиля, размещенного в Mapbox, на карте Mapbox GL JS.

Показать неинтерактивную карту

Отключить интерактивность для создания статической карты.

Отображение спутниковой карты на веб-странице

Отображение спутникового растрового слоя на карте с помощью Mapbox GL JS.

Отображение и стиль форматированных текстовых меток

Используйте выражение формата для отображения меток страны как на английском, так и на местном языке.

Отображение зданий в 3D

Используйте выдавливания для отображения высоты зданий в 3D.

Отображение кластеров HTML с пользовательскими свойствами

Расширьте возможности кластеризации с помощью маркеров HTML и выражений пользовательских свойств.

Отображение линии, пересекающей 180-й меридиан

Нарисуйте линию, пересекающую 180-й меридиан, используя источник GeoJSON.

Выдавливание полигонов для 3D-картографирования помещений

Создайте 3D-карту помещений со свойством заливки-вытягивания-высоты.

Фильтр объектов в представлении карты

Переместите карту, чтобы запросить видимые объекты в слое векторных листов и отфильтровать, введя ввод.

Фильтрация символов по шагу и расстоянию

Используйте шаг и расстояние от центра для управления плотностью символов для карт с шагом.

Фильтрация символов по текстовому вводу

Фильтрация символов по имени значка путем ввода текстового ввода.

Фильтрация символов путем переключения флажков

Фильтрация набора символов на основе значения свойства в данных.

Фильтрация символов с использованием динамического выражения

Фильтрация набора символов на основе значения свойства в данных.

Подгонка карты под ограничительную рамку

Подгонка карты под определенную область, независимо от размера карты в пикселях.

Подгонка к границам LineString

Получить границы LineString.

Перелет в точку

Используйте flyTo для плавной интерполяции между точками.

Перелет в точку на основе позиции прокрутки

Прокрутите историю вниз, и карта переместится к местоположению главы.

Создать и добавить отсутствующий значок на карту

Динамически создать изображение, недоступное в стиле карты во время выполнения, и добавить его в стиль карты.

Получить координаты указателя мыши

Показать положение мыши при наведении с пикселями и координатами широты и долготы.

Получение объектов под указателем мыши

Используйте queryRenderedFeatures для отображения свойств элементов карты, на которые наведен курсор.

Выделите объекты, содержащие похожие данные

Наведите указатель мыши на округа, чтобы выделить округа с одинаковыми названиями.

Выделение объектов в ограничивающей рамке

Удерживая нажатой клавишу Shift, перетащите карту, чтобы запросить объекты с помощью queryRenderedFeatures.

Объедините локальные данные JSON с геометрией векторных листов

Стилизуйте картограмму, объединив локальные данные JSON с геометриями векторных листов.

Перейти к ряду локаций

Используйте функцию jumpTo для демонстрации нескольких локаций.

Ограничьте результаты геокодирования именованным регионом

Используйте элемент управления mapbox-gl-geocoder для поиска мест с помощью Mapbox Geocoding API, ограничивающего результаты регионом.

Загрузить данные из внешнего файла GeoJSON

Добавить GeoJSONSource с помощью URL-адреса и показать данные на карте.

Локализуйте геокодер на заданный язык

Локализуйте элемент управления mapbox-gl-geocoder, чтобы установить язык пользовательского интерфейса и повысить релевантность результатов на этом языке.

Найдите пользователя

Определите местоположение пользователя, а затем отследите его текущее местоположение на карте с помощью GeolocateControl.

Измерение расстояний

Щелкайте по точкам на карте, чтобы создавать линии, измеряющие расстояния с помощью turf.length.

Навигация по карте с игровыми элементами управления

Используйте клавиши со стрелками на клавиатуре для перемещения по карте с игровыми элементами управления.

Сместите точку схода с помощью отступов

Сместите центр или точку схода карты, чтобы уменьшить искажение при отображении плавающих элементов поверх карты.

Ориентация маркеров по направлению к горизонту

Добавление маркеров, выровненных по горизонтали, на глобус.

Сохранение источников и слоев при переключении базового стиля карты

Использование событий для сохранения программно добавленных источников и слоев при обновлении стиля карты.

Поместите ввод геокодера за пределы карты

Используйте элемент управления mapbox-gl-geocoder для поиска мест с помощью Mapbox Geocoding API, прикрепленного к элементу вне карты.

Воспроизведение локаций на карте в виде слайд-шоу

Автопроигрывание районов Нью-Йорка.

Запрос высоты местности

Запрос высоты местности на стороне клиента.

Запрос высоты местности вдоль линии

Используйте данные высоты Mapbox для создания профиля высоты между любыми двумя точками.

Рендеринг копий мира

Переключение между рендерингом одного мира и нескольких копий мира с помощью setRenderWorldCopies.

Ограничить панорамирование карты областью

Запретите панорамирование карты в другое место, установив maxBounds.

Выберите объекты вокруг выбранной точки

Нажмите на карту, чтобы запросить объекты с помощью queryRenderedFeatures.

Установить точку после результата геокодера

Стиль маркера, используемого для обозначения местоположения результата поиска mapbox-gl-geocoder.

Установить шаг и азимут

Инициализировать карту с параметрами камеры тангажа и пеленга.

Показывать информацию о полигоне при нажатии

Когда пользователь щелкает многоугольник, показывать всплывающее окно с дополнительной информацией.

Медленно летите к месту

Используйте flyTo с flyOptions для медленного приближения к месту.

Стиль кругов со свойством, управляемым данными

Создайте визуализацию с выражением данных для цвета круга.

Линии стиля со свойством, управляемым данными

Создайте визуализацию с выражением данных для цвета линии.

Символы стиля на основе шага

Используйте выражение шага для переключения стиля символов в зависимости от шага карты.

Дополнить результаты поиска прямого геокодирования другим источником данных

Используйте элемент управления mapbox-gl-geocoder для поиска мест с помощью Mapbox Geocoding API.

Пролистывание между картами

Используйте mapbox-gl-compare для пролистывания и синхронизации двух карт.

Переключить взаимодействия

Включить или отключить обработчики пользовательского интерфейса на карте.

Обновление слоя картограммы с уровнем масштабирования

Показать штат или население округа в зависимости от уровня масштабирования.

Обновление объекта в режиме реального времени

Изменение существующего объекта на карте в режиме реального времени путем обновления его данных.

Используйте пользовательскую анимацию камеры с помощью геокодера

Используйте параметры анимации камеры с помощью mapbox-gl-geocoder для создания пользовательской анимации, когда пользователь выбирает результат поиска.

Используйте пользовательскую функцию рендеринга с геокодером

Используйте пользовательскую функцию рендеринга HTML с элементом управления mapbox-gl-geocoder для настройки раскрывающегося меню.

Использовать резервное изображение

Использовать выражение объединения для отображения другого изображения, когда запрошенное изображение недоступно.