Transparency Sliders

Mapbox Example: Adjust a layer’s opacity

Since we probably want to be able to view the modern base map below the georeferenced map we just added, let’s make transparency slider. A transparency slider (sometimes also called opacity slider) gradually reduces the transparency of a layer from 0% to 100% transparent. Other common ways of doing this are by using a swipe method, or by toggling layers.

For this to work, we will need to:

Define the style of the new controls on the web map,
Create the html container for where the controls will be placed on the web map,
Add a variable for the slider and its status. A variable in JavaScript is something that holds a defined value.
Add an event listener for the slider to work with our layer. An event listener is a JavaScript method for how we make our web page respond to something, such as clicking on a button, moving a mouse over a transpareny slider control.

Define the Slider Style

First we need to let our browser know how the slider should appear on the page, such as where to place it, how wide to make it, etc.

To Do

In VS Code, find the comment for the CSS of the controls in the <head>. Insert the following style just below the comment.

.map-overlay {
  font: bold 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
  position: absolute;
  width: 25%;
  top: 0;
  left: 0;
  padding: 10px;
}

.map-overlay .map-overlay-inner {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
}

.map-overlay label {
  display: block;
  margin: 0 0 10px;
}

.map-overlay input {
  background-color: transparent;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0;
  cursor: ew-resize;
}

Add Slider to Map

The above styles won’t actually make your slider appear on the page. To do that we need to add another container to the document’s body.

In VS Code, add the container below to your web map.

<div class="map-overlay top">
  <div class="map-overlay-inner">
    <label>Layer opacity: <span id="slider-value">100%</span></label>
    <input id="slider" type="range" min="0" max="100" step="0" value="100" />
  </div>
</div>

Save and view the map in your browser. You should notice a new control in the top left of your map, however it won’t function properly until we’ve set it to work with our map layer.

Cr

Now we’re getting a little deeper into how JavaScript works with your document!

Add the variables for the slider and its status

const slider = document.getElementById("slider");
const sliderValue = document.getElementById("slider-value");

Add the event listener for the slider interaction. Save yand view the map in your browser.

slider.addEventListener("input", (e) => {
  // Adjust the layers opacity. layer here is arbitrary - this could
  // be another layer name found in your style or a custom layer
  // added on the fly using `addSource`.
  map.setPaintProperty(
    "historical-overlay",
    "raster-opacity",
    parseInt(e.target.value, 10) / 100
  );

  // Value indicator
  sliderValue.textContent = e.target.value + "%";
});

You should see your map with the transparency slider controls, which should work if you click and drag the controls to change the transparency.

PREVIOUSOther Overlay Options

NEXTAdding GeoJSON Data