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.git
The following commit(s) were added to refs/heads/main by this push:
new 41f57fc1 Improve raster split view for dev (#637)
41f57fc1 is described below
commit 41f57fc17d6f6394e82bb63a84d782ca7488cb79
Author: Leonard <[email protected]>
AuthorDate: Thu Apr 27 19:46:36 2023 +0200
Improve raster split view for dev (#637)
* Remove comment fullstops for consistency
* Reorder for consistency
* Move split control to external file
* Rename to more precise name
---
.../resources/assets/maplibre-custom-controls.css | 6 ++
.../resources/assets/maplibre-custom-controls.js | 71 +++++++++++++++++++
.../src/main/resources/assets/server.html | 8 +--
.../src/main/resources/assets/viewer.html | 79 ++++++----------------
4 files changed, 100 insertions(+), 64 deletions(-)
diff --git
a/baremaps-server/src/main/resources/assets/maplibre-custom-controls.css
b/baremaps-server/src/main/resources/assets/maplibre-custom-controls.css
new file mode 100644
index 00000000..f43e7493
--- /dev/null
+++ b/baremaps-server/src/main/resources/assets/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/baremaps-server/src/main/resources/assets/maplibre-custom-controls.js
b/baremaps-server/src/main/resources/assets/maplibre-custom-controls.js
new file mode 100644
index 00000000..7edbcf0a
--- /dev/null
+++ b/baremaps-server/src/main/resources/assets/maplibre-custom-controls.js
@@ -0,0 +1,71 @@
+/**
+ Licensed 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/baremaps-server/src/main/resources/assets/server.html
b/baremaps-server/src/main/resources/assets/server.html
index 168653f3..2de8631e 100644
--- a/baremaps-server/src/main/resources/assets/server.html
+++ b/baremaps-server/src/main/resources/assets/server.html
@@ -37,17 +37,17 @@
<div id="map"></div>
<script>
- // Initialize the map.
+ // Initialize the map
let map = new maplibregl.Map({
container: 'map',
style: '/style.json',
hash: true
});
- // Add the navigation control to the map.
+ // Add the navigation control to the map
map.addControl(new maplibregl.NavigationControl());
- // Add the inspect control to the map.
+ // Add the inspect control to the map
map.addControl(new MaplibreInspect({
showMapPopup: true,
showMapPopupOnHover: false,
@@ -58,7 +58,7 @@
})
}));
- // Add the tile boundaries control to the map.
+ // Add the tile boundaries control to the map
map.addControl(new MaplibreTileBoundaries({
showBoundaries: false
}));
diff --git a/baremaps-server/src/main/resources/assets/viewer.html
b/baremaps-server/src/main/resources/assets/viewer.html
index 675b6df3..d70f3b45 100644
--- a/baremaps-server/src/main/resources/assets/viewer.html
+++ b/baremaps-server/src/main/resources/assets/viewer.html
@@ -15,9 +15,11 @@
<script
src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
<script src='/maplibre-gl-inspect.js'></script>
<script src='/maplibre-gl-tile-boundaries.js'></script>
+ <script src='/maplibre-custom-controls.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' />
+ <link href='/maplibre-custom-controls.css' rel='stylesheet' />
<style>
body {
@@ -42,13 +44,6 @@
height: 100vh;
}
- .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;
- }
-
</style>
<title>Baremaps</title>
</head>
@@ -63,7 +58,7 @@
</div>
<script>
- // Initialize the map.
+ // Initialize the map
let map = new maplibregl.Map({
container: 'map',
style: '/style.json',
@@ -121,59 +116,12 @@
showBoundaries: false
}));
- function OSMSplitViewControl() { }
-
- OSMSplitViewControl.prototype.onAdd = function(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 osmMapWrapper = document.getElementById('osmMapWrapper');
- const state = osmMapWrapper.getAttribute('data-state');
- if (state === 'hidden') {
- // Show the osm map
- osmMapWrapper.setAttribute('data-state', 'visible');
- osmMapWrapper.style.flex = '1';
- this._map.resize();
- osmMap.resize();
- this._button.style.backgroundColor = "rgb(0 0 0/20%)";
- } else {
- // Hide the osm map
- osmMapWrapper.setAttribute('data-state', 'hidden');
- osmMapWrapper.style.flex = '0';
- this._map.resize();
- osmMap.resize();
- this._button.style.backgroundColor = "";
- }
- };
- this._container.appendChild(this._button);
- return this._container;
- };
+ // Add the split view toggle to the map
+ map.addControl(new MaplibreMapSplitViewToggle({
+ splitMap: osmMap,
+ splitMapContainerId: 'osmMapWrapper',
+ }));
- OSMSplitViewControl.prototype.onRemove = function () {
- this._container.parentNode.removeChild(this._container);
- this._button = undefined;
- this._map = undefined;
- };
-
- map.addControl(new OSMSplitViewControl());
-
- // Listen to configuration changes and update the map
- const connection = new EventSource('/changes')
- connection.onmessage = e => {
- let style = JSON.parse(e.data);
- if (style.reload) {
- location.reload();
- }
- delete style.reload;
- map.setStyle(style);
- }
-
// Sync the vector tile map with the raster tile map
map.on('move', () => {
if (document.getElementById('osmMapWrapper').getAttribute('data-state')
=== 'visible') {
@@ -186,6 +134,17 @@
}
});
+ // Listen to configuration changes and update the map
+ const connection = new EventSource('/changes')
+ connection.onmessage = e => {
+ let style = JSON.parse(e.data);
+ if (style.reload) {
+ location.reload();
+ }
+ delete style.reload;
+ map.setStyle(style);
+ }
+
</script>
</body>
</html>
