Examples

The following examples are based on the official examples in MapLibre Docs. They are defined in the examples directory of the repository and automatically bundeled in the docs.

Add a raster tile source 🌐 🔗

Add a third-party raster source to the map.

Add a WMS source 🌐 🔗

Add an external Web Map Service raster layer to the map.

Check if WebGL is supported 🌐 🔗

Check for WebGL browser support.

Display a globe with an atmosphere 🌐 🔗

Display a globe with an atmosphere.

Display a map 🌐 🔗

Initialize a map with Yew and the unofficial MapLibre GL JS Rust bindings.

Display a map with HTMLElement 🌐 🔗

Initialize a map with Yew and the unofficial MapLibre GL JS Rust bindings by passing an HTMLElement reference.

Display a map with MLT 🌐 🔗

Initialize a map in an HTML element with MapLibre GL JS. This example is using a style that uses MLT (MapLibre Tiles). The example is very similar to the regular one except the tiles are in a different encoding.

Display a satellite map 🌐 🔗

Display a satellite raster baselayer.

Display a non-interactive map 🌐 🔗

Create a map without interactivity.

Set pitch and bearing 🌐 🔗

Initialize a map with pitch and bearing camera options.

Style labels with local fonts 🌐 🔗

Apply local fonts to your style’s text labels. This option is suitable if you don’t need every user to see exactly the same font, or if you want to avoid relying on a third-party content delivery network (CDN). For maximum compatibility, the text-font property should include fonts commonly found on multiple platforms.

Style labels with Web fonts 🌐 🔗

Apply Web fonts to your style’s text labels. Unlike signed distance field (SDF) glyph sets, Web fonts are available from a variety of providers, or your can make your own using popular tools. This option is suitable for fonts that are only available through a third-party content delivery network (CDN) for technical or legal reasons, as well as fonts that are incompatible with SDF, such as variable fonts. For compatibility with Android and iOS applications, specify equivalent fonts in the style’s font-faces property.