Add maplibre extensions

public/assets/maplibre/maplibre-custom-controls.css

@@ -0,0 +1,6 @@
+.maplibregl-ctrl-split-view {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 5px 5px;      
+}

public/assets/maplibre/maplibre-custom-controls.js

@@ -0,0 +1,76 @@
+/**
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to you under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ **/
+
+/**
+ * Maplibre control to toggle the split view with another map.
+ * 
+ * Both maps must be in a container of display: flex. The control will toggle the flex property of
+ * the map container between 0 and 1.
+ * @see https://maplibre.org/maplibre-gl-js-docs/api/markers/#icontrol
+ */
+class MaplibreMapSplitViewToggle {
+    constructor({ splitMap, splitMapContainerId }) {
+        this._splitMap = splitMap;
+        this._splitMapContainerId = splitMapContainerId;
+    }
+    /**
+     * Add the control to the map.
+     * @param {maplibre.Map} map the map
+     * @returns {HTMLDivElement} the control
+     */
+    onAdd(map) {
+        this._map = map;
+        this._container = document.createElement('div');
+        this._container.className = 'maplibregl-ctrl maplibregl-ctrl-group';
+        // Add button to the container
+        this._button = document.createElement('button');
+        this._button.type = 'button';
+        this._button.className = 'maplibregl-ctrl-icon maplibregl-ctrl-split-view';
+        // Toggle the split view
+        this._button.onclick = () => {
+            const splitMapContainer = document.getElementById(this._splitMapContainerId);
+            const state = splitMapContainer.getAttribute('data-state');
+            if (state === 'visible') {
+                // Hide the osm map
+                splitMapContainer.setAttribute('data-state', 'hidden');
+                splitMapContainer.style.flex = '0';
+                this._map.resize();
+                this._splitMap.resize();
+                this._button.style.backgroundColor = '';
+            } else {
+                // Show the osm map
+                splitMapContainer.setAttribute('data-state', 'visible');
+                splitMapContainer.style.flex = '1';
+                this._map.resize();
+                this._splitMap.resize();
+                this._button.style.backgroundColor = 'rgb(0 0 0/20%)';
+            }
+        };
+        this._container.appendChild(this._button);
+        return this._container;
+    }
+
+    /**
+     * Remove the control from the map.
+     */
+    onRemove() {
+        this._container.parentNode.removeChild(this._container);
+        this._button = undefined;
+        this._map = undefined;
+    }
+}
+

public/assets/maplibre/maplibre-gl-framerate.js

@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2019, Mapbox
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ *
+ * Source:
+ * https://github.com/mapbox/mapbox-gl-framerate
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+        typeof define === 'function' && define.amd ? define(factory) :
+            (global.FrameRateControl = factory());
+}(this, (function () { 'use strict';
+
+    function _classCallCheck(instance, Constructor) {
+        if (!(instance instanceof Constructor)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+
+    function _defineProperty(obj, key, value) {
+        if (key in obj) {
+            Object.defineProperty(obj, key, {
+                value: value,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            obj[key] = value;
+        }
+
+        return obj;
+    }
+
+    function _objectSpread(target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i] != null ? arguments[i] : {};
+            var ownKeys = Object.keys(source);
+
+            if (typeof Object.getOwnPropertySymbols === 'function') {
+                ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+                    return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+                }));
+            }
+
+            ownKeys.forEach(function (key) {
+                _defineProperty(target, key, source[key]);
+            });
+        }
+
+        return target;
+    }
+
+    var FrameRateControl = function FrameRateControl(options) {
+        var _this = this;
+
+        _classCallCheck(this, FrameRateControl);
+
+        _defineProperty(this, "onAdd", function (map) {
+            _this.map = map;
+            var dpr = window.devicePixelRatio;
+            var _this$options = _this.options,
+                width = _this$options.width,
+                graphWidth = _this$options.graphWidth,
+                graphHeight = _this$options.graphHeight,
+                color = _this$options.color,
+                background = _this$options.background,
+                font = _this$options.font;
+            var el = _this.container = document.createElement('div');
+            el.className = 'maplibregl-ctrl maplibregl-ctrl-fps';
+            el.style.backgroundColor = background;
+            el.style.borderRadius = '6px';
+            _this.readOutput = document.createElement('div');
+            _this.readOutput.style.color = color;
+            _this.readOutput.style.fontFamily = font;
+            _this.readOutput.style.padding = '0 5px 5px';
+            _this.readOutput.style.fontSize = '9px';
+            _this.readOutput.style.fontWeight = 'bold';
+            _this.readOutput.textContent = 'Waiting…';
+            _this.canvas = document.createElement('canvas');
+            _this.canvas.className = 'maplibregl-ctrl-canvas';
+            _this.canvas.width = width;
+            _this.canvas.height = graphHeight;
+            _this.canvas.style.cssText = "width: ".concat(width / dpr, "px; height: ").concat(graphHeight / dpr, "px;");
+            el.appendChild(_this.readOutput);
+            el.appendChild(_this.canvas);
+
+            _this.map.on('movestart', _this.onMoveStart);
+
+            _this.map.on('moveend', _this.onMoveEnd);
+
+            return _this.container;
+        });
+
+        _defineProperty(this, "onMoveStart", function () {
+            _this.frames = 0;
+            _this.time = performance.now();
+
+            _this.map.on('render', _this.onRender);
+        });
+
+        _defineProperty(this, "onMoveEnd", function () {
+            var now = performance.now();
+
+            _this.updateGraph(_this.getFPS(now));
+
+            _this.frames = 0;
+            _this.time = null;
+
+            _this.map.off('render', _this.onRender);
+        });
+
+        _defineProperty(this, "onRender", function () {
+            _this.frames++;
+            var now = performance.now();
+
+            if (now >= _this.time + 1e3) {
+                _this.updateGraph(_this.getFPS(now));
+
+                _this.frames = 0;
+                _this.time = now;
+            }
+        });
+
+        _defineProperty(this, "getFPS", function (now) {
+            _this.totalTime += now - _this.time, _this.totalFrames += _this.frames;
+            return Math.round(1e3 * _this.frames / (now - _this.time)) || 0;
+        });
+
+        _defineProperty(this, "updateGraph", function (fpsNow) {
+            var _this$options2 = _this.options,
+                barWidth = _this$options2.barWidth,
+                graphRight = _this$options2.graphRight,
+                graphTop = _this$options2.graphTop,
+                graphWidth = _this$options2.graphWidth,
+                graphHeight = _this$options2.graphHeight,
+                background = _this$options2.background,
+                color = _this$options2.color;
+
+            var context = _this.canvas.getContext('2d');
+
+            var fps = Math.round(1e3 * _this.totalFrames / _this.totalTime) || 0;
+            var rect = (barWidth);
+            context.fillStyle = background;
+            context.globalAlpha = 1;
+            context.fillRect(0, 0, graphWidth, graphTop);
+            context.fillStyle = color;
+            _this.readOutput.textContent = "".concat(fpsNow, " FPS (").concat(fps, " Avg)");
+            context.drawImage(_this.canvas, graphRight + rect, graphTop, graphWidth - rect, graphHeight, graphRight, graphTop, graphWidth - rect, graphHeight);
+            context.fillRect(graphRight + graphWidth - rect, graphTop, rect, graphHeight);
+            context.fillStyle = background;
+            context.globalAlpha = 0.75;
+            context.fillRect(graphRight + graphWidth - rect, graphTop, rect, (1 - fpsNow / 100) * graphHeight);
+        });
+
+        _defineProperty(this, "onRemove", function () {
+            _this.map.off('render', _this.onRender);
+
+            _this.map.off('movestart', _this.onMoveStart);
+
+            _this.map.off('moveend', _this.onMoveEnd);
+
+            _this.container.parentNode.removeChild(_this.container);
+
+            _this.map = null;
+            return _this;
+        });
+
+        var _dpr = window.devicePixelRatio;
+        var defaultOptions = {
+            background: 'rgba(0,0,0,0.9)',
+            barWidth: 4 * _dpr,
+            color: '#7cf859',
+            font: 'Monaco, Consolas, Courier, monospace',
+            graphHeight: 60 * _dpr,
+            graphWidth: 90 * _dpr,
+            graphTop: 0,
+            graphRight: 5 * _dpr,
+            width: 100 * _dpr
+        };
+        this.frames = 0;
+        this.totalTime = 0;
+        this.totalFrames = 0;
+        this.options = _objectSpread({}, options, defaultOptions);
+    };
+
+    if (window.maplibregl) {
+        maplibregl.FrameRateControl = FrameRateControl;
+    }
+
+    return FrameRateControl;
+
+})));

public/assets/maplibre/maplibre-gl-inspect.css

@@ -0,0 +1,74 @@
+/**
+ * BSD 3-Clause License
+ *
+ * Copyright (c) 2017, Lukas Martinelli
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * * Redistributions of source code must retain the above copyright notice, this
+ *   list of conditions and the following disclaimer.
+ *
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ *   this list of conditions and the following disclaimer in the documentation
+ *   and/or other materials provided with the distribution.
+ *
+ * * Neither the name of the copyright holder nor the names of its
+ *   contributors may be used to endorse or promote products derived from
+ *   this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Source:
+ * https://github.com/acalcutt/maplibre-gl-inspect
+ */
+
+.maplibregl-inspect_popup {
+  color: #333;
+  display: table;
+}
+
+.maplibregl-inspect_feature:not(:last-child) {
+  border-bottom: 1px solid #ccc;
+}
+
+.maplibregl-inspect_layer:before {
+  content: '#';
+}
+
+.maplibregl-inspect_layer {
+  display: block;
+  font-weight: bold;
+}
+
+.maplibregl-inspect_property {
+  display: table-row;
+}
+
+.maplibregl-inspect_property-value {
+  display: table-cell;
+
+}
+
+.maplibregl-inspect_property-name {
+  display: table-cell;
+  padding-right: 10px;
+}
+
+.maplibregl-ctrl-inspect {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' preserveAspectRatio='xMidYMid meet' viewBox='-10 -10 60 60'%3E%3Cg%3E%3Cpath d='m15 21.6q0-2 1.5-3.5t3.5-1.5 3.5 1.5 1.5 3.5-1.5 3.6-3.5 1.4-3.5-1.4-1.5-3.6z m18.4 11.1l-6.4-6.5q1.4-2.1 1.4-4.6 0-3.4-2.5-5.8t-5.9-2.4-5.9 2.4-2.5 5.8 2.5 5.9 5.9 2.5q2.4 0 4.6-1.4l7.4 7.4q-0.9 0.6-2 0.6h-20q-1.3 0-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3 1-2.3t2.3-0.9h13.4l10 10v19.3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}
+
+.maplibregl-ctrl-map {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333333' viewBox='-10 -10 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg%3E%3Cpath d='m25 31.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z m9.140000000000008-26.640000000000004q0.8599999999999923 0 0.8599999999999923 0.8600000000000003v25.156666666666666q0 0.625-0.625 0.783333333333335l-9.375 3.1999999999999993-10-3.5133333333333354-8.906666666666668 3.4383333333333326-0.2333333333333334 0.07833333333333314q-0.8616666666666664 0-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625 0.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334 10 3.5133333333333336 8.905000000000001-3.4383333333333344z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+}