UNL Map JS Docs
UNL Map JSUNL Map JS DocsExamplesCreate a time slider

Create a time slider

Using Map#setFilter and D3.js, create a range slider to visualize earthquakes in 2015 that were greater than 5.9 magnitude.

Note
If you want to test this example, edit it in JSFiddle or CodePen and replace the "YOUR-OWN-API-KEY" and "YOUR-OWN-VPM-ID" placeholders with your actual api key and vpm id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Create a time slider</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.js"></script>
<link href="https://unpkg.com/unl-map-js@0.1.5/lib/unl-map-js.css" rel="stylesheet" />
<link
href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<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>Significant earthquakes in 2015</h2>
<label id="month"></label>
<input id="slider" type="range" min="0" max="11" step="1" value="0" />
</div>
<div class="map-overlay-inner">
<div id="legend" class="legend">
<div class="bar"></div>
<div>Magnitude (m)</div>
</div>
</div>
</div>
 
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var map = new UnlSdk.Map({
container: "map",
apiKey: "YOUR-OWN-API-KEY",
vpmId: "YOUR-OWN-VPM-ID",
center: [31.4606, 20.7927],
zoom: 0.5,
});
 
var months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
 
function filterBy(month) {
var filters = ["==", "month", month];
map.setFilter("earthquake-circles", filters);
map.setFilter("earthquake-labels", filters);
 
// Set the label to the month
document.getElementById("month").textContent = months[month];
}
 
map.on("load", function () {
// Data courtesy of http://earthquake.usgs.gov/
// Query for significant earthquakes in 2015 URL request looked like this:
// http://earthquake.usgs.gov/fdsnws/event/1/query
//    ?format=geojson
//    &starttime=2015-01-01
//    &endtime=2015-12-31
//    &minmagnitude=6'
//
// Here we're using d3 to help us make the ajax request but you can use
// Any request method (library or otherwise) you wish.
d3.json(
"https://u-n-l.github.io/unl-map-js-docs/assets/significant-earthquakes-2015.geojson",
function (err, data) {
if (err) throw err;
 
// Create a month property value based on time
// used to filter against.
data.features = data.features.map(function (d) {
d.properties.month = new Date(d.properties.time).getMonth();
return d;
});
 
map.addSource("earthquakes", {
type: "geojson",
data: data,
});
 
map.addLayer({
id: "earthquake-circles",
type: "circle",
source: "earthquakes",
paint: {
"circle-color": [
"interpolate",
["linear"],
["get", "mag"],
6,
"#FCA107",
8,
"#7F3121",
],
"circle-opacity": 0.75,
"circle-radius": [
"interpolate",
["linear"],
["get", "mag"],
6,
20,
8,
40,
],
},
});
 
map.addLayer({
id: "earthquake-labels",
type: "symbol",
source: "earthquakes",
layout: {
"text-field": ["concat", ["to-string", ["get", "mag"]], "m"],
"text-font": ["Fira GO Regular"],
"text-size": 12,
},
paint: {
"text-color": "rgba(0,0,0,0.5)",
},
});
 
// Set filter to first month of the year
// 0 = January
filterBy(0);
 
document
.getElementById("slider")
.addEventListener("input", function (e) {
var month = parseInt(e.target.value, 10);
filterBy(month);
});
}
);
});
</script>
 
</body>
</html>