OpenMapTiles
GitHub logo GitHub

MapLibre GL JS

MapLibre GL JS is a community-led fork derived from mapbox-gl-js prior to their switch to a non-OSS license. It’s a web mapping library based on WebGL.

Using MapLibre GL JS for serving an OpenMapTiles tileset is the most common use case.

Reference the Style

Create an HTML page and include the MapLibre GL JS viewer. You need to point the style to an HTTP endpoint of your GL style specification JSON.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>OpenMapTiles with MapLibre GL JS</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/openstreetmap/style.json?key=insert_your_key_here',
            center: [8.5456, 47.3739],
            zoom: 11
        });
    </script>
</body>
</html>

Use the OpenMapTiles styles

All OpenMapTiles styles can be referenced directly in a viewer.

  • OSM Bright: https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json
  • Positron: https://openmaptiles.github.io/positron-gl-style/style-cdn.json
  • Dark Matter: https://openmaptiles.github.io/dark-matter-gl-style/style-cdn.json
  • MapTiler Basic: https://openmaptiles.github.io/maptiler-basic-gl-style/style-cdn.json

Fonts and Sprites

MapLibre GL JS requires fonts to be packaged as PBFs and symbols to be packaged as sprites. Check the GL style specification documentation for OpenMapTiles to create your own font and sprite packages.