I have this code down below at the moment and I want to display the div id year 2018 differently based on which value the slider has. So to start the div id year is 2018 if value = 0 and then if value = 1 I want it to be 2019 and so on. Any ideas how to do it? Can I add it to the if statement by using the div based on which slider the if statement is on?
<body>
<style>
.map-overlay {
font: 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 h2 {
line-height: 24px;
display: block;
margin: 0 0 10px;
}
.map-overlay .legend .bar {
height: 10px;
width: 100%;
background: linear-gradient(to right, #fca107, #7f3121);
}
.map-overlay input {
background-color: transparent;
display: inline-block;
width: 100%;
position: relative;
margin: 0;
cursor: ew-resize;
}
</style>
<div id="map"></div>
<div class="map-overlay top">
<div class="map-overlay-inner">
<h2>Year</h2>
<div id="year">2018</div>
<input id="slider" type="range" min="0" max="3" step="1" value="0">
</div>
<div class="map-overlay-inner">
<div id="legend" class="legend">
<div class="bar"></div>
<div></div>
</div>
</div>
</div>
<script>
mapboxgl.accessToken = 'pk....';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/user/cl38v9w2w000g14p8sd5cqqqp', // style URL
center: [-105.28461151261762, 40.005493336611714], // starting position [lng, lat]
zoom: 13 // starting zoom
});
map.on('load', () => {
slider.oninput = function() {
year.innerHTML = slider.value;
if (slider.value == 0) {
map.setStyle('mapbox://styles/user/cl38v9w2w000g14p8sd5cqqqp')
} else if (slider.value == 1) {
map.setStyle('mapbox://styles/mapbox/streets-v11')
} else if (slider.value == 2) {
map.setStyle('mapbox://styles/mapbox/outdoors-v11')
} else if (slider.value == 3) {
map.setStyle('mapbox://styles/mapbox/light-v10')
}
}
});
</script>
</body>
Just make sure your divs in .holder are in order.
I mean like this:
<div class="holder">
<div>2018</div>
<div>2019</div>
<div>2020</div>
<div>2021</div>
</div>
const slider = document.getElementById("slider");
const year = document.getElementById("year");
// function to make visible the selected value's div
const show = (i) =>
(document.querySelectorAll(".holder > div")[i].style.display = "block");
// makes visible the default selected value
// you can change defalut selected value in your html:
// <input id="slider" ... value="0" />
show(parseInt(slider.value));
slider.oninput = function() {
// makes all divs hidden each time the value changes
[...document.querySelectorAll(".holder > div")].forEach(
(i) => (i.style.display = "none")
);
const val = parseInt(slider.value);
// makes visible the selected value's div
show(val);
if (val == 0) {
year.innerHTML = "2018";
} else if (val === 1) {
year.innerHTML = "2019";
} else if (val === 2) {
year.innerHTML = "2020";
} else if (val === 3) {
year.innerHTML = "2021";
}
};.map-overlay {
font: 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 h2 {
line-height: 24px;
display: block;
margin: 0 0 10px;
}
.map-overlay .legend .bar {
height: 10px;
width: 100%;
background: linear-gradient(to right, #fca107, #7f3121);
}
.map-overlay input {
background-color: transparent;
display: inline-block;
width: 100%;
position: relative;
margin: 0;
cursor: ew-resize;
}
/* makes all divs hidden by default */
.holder>div {
display: none;
}<div id="map"></div>
<div class="map-overlay top">
<div class="map-overlay-inner">
<h2>Year</h2>
<div id="year">2018</div>
<input id="slider" type="range" min="0" max="3" step="1" value="0" />
</div>
<div class="holder">
<div class="map-overlay-inner">
<div class="legend">
<h2>2018</h2>
<p>your content here 1</p>
</div>
</div>
<div class="map-overlay-inner">
<div class="legend">
<h2>2019</h2>
<p>your content here 2</p>
</div>
</div>
<div class="map-overlay-inner">
<div class="legend">
<h2>2020</h2>
<p>your content here 3</p>
</div>
</div>
<div class="map-overlay-inner">
<div class="legend">
<h2>2021</h2>
<p>your content here 4</p>
</div>
</div>
</div>
</div>