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 72130184 Add raster split view for dev (#636)
72130184 is described below
commit 72130184c2e02c70c5e6ccb94206894467e5999c
Author: Leonard <[email protected]>
AuthorDate: Wed Apr 26 22:13:18 2023 +0200
Add raster split view for dev (#636)
---
.../src/main/resources/assets/viewer.html | 126 +++++++++++++++++++--
1 file changed, 119 insertions(+), 7 deletions(-)
diff --git a/baremaps-server/src/main/resources/assets/viewer.html
b/baremaps-server/src/main/resources/assets/viewer.html
index fe3633fb..675b6df3 100644
--- a/baremaps-server/src/main/resources/assets/viewer.html
+++ b/baremaps-server/src/main/resources/assets/viewer.html
@@ -24,17 +24,43 @@
margin: 0;
}
- #map {
- position: fixed;
+ .map-wrapper {
+ position: relative;
+ }
+
+ .map {
width: 100%;
height: 100%;
}
+ .columns {
+ display: flex;
+ }
+
+ .column {
+ flex: 1;
+ 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>
<body>
-<div id="map"></div>
+ <div class="columns">
+ <div class="column map-wrapper" id="mapWrapper">
+ <div class="map" id="map"></div>
+ </div>
+ <div class="column map-wrapper" id="osmMapWrapper" data-state="hidden"
style="flex: 0">
+ <div class="map" id="osmMap"></div>
+ </div>
+ </div>
<script>
// Initialize the map.
@@ -44,10 +70,42 @@
hash: true
});
- // Add the navigation control to the map.
+ // Split view the vector map with the osm raster map
+ const osmMap = new maplibregl.Map({
+ container: 'osmMap',
+ style: {
+ 'version': 8,
+ 'sources': {
+ 'raster-tiles': {
+ 'type': 'raster',
+ 'tiles': [
+ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
+ ],
+ 'tileSize': 256,
+ 'attribution': '© OpenStreetMap'
+ }
+ },
+ 'layers': [
+ {
+ 'id': 'simple-tiles',
+ 'type': 'raster',
+ 'source': 'raster-tiles',
+ 'minzoom': 0,
+ 'maxzoom': 22
+ }
+ ]
+ },
+ center: map.getCenter(),
+ zoom: map.getZoom(),
+ bearing: map.getBearing(),
+ hash: false,
+ interactive: false,
+ })
+
+ // 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,12 +116,54 @@
})
}));
- // Add the tile boundaries control to the map.
+ // Add the tile boundaries control to the map
map.addControl(new MaplibreTileBoundaries({
showBoundaries: false
}));
- // Listen to configuration changes and update the map.
+ 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;
+ };
+
+ 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);
@@ -74,6 +174,18 @@
map.setStyle(style);
}
+ // Sync the vector tile map with the raster tile map
+ map.on('move', () => {
+ if (document.getElementById('osmMapWrapper').getAttribute('data-state')
=== 'visible') {
+ osmMap.jumpTo({
+ center: map.getCenter(),
+ zoom: map.getZoom(),
+ bearing: map.getBearing(),
+ pitch: map.getPitch()
+ });
+ }
+ });
+
</script>
</body>
</html>
