Skip to main content
100%

Adjust a layer's opacity

✓ Published0🌍 Public
Aandyrutkowski
Last edited Oct 11, 2018
Created on Oct 11, 2018

This example demonstrates how to interactively adjust the opacity of a raster layer on a Mapbox GL map. It displays a historical map layer (HOLC1939) over a modern base style, with a slider control in a top-left overlay panel. Dragging the slider updates the layer’s transparency in real time using `map.setPaintProperty` with the `raster-opacity` property. The code uses the Mapbox GL JS API (v0.49.0) and loads its tile data from a Mapbox-hosted raster source.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Adjust a layer's opacity

This example uses Mapbox GL JS to display a historical map layer and lets the user adjust its opacity with a range slider. A raster layer sourced from Mapbox tiles is overlaid on a custom style, and moving the slider calls `map.setPaintProperty` with a `raster-opacity` value. A second map instance shows a clickable polygon layer that opens a popup with property details. The code includes two map setups, one centered on Chicago and another on Los Angeles, both using Mapbox styles and tile sources.

Aandyrutkowski
93% match
Loading thumbnail…

Display a map

A map centered on Los Angeles displays a raster layer with an adjustable opacity slider. The example uses the Mapbox GL JS library to render the map and the `map.setPaintProperty` method with `raster-opacity` to control layer transparency. A slider input updates the opacity value, while a click event on the map triggers a popup showing the name and type of a feature from a layer called `47greenbook-dapl9g`. The map style and raster source come from Mapbox-hosted data.

Aandyrutkowski
77% match
Loading thumbnail…

Show and hide layers

This example uses Mapbox GL JS to display a map of Los Angeles with two overlay layers: a Watts curfew map and a 1939 HOLC redlining map. A menu in the top-right corner contains toggle links for each layer. Clicking a link toggles the layer’s visibility via `map.getLayoutProperty` and `map.setLayoutProperty`, updating the active class on the link. Both layers are raster sources loaded from Mapbox tiles, rendered on top of a custom map style.

Aandyrutkowski
69% match
Loading thumbnail…

Show and hide layers

This interactive map displays two historical layers of Los Angeles: redlining boundaries from 1939 and locations from the same year’s Green Book. A menu of toggleable layer names lets users show or hide each raster or vector source independently. Built with Mapbox GL JS v0.44.1, the code adds both layers on map load and uses `map.getLayoutProperty` and `map.setLayoutProperty` to switch visibility. The raster HOLC layer and the circle-styled Green Book points come from Mapbox-hosted tilesets.

Aandyrutkowski
66% match
Loading thumbnail…

Layers Control Tutorial - Leaflet

This example demonstrates interactive layer management in a Leaflet map, showing how to toggle a group of city markers on and off using buttons. The map initially displays a grayscale tile layer from Mapbox, with an optional streets basemap available via the built-in `L.control.layers` interface. Clicking "Add" creates a `L.layerGroup` containing four markers with popups for Colorado cities and registers it as an overlay, while "Remove" deletes that layer and restores the original base-layer control. The code relies on Leaflet’s tile layer, marker, popup, and layer-control APIs, with data sourced from hardcoded coordinates and Mapbox/OpenStreetMap tiles.

Aandyreagan
63% match
Loading thumbnail…

Simple Map with mask between 2 layers

This example demonstrates a map with a mask effect between two layers, using OpenLayers v4.6.5. It overlays a Stamen watercolor tile layer with a black mask derived from country polygons from a GeoJSON file. The mask is created using an `ol.source.Raster` with a custom pixel operation that returns black where the vector layer’s alpha is zero, otherwise showing the watercolor pixels. A dropdown menu filters the vector source to a single country, triggering a view fit and updating the mask via `raster.changed()`. The visualization uses `ol.layer.Image`, `ol.source.ImageVector`, and `ol.format.GeoJSON`.

TThomasG77
63% match
Loading thumbnail…

HOLC 1939

An interactive Mapbox GL map displays two overlaid raster layers of Home Owners' Loan Corporation (HOLC) maps from 1939, centered on Los Angeles and Watts. Two sliders control the opacity of each raster layer, allowing side-by-side comparison of the historical redlining districts. Clicking on the map reveals popups with the district type and name from the GeoJSON layers. The map uses Mapbox GL JS v0.44.1 with custom raster sources and built-in popup functionality.

Aandyrutkowski
62% match
Loading thumbnail…

ol-ext: Layerswitcher

This example demonstrates an OpenLayers 3 layer switcher control from the ol-ext library, showing how to manage multiple tile layers within groups. It displays base layers (Stamen Watercolor, Toner, and OSM) with exclusive visibility, groups layers, and uses properties like `displayInLayerSwitcher`, `allwaysOnTop`, and `openInLayerSwitcher` to control layer behavior. The interface includes a header, opacity sliders, progress bars for tiled layers, and jQuery to toggle visibility and opacity options via checkboxes. The switcher can be placed inside or outside the map, with events like `drawlist` and `toogle` for customization.

TThomasG77
61% match