[1.14.1] Example for support custom tiles sources

docs/pages/demotiles

@@ -0,0 +1 @@
+../../../demotiles

docs/pages/example/custom-map.html

@@ -0,0 +1,28 @@
+<div id="map"></div>
+<script>
+    maplibregl.addProtocol('custom', function (params, callback) {
+        fetch('../../' + params.url.split('://')[1])
+            .then(function (t) {
+                if (t.status === 200) {
+                    t.arrayBuffer().then(function (arr) {
+                        callback(null, arr, null, null);
+                    });
+                } else {
+                    callback(new Error('Tile fetch error: ' + t.statusText));
+                }
+            })
+            ['catch'](function (e) {
+                callback(new Error(e));
+            });
+        return {
+            cancel: function cancel() {}
+        };
+    });
+
+    var map = new maplibregl.Map({
+        container: 'map', // container id
+        style: '../../demotiles/custom_style.json', // style URL
+        center: [0, 0], // starting position [lng, lat]
+        zoom: 1 // starting zoom
+    });
+</script>

docs/pages/example/custom-map.md

@@ -0,0 +1,91 @@
+---
+title: Display a custom map
+description: Initialize a custom map in an HTML element with MapLibre GL JS.
+topics:
+  - Getting started
+  - Styles
+thumbnail: custom-map
+contentType: example
+layout: example
+hideFeedback: true
+language:
+- JavaScript
+products:
+- Maplibre GL JS
+prependJs:
+- "import Example from '../../components/example';"
+- "import html from './custom-map.html';"
+---
+
+Initialize a custom map in an HTML element with MapLibre GL JS.
+
+This example assumes that you have saved the [Demotiles](https://github.com/maplibre/demotiles) offline in the directory `../../` relative to your `html` file.
+
+{{ <Example html={html} {...this.props} /> }}
+
+[tiles/tiles.json](https://github.com/maplibre/demotiles/blob/gh-pages/tiles/tiles.json)
+
+```
+{
+    "tilejson": "2.0.0",
+    "name": "maplibre",
+    "type": "baselayer",
+    "scale": "1.000000",
+    "bounds": [
+        -180,
+        -85.051129,
+        180,
+        85.05112900000002
+    ],
+    ...
+    "extent": [
+        -20037508.342789244,
+        -20037508.6269291,
+        20037508.342789244,
+        20037508.626929108
+    ],
+    "center": [
+        0,
+        2.5444437451708134e-14,
+        1
+    ],
+    "tiles": [
+        "custom://demotiles/tiles/{z}/{x}/{y}.pbf"
+    ]
+}
+```
+
+[style.json](https://github.com/maplibre/demotiles/blob/gh-pages/style.json)
+```
+{
+    "id": "43f36e14-e3f5-43c1-84c0-50a9c80dc5c7",
+    "name": "MapLibre",
+    "zoom": 0.8619833357855968,
+    "pitch": 0,
+    "center": [
+        17.65431710431244,
+        32.954120326746775
+    ],
+    "glyphs": "../../demotiles/font/{fontstack}/{range}.pbf",
+    "layers": [
+        {
+          ...
+        },
+
+    ...
+    "bearing": 0,
+    "sources": {
+        "maplibre": {
+            "url": "../../demotiles/tiles/tiles.json",
+            "type": "vector"
+        }
+    },
+    "version": 8,
+    "metadata": {
+        "maptiler:copyright": "This style was generated on MapTiler Cloud. Usage outside of MapTiler Cloud or MapTiler Server requires valid MapTiler Data package: https://www.maptiler.com/data/ -- please contact us.",
+        "openmaptiles:version": "3.x"
+    }
+}
+```
+
+For more information, see the [PR](https://github.com/maplibre/maplibre-gl-js/pull/30) that introduced this feature.