Esri / Esri/esri-leaflet-vector
Add `vectorTileLayer` events API to access underlying data
- Dominant language
- JavaScript
- Stars
- 72
- Forks
- 54
- PR merge metrics
- No merged PRs in 30d
Description
We **can** gain access to the underlying data attributes rendered by `mapbox-gl-js`. The purpose of this enhancement is to define the API we create around `L.esri.Vector.vectorTileLayer` to enable it.
For example, here is a rough prototype code snippet of how this actually could work in our `MapBoxGLLayer.js`.
```js
// this._map is the "outer" LeafletJS map instance
// this._glMap is a mapbox-gl-js map instance,
// which is the workhorse under the hood of esri-leaflet-vector
// 1. wire up a LeafletJS map click event callback
// 2. and pass the clicked coords to this._glMap.queryRenderedFeatures()
this._map.on('click', (e) => {
// https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures
const features = this._glMap.queryRenderedFeatures([e.latlng.lng, e.latlng.lat]);
console.log(features);
});
```
With that in mind, I'd like help in defining what the API of `L.esri.Vector.vectorTileLayer` would look like.
1. Idea: First investigate what happens when we try out some of the available methods on Leaflet's `Layer`, since `vectorTileLayer` directly inherits from that class. https://leafletjs.com/reference-1.7.1.html#layer
For example, what does the following do and does it provide any useful information? How would we design an API that internally deals with the mapbox-gl-js map instance and returns any clicked features?
```js
myVectorTileLayer.on('click', (e) => console.log(e));
```
1. Idea: Do we allow developers to attach/detach their own event handlers, and we just help return the feature data provided by `this._glMap.queryRenderedFeatures()`? This would be similar to `esri-leaflet`'s [FeatureLayer events](https://esri.github.io/esri-leaflet/api-reference/layers/feature-layer.html#events)
> ... L.esri.FeatureLayer also fires the following [MouseEvents](https://leafletjs.com/reference.html#event-objects) click, dblclick, mouseover, mouseout, mousemove, and contextmenu and the following the [PopupEvents](https://leafletjs.com/reference.html#event-objects) popupopen and popupclose
1. Idea: Do we provide other instance methods such as `bindPopup` similar to `esri-leaflet`'s [DynamicMapLayer](https://esri.github.io/esri-leaflet/api-reference/layers/dynamic-map-layer.html#methods)?
The 2nd idea sounds like a straightforward and incremental enhancement that would provide flexibility to developers. The 3rd--`bindPopup`--seems like a nice UI convenience but is quite specific in scope and Leaflet devs can still define a popup themselves on an interaction event.
@patrickarlt @gavinr @dhatcher
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reading MapBoxGLLayer.js and the Leaflet Layer event documentation referenced in the issue. Trace how the outer Leaflet map and underlying mapbox-gl-js instance could connect through queryRenderedFeatures(). Done requires agreeing on and documenting the vectorTileLayer events or methods, including how feature data is returned.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100