Развитие веб-картографии долгое время основывалось на растровых тайлах. Такие карты представляли собой заранее подготовленные изображения, которые загружались браузером по мере перемещения пользователя по карте. Подобный подход активно использовался многими картографическими платформами, включая ранние версии сервисов Google Maps, OpenStreetMap и многочисленные коммерческие решения.
Растровая модель обладала рядом ограничений:
К началу 2010-х годов развитие браузерных технологий привело к широкому распространению поддержки WebGL — стандарта аппаратного ускорения графики в веб-приложениях. Это создало предпосылки для перехода от растровых карт к векторным данным и рендерингу непосредственно на стороне клиента.
Именно в этих условиях появилась библиотека Mapbox GL JS.
Компания Mapbox была основана в 2010 году как поставщик инструментов для создания и кастомизации цифровых карт. В отличие от многих конкурентов, компания сделала ставку на открытые данные OpenStreetMap и современные методы визуализации геоданных.
Одной из ключевых целей Mapbox стало создание платформы, позволяющей:
Для реализации этих задач потребовался новый клиентский движок, способный использовать возможности графических процессоров через WebGL.
До появления Mapbox GL большая часть картографических JavaScript-библиотек работала через DOM, SVG или Canvas. Эти технологии подходили для отображения небольшого количества объектов, однако начинали испытывать серьёзные проблемы производительности при работе с крупными наборами геоданных.
Инженеры Mapbox начали разработку новой технологии, получившей название Mapbox GL (Graphics Library).
Основные идеи нового подхода:
Вместо загрузки готовых изображений браузер получал геометрические данные объектов — дороги, здания, водоёмы, административные границы. Отрисовка происходила локально на устройстве пользователя.
Такой подход существенно изменил принципы построения веб-карт.
Первые публичные версии Mapbox GL JS появились в середине 2010-х годов. Библиотека стала JavaScript-реализацией движка Mapbox GL и позволила использовать преимущества WebGL непосредственно в браузере.
На фоне существующих решений библиотека предлагала несколько инновационных возможностей:
Карта загружала не изображения, а компактные наборы геометрических данных.
Преимущества:
Рендеринг выполнялся через видеокарту.
Это обеспечило:
Внешний вид карты описывался декларативным JSON-документом.
Например, отдельно определялись:
Подобная архитектура значительно упростила создание собственных дизайнов карт.
Одновременно с развитием библиотеки формировалась спецификация оформления карт — Mapbox Style Specification.
Она стала одним из важнейших компонентов всей экосистемы.
Спецификация определяла:
Появление единого формата позволило использовать один и тот же стиль:
Со временем спецификация стала фактическим стандартом для многих проектов, работающих с векторными картами.
Одним из наиболее заметных этапов развития Mapbox GL JS стало внедрение поддержки трёхмерных объектов.
Появились возможности отображения:
Для веб-карт это стало серьёзным технологическим шагом вперёд.
Пример концепции отображения зданий:
map.addLayer({
id: 'buildings',
type: 'fill-extrusion',
source: 'composite',
'source-layer': 'building',
paint: {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': ['get', 'height']
}
});Подобные возможности ранее требовали специализированных GIS-систем или отдельных 3D-движков.
Одним из наиболее значимых нововведений стала система Expressions.
До её появления настройка карт часто требовала программной обработки данных на стороне JavaScript.
Выражения позволили переносить значительную часть логики непосредственно в стиль карты.
С их помощью стало возможно:
Пример:
[
'match',
['get', 'type'],
'park', '#4CAF50',
'water', '#2196F3',
'#999999'
]Появление Expressions существенно расширило возможности визуальной аналитики.
По мере роста популярности библиотеки вокруг неё сформировалась большая экосистема инструментов.
В неё вошли:
Графическая среда создания картографических стилей.
Позволяла:
Инструменты подготовки и публикации векторных наборов данных.
Использовались для:
Технологии Mapbox GL были перенесены на:
Это обеспечило единый подход к разработке картографических приложений на разных устройствах.
Вторая половина 2010-х годов стала периодом активного распространения Mapbox GL JS.
Причинами популярности стали:
WebGL позволял отображать десятки тысяч объектов без серьёзного падения скорости работы интерфейса.
Разработчики получили практически полный контроль над внешним видом карты.
Минимальный пример подключения выглядел следующим образом:
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [37.6176, 55.7558],
zoom: 10
});Библиотека активно использовалась вместе с:
Одним из наиболее важных событий в истории проекта стало изменение лицензионной политики.
До версии 1.x библиотека распространялась под открытой лицензией BSD. Это обеспечивало широкое участие сообщества и возможность свободного использования исходного кода.
В конце 2020 года Mapbox объявила о переходе на собственную коммерческую лицензию для новых версий Mapbox GL JS.
Последствия оказались значительными:
Наиболее известным результатом стал проект MapLibre GL JS.
После изменения лицензии группа компаний и независимых разработчиков создала проект MapLibre.
Его задачами стали:
MapLibre быстро превратился в самостоятельную платформу и сегодня рассматривается как одно из ключевых решений в области открытой веб-картографии.
Несмотря на общее происхождение, развитие Mapbox GL JS и MapLibre GL JS постепенно пошло разными путями.
Современные версии Mapbox GL JS значительно отличаются от первых релизов.
Библиотека поддерживает:
Появились инструменты для:
Mapbox GL JS продолжает оставаться одной из наиболее технологически развитых библиотек для создания интерактивных карт в браузере, оказав значительное влияние на развитие всей отрасли веб-картографии и сформировав многие современные подходы к работе с векторными геоданными, стилями карт и аппаратно ускоренной визуализацией пространственной информации.