Merge pull request #71 from webberig/maplibre

Migrate to MapLibre GL JS
openmaptiles · Jun 24, 2021 · 4db4c8f · 4db4c8f
2 parents f4d722c + 4d05d4b
commit 4db4c8f
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 34 deletions.
diff --git a/_custom.scss b/_custom.scss
@@ -250,7 +250,7 @@ body.maps {
   position: relative;
   cursor: pointer;
   display: inline-block;
-  width: 100px;
+  width: 120px;
   height: 100px;
   color: $color-primary;
   float: left;

diff --git a/_data/categories.json b/_data/categories.json
@@ -7,7 +7,7 @@
   {
     "id": "website",
     "title": "Display Map",
-    "desc": "Display vector tiles in a web client using either MapboxGL, Leaflet, Tangram or OpenLayers."
+    "desc": "Display vector tiles in a web client using either MapLibre GL, Leaflet, Tangram or OpenLayers."
   },
   {
     "id": "host",

diff --git a/docs/style/mapbox-gl-style-spec.md b/docs/style/mapbox-gl-style-spec.md
@@ -9,18 +9,21 @@ description: Mapbox GL Style Specification
 keywords: Openlayers
 ---
 
-## Using OpenMapTiles with Mapbox GL
+## Styles
 
-To display maps with Mapbox GL you need
+Styles are written in a JSON format called the [Mapbox GL Style Spec](https://www.mapbox.com/mapbox-gl-style-spec/).
 
-1. Style: A JSON style specification which describes how your map looks like
-2. Data: Vector Tiles as data source for your style
+## Using OpenMapTiles with MapLibre GL
 
-OpenMapTiles provides both vector tiles you can download and ready-made styles to use together with them. Check out how to [display a map with Mapbox GL JS](/docs/website/mapbox-gl-js).
+MapBox GL also offers a Javascript library to display vector maps on a website. However, with the release of version 2.x
+it is no longer free to use. We recommend using the open-source fork [MapLibre GL](https://www.maplibre.org).
 
-## Styles
+To display maps with MapLibre GL you need:
 
-Styles are written in a JSON format called the [Mapbox GL Style Spec](https://www.mapbox.com/mapbox-gl-style-spec/).
+1. Style: A JSON style specification which describes how your map looks like
+2. Data: Vector Tiles as data source for your style
+
+OpenMapTiles provides both vector tiles you can download and ready-made styles to use together with them. Check out how to [display a map with MapLibre GL JS](/docs/website/maplibre-gl-js).
 
 
 ### Data Source

diff --git a/docs/website/mapbox-gl-js.md → docs/website/maplibre-gl-js.md b/docs/website/mapbox-gl-js.md → docs/website/maplibre-gl-js.md
@@ -1,18 +1,20 @@
 ---
 layout: docs
 category: website
-title: Mapbox GL JS
-description: Mapbox GL JS
+title: MapLibre GL JS
+description: MapLibre GL JS
 order: 1
 ---
 
-[Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/) is a web mapping library based on WebGL. Using Mapbox GL JS for serving OpenMapTiles tileset is the most common use case.
+[MapLibre GL JS](https://www.maplibre.org/) 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.
 
-<iframe src="/maps/mapboxgljs.html" frameborder="0" scrolling="0" width="100%" height="540px" style="margin-bottom:25px;"></iframe>
+Using MapLibre GL JS for serving OpenMapTiles tileset is the most common use case.
+
+<iframe src="/maps/maplibre-gl-js.html" frameborder="0" scrolling="0" width="100%" height="540px" style="margin-bottom:25px;"></iframe>
 
 ### Reference the Style
 
-Create an HTML page and include the Mapbox GL JS viewer. You need to point the `style` to an HTTP endpoint of your [Mapbox GL style specification JSON](/docs/style/mapbox-gl-style-spec).
+Create an HTML page and include the MapLibre GL JS viewer. You need to point the `style` to an HTTP endpoint of your [Mapbox GL style specification JSON](/docs/style/mapbox-gl-style-spec).
 
 ```html
 <!DOCTYPE html>
@@ -21,8 +23,8 @@ Create an HTML page and include the Mapbox GL JS viewer. You need to point the `
     <meta charset='utf-8' />
     <title>OpenMapTiles OSM Bright style</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
+    <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -31,7 +33,7 @@ Create an HTML page and include the Mapbox GL JS viewer. You need to point the `
 <body>
     <div id='map'></div>
     <script>
-        var map = new mapboxgl.Map({
+        var map = new maplibregl.Map({
             container: 'map',
             style: '{{ site.maps.domain }}/maps/bright/style.json?key=<key>',
             center: [8.5456, 47.3739],
@@ -57,4 +59,4 @@ All [OpenMapTiles styles](/styles/) can be referenced directly in a viewer.
 
 ### Fonts and Sprites
 
-Mapbox GL JS requires fonts being packaged as PBFs and symbols packaged as sprites. Check the [Mapbox GL style specification documentation](/docs/style/mapbox-gl-style-spec) for OpenMapTiles to create your own fonts and sprites packages.
+MapLibre GL JS requires fonts being packaged as PBFs and symbols packaged as sprites. Check the [Mapbox GL style specification documentation](/docs/style/mapbox-gl-style-spec) for OpenMapTiles to create your own fonts and sprites packages.
diff --git a/js/viewers.js b/js/viewers.js
@@ -3,19 +3,19 @@ var style = 'https://api.maptiler.com/maps/basic/style.json?key=' + api;
 var xyz = 'https://api.maptiler.com/maps/basic/{z}/{x}/{y}.png?key=' + api;
 var xyzpbf = 'https://api.maptiler.com/tiles/v3/%7Bz%7D/%7Bx%7D/%7By%7D.pbf?key=' + api;
 
-var mbgljsMap = new mapboxgl.Map({
+var mlgljsMap = new maplibregl.Map({
   attributionControl: false,
-  container: 'map-mbgljs',
+  container: 'map-mlgljs',
   style: style,
   zoom: 2
 });
-maps['mbgljs'] = {
+maps['mlgljs'] = {
   getPos: function() {
-    return [mbgljsMap.getCenter().lng, mbgljsMap.getCenter().lat, mbgljsMap.getZoom() + 1];
+    return [mlgljsMap.getCenter().lng, mlgljsMap.getCenter().lat, mlgljsMap.getZoom() + 1];
   },
   setPos: function(pos) {
-    mbgljsMap.setCenter([pos[0], pos[1]]);
-    mbgljsMap.setZoom(pos[2] - 1);
+    mlgljsMap.setCenter([pos[0], pos[1]]);
+    mlgljsMap.setZoom(pos[2] - 1);
   }
 };
 
@@ -71,7 +71,7 @@ maps['ol'] = {
 };
 
 
-var activeId = 'mbgljs';
+var activeId = 'mlgljs';
 function switchMap(id) {
   var oldPos = maps[activeId].getPos();
   var active = document.querySelector('.map.active');

diff --git a/maps/mapboxgljs.html → maps/maplibre-gl-js.html b/maps/mapboxgljs.html → maps/maplibre-gl-js.html
@@ -1,15 +1,15 @@
 ---
 layout: none
-permalink: /maps/mapboxgljs.html
+permalink: /maps/maplibre-gl-js.html
 ---
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset='utf-8' />
     <title>OpenMapTiles OSM Bright style</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css' rel='stylesheet' />
+    <script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
     <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -18,7 +18,7 @@
 <body>
     <div id='map'></div>
     <script>
-        var map = new mapboxgl.Map({
+        var map = new maplibregl.Map({
             container: 'map',
             style: '{{ site.maps.domain }}/maps/bright/style.json?key={{ site.maps.key }}',
             center: [8.5456, 47.3739],

diff --git a/viewers.html b/viewers.html
@@ -8,8 +8,8 @@
 
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />
 
-<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css" />
-<script src="https://api.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js"></script>
+<script src="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.js"></script>
+<link href="https://unpkg.com/maplibre-gl@1.14.0-rc.1/dist/maplibre-gl.css" rel="stylesheet" />
 
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
 <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
@@ -23,14 +23,14 @@
 <script src="https://mapzen.com/js/mapzen.min.js"></script>
 -->
 
-<div class="viewers map active" id="map-mbgljs"></div>
+<div class="viewers map active" id="map-mlgljs"></div>
 <div class="viewers map" id="map-leaflet"></div>
 <div class="viewers map" id="map-ol"></div>
 <!-- <div class="viewers map" id="map-tangram"></div> -->
 
 <div class="viewers map-switchers"><!--
---><div class="active map-switch" id="map-switch-mbgljs" onclick="javascript:switchMap('mbgljs')">
-    <span>MB GL JS</span>
+--><div class="active map-switch" id="map-switch-mlgljs" onclick="javascript:switchMap('mlgljs')">
+    <span>MapLibre GL JS</span>
   </div><!--
   --><div class="map-switch" id="map-switch-leaflet" onclick="javascript:switchMap('leaflet')">
     <span>Leaflet</span>