Esri / Esri/esri-leaflet-vector

Add `vectorTileLayer` events API to access underlying data

Open
#101 1 comment 3 reactions 0 assignees View on GitHub
enhancement
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.