Skip to content

feat: add slope layer type for DEM-based slope visualization#7098

Open
eddy-geek wants to merge 1 commit intomaplibre:mainfrom
eslopemap:slope-gl-pr
Open

feat: add slope layer type for DEM-based slope visualization#7098
eddy-geek wants to merge 1 commit intomaplibre:mainfrom
eslopemap:slope-gl-pr

Conversation

@eddy-geek
Copy link
Copy Markdown

Implements a new 'slope' layer type that computes slope angle from raster-dem sources using the Horn (1981) algorithm and maps the result to a user-defined color ramp.

Slopes are important for mountain activities like ski-touring.
Example sites: https://www.openslopemap.org/karte/ ; https://snowmap.fr/ ; https://gpx.studio/

All sites today rely on dedicated raster layers which means:

  • end-user has no way to customize the colors
  • it's inefficient (redundant with other DEM uses like hillshading)

Related style update: maplibre/maplibre-style-spec#1497

Example, using the awesome mapterhorn:
image

    const map = new maplibregl.Map({
        container: 'map',
        style: {
            version: 8,
            sources: {
                'dem': {
                    type: 'raster-dem',
                    url: 'https://tiles.mapterhorn.com/tilejson.json',
                    tileSize: 256,
                    maxzoom: 16
                },
                'osm': {
                    type: 'raster',
                    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                    tileSize: 256
                }
            },
            layers: [
                {
                    id: 'background',
                    type: 'raster',
                    source: 'osm',
                    paint: {
                        'raster-opacity': 1
                    }
                },
                {
                    id: 'slope',
                    type: 'slope',
                    source: 'dem',
                    paint: {
                        'slope-opacity': 0.3,
                        'slope-color': [
                            'interpolate',
                            ['linear'],
                            ['elevation'],
                            0,  '#ffffff',
                            15, '#ffff00',
                            30, '#ff8800',
                            45, '#ff0000',
                            60, '#aa0000',
                            90, '#550000'
                        ]
                    }
                }
            ]
        },
        center: [6.8652, 45.8326],
        zoom: 12
    });

I only needed slope and initially missed #6711 , so I understand we may want to handle this in a more generic way.
Also, multiply blending as per #13583 would improve readability a lot for this use-case too.

New files:

  • src/shaders/slope.fragment.glsl — Horn algorithm slope computation with proper meters-per-pixel cell size conversion
  • src/shaders/slope.vertex.glsl — vertex shader (based on color-relief)
  • src/style/style_layer/slope_style_layer.ts — style layer class with slope color ramp and texture management
  • src/render/draw_slope.ts — render function
  • src/render/program/slope_program.ts — uniform definitions

Paint properties:

  • slope-opacity: number [0-1], default 1
  • slope-color: color ramp expression (interpolate over elevation), values represent slope in degrees [0-90]

Registered in: painter.ts, shaders.ts, program_uniforms.ts, create_style_layer.ts

Includes render tests (slope/rainbow, slope/opacity) and a demo HTML.

Note: AI-assisted (Claude), all code reviewed by me

Launch Checklist

  • [x ] Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
  • [x ] Briefly describe the changes in this PR.
  • [x ] Link to related issues.
  • Include before/after visuals or gifs if this PR includes visual changes.
  • [x ] Write tests for all new functionality.
  • Document any changes to public APIs.
  • Post benchmark scores.
  • Add an entry to CHANGELOG.md under the ## main section.

Implements a new 'slope' layer type that computes slope angle from
raster-dem sources using the Horn (1981) algorithm and maps the result
to a user-defined color ramp.

New files:
- src/shaders/slope.fragment.glsl — Horn algorithm slope computation
  with proper meters-per-pixel cell size conversion
- src/shaders/slope.vertex.glsl — vertex shader (based on color-relief)
- src/style/style_layer/slope_style_layer.ts — style layer class with
  slope color ramp and texture management
- src/render/draw_slope.ts — render function
- src/render/program/slope_program.ts — uniform definitions

Paint properties:
- slope-opacity: number [0-1], default 1
- slope-color: color ramp expression (interpolate over elevation),
  values represent slope in degrees [0-90]

Registered in: painter.ts, shaders.ts, program_uniforms.ts,
create_style_layer.ts

Includes render tests (slope/rainbow, slope/opacity) and a demo HTML.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant