CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-gl
user16508174
user16508174

Reputation: 291

How to use an existing Mapbox GL "template" but add elevation/fog to it?

I have this:

var map = new mapboxgl.Map
({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
});

It works. But I also want elevation/fog added to it. Reading the manual for many hours, it seems to me that you either have to specify a URL, like I have done, to a "pre-made style", OR specify an absolutely massive style object full of cryptic and incomprehensible sub-objects such as specific layers and stuff.

There doesn't seem to be a way to simply use that style "template" URL, and add elevation/fog on top of it. I really hope that I'm wrong about this.

Downloading the JSON object representing their "pre-made style", I was presented with a massive ocean of data, impossible to manage in any sensible manner. They cannot possibly mean that you should try to edit/adapt/extend that.

I must be missing something. Is there really no way to do what I do now, but enable the "terrain" and "fog" features?

https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/ https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/

Naturally, I tried adding them to the Map object at first, assuming this was how it was done, but it was just ignored.

Again, if I were to make my own style object, it would be required to contain all sorts of scary and incomprehensible stuff: https://docs.mapbox.com/mapbox-gl-js/style-spec/root/

To be frank, I have no idea who would ever want a 3D map which can support elevation/height differences and realistic fog/lights, yet not use those features. To me, this seems like it would be a simple boolean setting that you turn on/off, and which is enabled by default.

Upvotes: 0

Views: 407

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126457

I have not tried this, but you should be able to set fog dynamically like this:

var map = new mapboxgl.Map
({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
});

map.on('load', () => {
  map.setStyle({
    ...map.getStyle(), 
    "fog": {
        "range": [-0.5, 3],
        "color": "white",
        "horizon-blend": 0.1
    }
  })
});

See the documentation here.

Upvotes: 1

Related Questions