WebGL1 from OpenGL2 legacy renderer

Last updated: 6.9.1 / July 16th 2025

Run this Demo - Qt 6.8.0

Run this Demo - Qt 6.9.1

Binaries

Prerequisites

• Clone the maplibre-native-qt repo

• Install Qt 6.9.1 with the online installer (not i.e. homebrew), and make sure to select the WebAssembly multi-threaded.

• Install Emscripten through the "recommended" path here (again, don't use homebrew). It's important that it's version 3.1.70 for Qt 6.9.1

./emsdk install 3.1.70
./emsdk activate 3.1.70
source ../emsdk/emsdk_env.sh  # in general, if something Emscripten related can't be found, run this again

Make sure to add both emscripten and qt to your path. My .zshrc i.e. looks like this:

export PATH=/Users/admin/Qt/6.9.1/wasm_multithread/bin:$PATH
export PATH="/Users/admin/repos/emsdk/upstream/emscripten:$PATH"

Build QMapLibre

Make the build

Follow the "How to build" here, except add a -DMLN_QT_WITH_LOCATION=OFF flag.

Effectively you want to make a folder, and from within it run:

mkdir ./qmaplibre-build-dir
cd ./qmaplibre-build-dir
qt-cmake ../ -GNinja \
  -DCMAKE_C_COMPILER_LAUNCHER="ccache" \
  -DCMAKE_CXX_COMPILER_LAUNCHER="ccache" \
  -DCMAKE_INSTALL_PREFIX="../qmaplibre-install-dir" -DMLN_QT_WITH_LOCATION=OFF

ninja
ninja install

Make and run the Widget example

Create a new folder in maplibre-native-qt, and from within it like following. For debugging use -DCMAKE_BUILD_TYPE="RelWithDebInfo"

mkdir ./widgets-build-dir
cd ./widgets-build-dir
qt-cmake ../examples/widgets \
-G Ninja \
-DCMAKE_BUILD_TYPE="Release" \
-DCMAKE_C_COMPILER_LAUNCHER="ccache" \
-DCMAKE_CXX_COMPILER_LAUNCHER="ccache" \
-DCMAKE_EXE_LINKER_FLAGS="-s EXPORT_NAME=Something" \
-DQMapLibre_DIR=/Users/admin/repos/maplibre-native-qt/qmaplibre-install-dir/lib/cmake/QMapLibre \
-DCMAKE_CXX_FLAGS="-Os"

ninja
emrun --browser=chrome QMapLibreExampleWidgets.html

Result in browser: