mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.12k stars 2.21k forks source link

Any options to hide trees and buildings in Standard map style? #13009

Open WataruTsuchida opened 9 months ago

WataruTsuchida commented 9 months ago

Tree models are good for knowing about green environment in the Standard map style. But the appearance of models are not suitable to our tree models. We know that model layer is under development but I hope that there will be functions to switch the visibility of the layers.

melanieimfeld commented 9 months ago

Hi @WataruTsuchida - thanks for the explanation about trees. Curious, what is the reason you'd like to turn off 3D buildings? Is it because you generally prefer a 2D style, because you have custom models, or another reason?

WataruTsuchida commented 9 months ago

Oh I forgot to explain about buildings.

I plan to create a service that users can design a future plan on a district or town. I think that data from starndard have better shape than street v12, so I prefer to use this style.

I wanna enable users to put FillLayer like grass field or FillExtrusionLayer like new buildings to overlay the map.3D buildings are disturbing because the Shape appear outside of the overlay when tilting the map. If we can turn off 3D buildings, we can design it better.

Maybe official scenario for Standard style is only for navigation or data visualization with current data. There is a need that users wanna draw new things for the future plan in urban planning.

cuongnc5 commented 9 months ago

I'm also interested in this issue. The Standard style indeed enhances the user experience, but it's clear that the need to modify or replace buildings with custom ones is essential. We hope for an update from Mapbox to address this matter.

MeltonEngServ commented 9 months ago

I think you can modify the standard style by modifying the style object. In this way you can modify the layout and paint properties of any layer. However, I am not sure if this is the "right" way of doing it. e.g. map.getStyle().imports[0].data.layers[TREES_LAYER_IDX].layout.visibility = 'none'

Similarly, you can add a filter property to the layer object.

map.getStyle().imports[0].data.layers[TREES_LAYER_IDX].filter = YOUR_FILTER_EXPRESSION

I tried to add my own tree model layer with my own tree location data and first you need to add a model to the map similar to adding a image. I found this function to be private in the sourcecode:

map.addModel("tree4", "https://api.mapbox.com/models/v1/mapbox/palm1-lod4.glb?access_token={API_TOKEN}");

map.addSource("my-trees", {type: "vector" | "geojson", url: {YOUR_URL_DATA}});

map.addLayer({
        id: "my-trees",
        type: "model",
        minzoom: 15,
        source: "my-trees",
        "source-layer": "my-source-layer",
        slot: "middle",
        layout: {
          "model-id": [
            "step",
            ["zoom"],
            "tree4",
            15.5,
            "tree3",
            16.5,
            "tree2",
            17.5,
            "tree1",
          ],
        },
        paint: {
          "model-color": [
            "hsla",
            ["random", 50, 200, ["get", "my-id"]],
            60,
            ["random", 70, 90, ["get", "my-id"]],
            1,
          ],
          "model-color-mix-intensity": 0.21,
          "model-opacity": ["interpolate", ["linear"], ["zoom"], 15, 0, 16, 1],
          "model-rotation": [0, 0, ["random", 0, 360, ["get", "my-id"]]],
          "model-scale": [
            "match",
            ["%", ["number", 2], 5],
            0,
            ["literal", [0.8, 0.8, 0.8]],
            1,
            ["literal", [0.8, 0.8, 0.8]],
            2,
            ["literal", [0.9, 0.9, 0.9]],
            ["literal", [1, 1, 1]],
          ],
        },
      });
WataruTsuchida commented 9 months ago

@MeltonEngServ You could hide trees?

TimoDataUnites commented 9 months ago

I also would like this option. I have a need to disable specific features of the building layer so I can place my own 3d models at the correct positions.

This worked in the older styles when using the building layer from Mapbox. You can disable a single feature of the building layer there. I would love to use the newer styles since they look beautiful, but I can't at the moment because I can't disable these buildings.

WataruTsuchida commented 8 months ago

My current workaround is to extract style json from Standard style, then customize it in Mapbox studio or client. We can disable trees and buildings on this way.

So we should not use Standard style directly if you wanna customize it more.

BjoernRave commented 8 months ago

I would like to use mapbox standard (or some form of it) for navigation, the problem is, that when you have a pitch = 60 the "camera" is often times inside 3D extrusions, for that I would need to create some form of filtermask around my location marker to hide buildings in a radius around it. Has anyone already done sth similar with mapbox?

WataruTsuchida commented 8 months ago

@BjoernRave You generate circle around it and use "within" expression with the geometry. But Your issue is not related to standard style....

WataruTsuchida commented 8 months ago

My needs are very complicated and I cannot expect that config propetry method satisfy it. I will continue to use customized style json extracted from Standard style.

melanieimfeld commented 8 months ago

@WataruTsuchida I am going to reopen this ticket as we are tracking related requests from other tickets in this ticket. While this may not be relevant to you specifically, I would like to give a quick update on plans and use this an opportunity to ask for feedback from others.

Looking at the various requests, I will attempt to capture the different use cases that were reported here:

  1. Need to disable specific features of the building layer so I can place my own 3d models at the correct positions, previously achieved with map.setFilter() (see here)

  2. Need to turn off all 3D to transform into 2D map (see here)

  3. Need to turn off 3D because custom data cannot be moved above 3D buildings (see here)

For 2 and 3, we are investigating a style toggle to disable 3D. For 3, please also consult the docs, as this is a behavior related to terrain performance.

For those of you interested in 1, we are also looking into a mechanism we call “conflation”: the idea is that if two models or fill-extrusions from different layers collide, one of them will be hidden. This means that your custom model data could take automatic precedence over the 3D data in the Mapbox basemap without you having fetch an id to filter by and use map.setFilter(). Here’s where we would love your feedback: If you had the option of automatic conflation, would you still use the style toggle?

Tagging @rivindubandara, @palhal, @cuongnc5 since you opened/commented on related tickets

JuanIrache commented 8 months ago

About use case 3, I would rather not have to disable 3D buildings to see my shapes, ideally they would be drawn on top of everything, regardless of 3D geometry.

This is an oversimplification, but imagine two canvasses with the same perspective. One is the standard style, the other has only my shape. I want to place my canvas on top of the other.

tibotiber commented 8 months ago

@melanieimfeld I landed here just for the case 1 and I think the automatic conflation would be awesome. I'm guessing it would still be valuable to have programmatic filtering and leave control to the developer for some cases or in case automatic conflation is tricky. Any estimate yet on when this might move forward? Happy to test and/or provide feedback if you want. Take care.

WataruTsuchida commented 8 months ago

@melanieimfeld Conflation is a good idea. I request that FillLayer can also delete buildings to overwrite the space and select the behaviour whether the feature affect or not.

cuongnc5 commented 8 months ago

Thank you @melanieimfeld . The conflation idea is a good one. Regarding the performance issue, I propose a solution.

Enable the option to hide OSM buildings in Mapbox Studio: I would like to hide OSM buildings when configuring the map style. I used to achieve this by replacing the .json file in Mapbox Studio. This seems to provide better map loading performance than using setFilter() when loading the style. However, it also creates difficulties in managing the visibility of OSM buildings because I can only set a filter by ID. Therefore, I would like to suggest an additional option: Create an API to override or some method to allow me to manage OSM buildings in my Mapbox Studio from my admin system by setting the visibility of a specific number of OSM buildings that I want to manage.

melanieimfeld commented 8 months ago

thanks everyone for the feedback and additional ideas! We'll discuss this further internally. cc @astojilj

skreborn commented 7 months ago

@melanieimfeld One addition to automatic conflation from my part would be a way to define a separate bounding box for the model that is free to be larger or smaller than the model itself, so that the conflation algorithm can be fine-tuned by adjusting the bounding box itself.

As an example: I'd like to add a building that has a main, rectangular area, and an overhang one, kept in place by columns underneath. It being a large building, I don't necessarily want to remove all models underneath the overhang, just the main area of the building.

Taking it one step further, the bounding box could itself be a simple model made of multiple rectangular extrusions, to allow the author to, for example block out the columns themselves, as well as the main area of the building. I imagine, however, that this addition would introduce unwanted complexity for little gain.

Then again, it might just be that all of this is entirely unnecessary, and one would just replace the few models that appear underneath the overhang with their own versions anyway. It's admittedly a niche use case, but something to think about nonetheless.

TimoDataUnites commented 5 months ago

@melanieimfeld Any updates for this issue? I would love to turn off these models or choose a model to turn off.

rivindubandara commented 4 months ago

@melanieimfeld Any updates? I hope that buildings can just be turned off similar to V2, it just makes a lot of sense when you are trying to display information and not have the buildings interfere at a certain zoom level.

stepankuzmin commented 4 months ago

Hey all 👋

Sorry for the radio silence. We’re working on enabling the toggling of trees and buildings in the Mapbox Standard style. This feature will be available with the next major Standard update this summer.

rivindubandara commented 4 months ago

@stepankuzmin

Was this released with 3.40 update or will it be a later update?

Thanks

rivindubandara commented 3 months ago

Hi @stepankuzmin @melanieimfeld @astojilj,

Is there any update on this please? I can see there is a new version 3.50.beta1.

Thanks

stepankuzmin commented 3 months ago

Hey @rivindubandara,

This feature will be available with the next major Standard update, targeted at the end of July.

rivindubandara commented 1 month ago

@stepankuzmin will this be part of 3.6.0?

astojilj commented 1 month ago

@stepankuzmin will this be part of 3.6.0?

@rivindubandara If you'd like to hide 3D content in a limited area, consider using clip layer feature (available from gl-js 3.5) https://docs.mapbox.com/mapbox-gl-js/example/clip-layer/

An approach to hide layers is to be delivered as part of Standard style update, not via the client gl-js 3.6 code update.

stepankuzmin commented 1 month ago

Hey all 👋

To turn off 3D objects, you could use the show3dObjects configuration property with the upcoming Standard Style. Here's a sneak peek:

const map = new mapboxgl.Map({
    container: 'map',
    center: [-122.395, 37.792],
    style: 'mapbox://styles/mapbox/standard', // Use the Mapbox Standard style
    config: {
        // Initial configuration for the Mapbox Standard style set above. By default, its ID is `basemap`
        basemap: {
            // Here, we're turning off all 3D layers, such as landmarks, trees, and 3D extrusions
            show3dObjects: false
        }
    }
});
rivindubandara commented 1 month ago

@stepankuzmin this is great. it already works with the beta version. Thanks!

tibotiber commented 1 month ago

Hi @stepankuzmin, are finer controls in scope, like removing specific layers, or removing specific buildings? And what are the current thoughts about the automatic conflation suggested by @melanieimfeld? Thanks :)

danielpost commented 1 month ago

Hi @stepankuzmin, any idea why it is not possible to add a 3D layer with buildings using the Standard style, using this code? It works fine with the Streets v12 style.

map.addLayer( {
    id: '3d-buildings',
    source: 'composite',
    'source-layer': 'building',
    type: 'fill-extrusion',
    // ...other args
) }
tibotiber commented 1 month ago

Seems like some new stuff related to this has been announced on the marketing side.

https://www.mapbox.com/blog/mapbox-style-updates-more-flexible-configurations-for-the-3d-basemap

astojilj commented 1 month ago

@tibotiber

Hi @stepankuzmin, are finer controls in scope, like removing specific layers, or removing specific buildings? And what are the current thoughts about the automatic conflation suggested by @melanieimfeld? Thanks :)

Removing specific buildings, and replacing by custom buildings is explained in the clip layer example: https://docs.mapbox.com/mapbox-gl-js/example/clip-layer/