mapbox / mapbox/mapbox-gl-js

Cannot extrude 2 location in the same position using extrusion and filter for checking polygon ids

Open
#12,321 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

I am using mapbox gl 2.10.0 inside react 18.2 . I have two polygons in the same location and when I click a button I want to extrude those two polygons above each other in the same position. I want to achieve something like [this ](https://github.com/mapbox/mapbox-gl-js/issues/5768). Based on [this](https://docs.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/) I created code to filter polygons to a `fill-extrude` layer, based on ids.

**mapbox-gl-js version**:2.10.0

**browser**: G Chrome Version 106.0.5249.119 (Official Build) (64-bit)

### Steps to Trigger Behavior

1.when having `map.current.setFilter('countries-highlighted', ['in', 'id', ...idtable]);` click the polygonTest button and click the extruded polygon I get only one polygon, id 11543. No errors in the browser console.
2. when having `map.current.setFilter('countries-highlighted', ['in', ['get','id'] , ...idtable ])` click the polygonTest button I get `react_devtools_backend.js:4026 Error: layers.countries-highlighted.filter: Expected 2 arguments, but found 3 instead`
3. when having `map.current.setFilter('countries-highlighted', ['in', ['get','id'] , ['literal',[11543, 11544]] ])` click the polygonTest button I get `Error: layers.countries-highlighted.filter: Expected 2 arguments, but found 3 instead`
4. when having `map.current.setFilter('countries-highlighted', ['in','id' , ['literal',[11543, 11544]] ])` click the polygonTest button I get no extrude polygon and no errors in the console.

### Link to Demonstration
[codepen](https://codepen.io/imopo/pen/ExLBvEK)

### Expected Behavior
Filter array of ids to pass to the extrude layer, so they extrude one above the other, similar to [this ](https://github.com/mapbox/mapbox-gl-js/issues/5768)

### Actual Behavior
Cannot extrude all polygons one above the other, or any one at all, depending on filter syntax.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the linked CodePen with mapbox-gl 2.10.0 and reproduce the four setFilter calls described in the steps. Start by comparing the countries-highlighted filter expressions with the box-queryrenderedfeatures example and inspect the selected polygon IDs. Done means both polygons at the same location are selected and extruded without filter errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.