This is an automated email from the ASF dual-hosted git repository.
bchapuis pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-baremaps-site.git
The following commit(s) were added to refs/heads/main by this push:
new 3068793 Add maplibre extensions
3068793 is described below
commit 30687930afe7a9b6391e62cf78d39a4b04701772
Author: Bertil Chapuis <[email protected]>
AuthorDate: Wed Feb 28 00:06:50 2024 +0100
Add maplibre extensions
---
.../assets/maplibre/maplibre-custom-controls.css | 6 +
public/assets/maplibre/maplibre-custom-controls.js | 76 ++++++++
public/assets/maplibre/maplibre-gl-framerate.js | 204 +++++++++++++++++++++
public/assets/maplibre/maplibre-gl-inspect.css | 74 ++++++++
public/assets/maplibre/maplibre-gl-inspect.js | 35 ++++
.../maplibre/maplibre-gl-tile-boundaries.css | 30 +++
.../assets/maplibre/maplibre-gl-tile-boundaries.js | 94 ++++++++++
7 files changed, 519 insertions(+)
diff --git a/public/assets/maplibre/maplibre-custom-controls.css
b/public/assets/maplibre/maplibre-custom-controls.css
new file mode 100644
index 0000000..f43e749
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/public/assets/maplibre/maplibre-custom-controls.js
b/public/assets/maplibre/maplibre-custom-controls.js
new file mode 100644
index 0000000..0b032d0
--- /dev/null
+++ b/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;
+ }
+}
+
\ No newline at end of file
diff --git a/public/assets/maplibre/maplibre-gl-framerate.js
b/public/assets/maplibre/maplibre-gl-framerate.js
new file mode 100644
index 0000000..5df1302
--- /dev/null
+++ b/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;
+
+})));
\ No newline at end of file
diff --git a/public/assets/maplibre/maplibre-gl-inspect.css
b/public/assets/maplibre/maplibre-gl-inspect.css
new file mode 100644
index 0000000..ac30063
--- /dev/null
+++ b/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.43833333 [...]
+}
diff --git a/public/assets/maplibre/maplibre-gl-inspect.js
b/public/assets/maplibre/maplibre-gl-inspect.js
new file mode 100644
index 0000000..a2ef598
--- /dev/null
+++ b/public/assets/maplibre/maplibre-gl-inspect.js
@@ -0,0 +1,35 @@
+/**
+ * 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
+ */
+!function(t){"object"==typeof exports&&"undefined"!=typeof
module?module.exports=t():"function"==typeof
define&&define.amd?define([],t):("undefined"!=typeof
window?window:"undefined"!=typeof global?global:"undefined"!=typeof
self?self:this).MaplibreInspect=t()}(function(){return function
r(o,i,s){function a(e,t){if(!i[e]){if(!o[e]){var n="function"==typeof
require&&require;if(!t&&n)return n(e,!0);if(u)return u(e,!0);throw(n=new
Error("Cannot find module '"+e+"'")).code="MODULE_NOT_FOUND" [...]
\ No newline at end of file
diff --git a/public/assets/maplibre/maplibre-gl-tile-boundaries.css
b/public/assets/maplibre/maplibre-gl-tile-boundaries.css
new file mode 100644
index 0000000..72324ef
--- /dev/null
+++ b/public/assets/maplibre/maplibre-gl-tile-boundaries.css
@@ -0,0 +1,30 @@
+/**
+ * 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- [...]
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ background-position: 5px 5px;
+}
+
+.maplibregl-ctrl-show-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='M384 96V224H256V96H384zm0 192V416H256V288H384zM192
224H64V96H192V224zM64 288H192V416H64V288zM64 32C28.7 32 0 60.7 0 96V416c0 35.3
28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z' [...]
+ background-repeat: no-repeat;
+ background-size: 20px 20px;
+ background-position: 5px 5px;
+}
diff --git a/public/assets/maplibre/maplibre-gl-tile-boundaries.js
b/public/assets/maplibre/maplibre-gl-tile-boundaries.js
new file mode 100644
index 0000000..75991dd
--- /dev/null
+++ b/public/assets/maplibre/maplibre-gl-tile-boundaries.js
@@ -0,0 +1,94 @@
+/**
+ * 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';
+ container.appendChild(child);
+ if (!show) {
+ container.style.display = 'none';
+ }
+ return container;
+}
+
+function button() {
+ var btn = document.createElement('button');
+ btn.className = 'maplibregl-ctrl-icon maplibregl-ctrl-boundaries';
+ btn.type = 'button';
+ btn['aria-label'] = 'Inspect';
+ return btn;
+}
+
+function BoundariesButton(options) {
+ options = Object.assign({
+ show: true,
+ onToggle: function () {},
+ }, options);
+ this._btn = button();
+ this._btn.onclick = options.onToggle;
+ this.elem = container(this._btn, options.show);
+}
+
+BoundariesButton.prototype.setShowTileBoundariesIcon = function () {
+ this._btn.className = 'maplibregl-ctrl-icon
maplibregl-ctrl-show-boundaries';
+};
+
+BoundariesButton.prototype.setHideTileBoundariesIcon = function () {
+ this._btn.className = 'maplibregl-ctrl-icon
maplibregl-ctrl-hide-boundaries';
+};
+
+function MaplibreTileBoundaries(options) {
+ if (!(this instanceof MaplibreTileBoundaries)) {
+ throw new Error('MaplibreTileBoundaries needs to be called with the
new keyword');
+ }
+
+ this.options = Object.assign({
+ showTileBoundariesButton: true,
+ tileBoundaries: false,
+ }, options);
+
+ this._tileBoundaries = this.options.tileBoundaries;
+ this._toggle = new BoundariesButton({
+ show: this.options.showTileBoundariesButton,
+ onToggle: this.toggleTileBoundaries.bind(this)
+ });
+}
+
+MaplibreTileBoundaries.prototype.toggleTileBoundaries = function () {
+ this._tileBoundaries = !this._tileBoundaries;
+ this.render();
+};
+
+MaplibreTileBoundaries.prototype.render = function () {
+ if (this._tileBoundaries) {
+ this._map.showTileBoundaries = true;
+ this._toggle.setHideTileBoundariesIcon();
+ } else {
+ this._map.showTileBoundaries = false;
+ this._toggle.setShowTileBoundariesIcon();
+ }
+};
+
+MaplibreTileBoundaries.prototype.onAdd = function (map) {
+ this._map = map;
+ this.render();
+ return this._toggle.elem;
+};
+
+MaplibreTileBoundaries.prototype.onRemove = function () {
+ this._map = undefined;
+};
