Feat/vector tiles clickable - #162
Merged
Merged
Conversation
…dWmtsCapabilitiesProperties to handle vector tile formats, returning feature type if applicable.
Introduced buildWmtsVectorLayer to handle vector tile formats and updated the layer addition logic to utilize this new function when applicable, enhancing the map's capabilities.
- Added methods to determine if a layer is a vector info layer and to extract vector layer IDs in MapLayerInfo. - Improved event handling for vector layers, including dynamic popup styling based on Vuetify theme. - Updated listener management for click events in MapLayerInfo.
…try. Introduced mapping function for geometry types and updated paint properties based on layer type, enhancing flexibility for vector layers.
…ult paint properties to opacity 0
|
🚀 Deployed on https://6a3d3f21b4a3ab3cb34ac9b0--rws-viewer.netlify.app |
|
🚀 Deployed on https://6a3d3f2540131f363457b27b--nl2120.netlify.app |
There was a problem hiding this comment.
Pull request overview
Adds support for clicking WMTS vector-tile (MVT) layers by introducing an invisible vector-tile overlay for hit-testing, and refactors map-click behavior to show a single combined popup with results from all active layers (vector via queryRenderedFeatures, raster via parallel GetFeatureInfo).
Changes:
- Detect WMTS MVT layers from capabilities and resolve geometry type via a WFS
GetFeatureprobe. - Add a WMTS MVT Mapbox layer builder and refactor
MapLayerInfoto aggregate results across all active layers into one popup. - Update map layer lifecycle handling (add/remove) and document the new map-click behavior in the README.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/store/modules/map/index.js | Adds vector overlay creation/removal alongside existing raster Mapbox layers. |
| src/lib/json-2-html-table.js | Adds combined-popup building to render multiple layer sections in one popup. |
| src/lib/get-feature.js | Extends WFS GetFeature helper to support count and optional coordinate filter. |
| src/lib/get-capabilities.js | Detects MVT support and fetches a sample feature to infer geometry type (featureType). |
| src/lib/build-wmts-vector-layer.js | New: constructs an invisible WMTS MVT Mapbox layer for feature querying. |
| src/components/MapComponents/MapLayerInfo.vue | Refactors click handling to aggregate results across all active layers into one popup. |
| src/components/MapComponents/MapLayer.js | Adds hover/highlight hooks for vector layers and feature-state selection support. |
| src/App.vue | Enables pointer cursor for vector layers and switches to the new all-layers MapLayerInfo behavior. |
| README.md | Documents combined popup behavior and vector-vs-raster click paths. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+43
to
+75
| export default function buildWmtsVectorLayer ({ | ||
| url: rawUrl = defaultUrl, | ||
| layer, | ||
| style = '', | ||
| paint = {}, | ||
| mapServiceVersion = '1.0.0', | ||
| bbox = [], | ||
| featureType, | ||
| }) { | ||
| const url = new URL(rawUrl) | ||
| const tile = buildGeoserverUrl({ | ||
| url: url.origin + url.pathname, | ||
| service: 'WMTS', | ||
| request: 'GetTile', | ||
| layer, | ||
| style, | ||
| version: mapServiceVersion, | ||
| format: VECTOR_TILE_FORMAT, | ||
| tilematrixset: 'EPSG:900913', | ||
| tilematrix: 'EPSG:900913:{z}', | ||
| tilerow: '{y}', | ||
| tilecol: '{x}', | ||
| encode: false, | ||
| transparent: true, | ||
| }) | ||
|
|
||
| const sourceLayerId = layer.split(':')[1] | ||
| const layerType = mapboxLayerTypeFromGeometry(featureType) | ||
|
|
||
| return { | ||
| id: sourceLayerId, | ||
| layer, | ||
| type: layerType, |
Comment on lines
+33
to
+39
| getVectorLayerId(layer) { | ||
| const layerName = layer && layer.layer | ||
| if (!layerName || !layerName.includes(':')) { | ||
| return null | ||
| } | ||
| return layerName.split(':')[1] | ||
| }, |
Comment on lines
+91
to
+101
| if (this.highlightable) { | ||
| console.log('highlightable', this.highlightable) | ||
| map.off('click', layerId, this.highlightClickFn) | ||
| map.off('click', this.clearHighlightOnOutsideClick) | ||
| this.clearSelectedFeature() | ||
| } | ||
| if (this.hoverable) { | ||
| console.log('hoverable', this.hoverable) | ||
| map.off('mouseenter', layerId, this.mouseEnterFn) | ||
| map.off('mouseleave', layerId, this.mouseLeaveFn) | ||
| } |
| - Raster responses that return `GRAY_INDEX` are renamed to `<layerName>_value` per layer. | ||
| - Layers with no data at the click point (empty `GetFeatureInfo` response or no rendered vector feature) are omitted from the popup. | ||
|
|
||
| a separate code path used for feature selection in draw mode, not the map info popup. |
Comment on lines
+1
to
5
| function buildSection (title, properties) { | ||
| const htmlRows = Object.keys(properties) | ||
| .map((property) => { | ||
| return `<tr> | ||
| <td style="font-weight:bold; width: 33%; overflow-wrap: break-word; vertical-align: top;"> ${ property }:</td> |
Comment on lines
203
to
208
| removeLayerFromMap({ commit }, { layers }) { | ||
| layers.forEach(layer => { | ||
| commit('REMOVE_ACTIVE_FLATTENED_LAYER', { layer }) | ||
| commit('REMOVE_MAPBOX_LAYER', layer.id) | ||
| commit('REMOVE_MAPBOX_LAYER', layer.layer.split(':')[1]) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds clickable WMTS vector tile (MVT) layers and a combined map-click info popup for all active layers.
Detect MVT layers via GetCapabilities (application/vnd.mapbox-vector-tile)
Resolve geometry type via WFS GetFeature (count: 1) → featureType
Add invisible Mapbox vector overlay (build-wmts-vector-layer.js) for queryRenderedFeatures
Refactor MapLayerInfo to handle all active layers:
MVT: queryRenderedFeatures at click
Raster: parallel GetFeatureInfo per layer
Single popup with one section per layer (stacking order); GRAY_INDEX → _value
Fix vector layer removal from Vuex/map state
MapLayer: add hoverable cursor for vector layers; move click logic to MapLayerInfo
README: document map-click behaviour
Test plan