Display framerate in dev mode and missing license headers

baremaps-server/src/main/resources/assets/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;
+
+})));

baremaps-server/src/main/resources/assets/maplibre-gl-inspect.css

@@ -1,3 +1,38 @@
+/**
+ * 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;

baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.css

@@ -1,3 +1,20 @@
+/**
+ * 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.
+ */
+
 .maplibregl-ctrl-hide-boundaries {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zm96 64c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm0-384c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zM320 480c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm0-448c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zm0 256c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM224 416c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zm0-320c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zM416 480c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm0-384c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM32 32C14.3 32 0 46.3 0 64S14.3 96 32 96s32-14.3 32-32s-14.3-32-32-32zM416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zM224 384c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm192-64c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zM32 384c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zM416 128c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zM32 192c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32zm192-64c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
@@ -11,4 +28,3 @@
     background-size: 20px 20px;
     background-position: 5px 5px;
 }
-

baremaps-server/src/main/resources/assets/maplibre-gl-tile-boundaries.js

@@ -1,3 +1,20 @@
+/**
+ * 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.
+ */
+
 function container(child, show) {
     var container = document.createElement('div');
     container.className = 'maplibregl-ctrl maplibregl-ctrl-group';

baremaps-server/src/main/resources/assets/viewer.html

@@ -21,6 +21,7 @@
   <script src='/maplibre-gl-inspect.js'></script>
   <script src='/maplibre-gl-tile-boundaries.js'></script>
   <script src='/maplibre-custom-controls.js'></script>
+  <script src='/maplibre-gl-framerate.js'></script>
   <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
   <link href='/maplibre-gl-inspect.css' rel='stylesheet' />
   <link href='/maplibre-gl-tile-boundaries.css' rel='stylesheet' />
@@ -109,7 +110,11 @@
     bearing: map.getBearing(),
     hash: false,
     interactive: false,
-  })
+  });
+
+  // Add the framerate control to the map
+  const fps = new maplibregl.FrameRateControl();
+  map.addControl(fps);
 
   // Add the navigation control to the map
   map.addControl(new maplibregl.NavigationControl());