Mapbox GL JS canvas не отображается должным образом в модале Bootstrap - PullRequest
Новая
       44

Mapbox GL JS canvas не отображается должным образом в модале Bootstrap

0 голосов
/ 14 февраля 2019

Согласно руководству Mapbox GL JS Quickstart , реализовать карту на веб-сайте с помощью CDN от Mapbox не составит труда.К сожалению, это не тот случай, если карта расположена внутри модального Bootstrap, который не имеет предопределенной ширины, свойства, которое устанавливается только после открытия модального окна.

В результате загружается холст Mapboxс шириной по умолчанию 400px, которая может отличаться от ширины модальной зоны и создавать ужасные ощущения для пользователя.

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

Ниже приведен соответствующий код.

HTML-файл 

<div id='map'></div>

CSS-файл 

#map {
  height: 300px;
}

JS-файл 

mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
    container: 'map',
    center: [..., ...],
    zoom: 10,
    style: 'mapbox://styles/mapbox/streets-v11'
});

Я пытался загрузить Mapbox в модале Bootstrap 3.4.0, как я ранее мог это делать при использовании Google Maps или Bing Maps, но в обоих случаях встроенныйвнутри фрейма.Поэтому я ожидал, что Mapbox заполнит весь модал, как это сделали Google Maps и Bing Maps.

Вместо этого интерфейс Mapbox (левый нижний логотип и нижняя правая информационная кнопка) был правильно размещен внутри модальногограниц, но холст, содержащий карту, был неправильно расположен.

Наконец, установка предопределенной ширины для свойства CSS #map не является решением.Если для ширины задана фиксированная ширина в пикселях, она может отображаться некорректно для всех размеров окна, хотя добавление фиксированной ширины в процентах, скажем, 100%, не помогло.

1 Ответ

0 голосов
/ 14 февраля 2019

Подобная проблема уже была решена для Leaflet библиотеки JavaScript здесь и здесь .

Как оказалось, отсутствиепредопределенной ширины для модального листа Mapbox не имеет выбора, кроме как изначально загрузить ширину по умолчанию (в данном случае 400px).Поскольку открытие модального окна не вызывает событие, которое Mapbox может прослушивать, например изменение размера окна, Mapbox сохраняет свою ширину по умолчанию, независимо от размера, установленного для модального окна после его отображения.

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

Интересное событие Bootstrap здесь - это "seen.bs.modal" , который срабатывает после того, как модал был отображен пользователю, и CSS-переходы завершены.Это гарантирует, что ширина уже установлена ​​для модального значения.

Решение состоит в том, чтобы добавить следующий код после определения переменной 'map' в файле JS: 

$('#modalID').on('shown.bs.modal', function() {
    map.resize();
  });

Убедитесь, чтоизменить 'modalID' на тот же 'id', который использовался для идентификации соответствующего модала.

...