Skip to content

A
aire-cdmx
Commit 28ec3d65 authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Play button next to timeline

parent 18fdea7f
Show whitespace changes
Inline Side-by-side
Showing with 23 additions and 25 deletions
public/index.html
View file @ 28ec3d65
...@@ -6,23 +6,10 @@ ...@@ -6,23 +6,10 @@
<title>Calidad del aire en CDMX</title> <title>Calidad del aire en CDMX</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" /> <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" />
<style> <style>
body { margin: 0; padding: 0; } body { margin: 0; padding: 0; }
#mexmap { position: absolute; top: 0; bottom: 0; width: 100%; } #mexmap { position: absolute; top: 0; bottom: 0; width: 100%; }
#play-button { background: #F14E58; padding-right: 26px; border-radius: 3px; border: none; color: white; margin: 0; padding: 0 12px; width: 60px; cursor: pointer; height: 30px; }
#play-button:hover { background-color: #848480; }
.ticks { font-size: 10px; }
.track, .track-inset, .track-overlay { stroke-linecap: round;}
.track { stroke: #000; stroke-opacity: 0.3; stroke-width: 10px; }
.track-inset { stroke: #dcdcdc; stroke-width: 8px; }
.track-overlay { pointer-events: stroke; stroke-width: 50px; stroke: transparent; cursor: crosshair; }
.handle { fill: #fff; stroke: #000; stroke-opacity: 0.5; }
</style>
</head>
<body>
<style>
.map-overlay { .map-overlay {
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
position: absolute; position: absolute;
...@@ -31,7 +18,6 @@ ...@@ -31,7 +18,6 @@
left: 0; left: 0;
padding: 10px; padding: 10px;
} }
.map-overlay .map-overlay-inner { .map-overlay .map-overlay-inner {
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
...@@ -39,41 +25,47 @@ ...@@ -39,41 +25,47 @@
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.map-overlay h2 { .map-overlay h2 {
line-height: 24px; line-height: 24px;
display: block; display: block;
margin: 0 0 10px; margin: 0 0 10px;
} }
.map-overlay .legend .bar { .map-overlay .legend .bar {
height: 10px; height: 10px;
width: 100%; width: 100%;
background: linear-gradient(to right,rgb(0, 228, 0), rgb(255,255,0), rgb(255, 126, 0), rgb(255, 0, 0), rgb(143, 63, 151)); background: linear-gradient(to right, rgb(0, 0, 0) 5px, rgb(0, 228, 0) 5px, rgb(255,255,0), rgb(255, 126, 0), rgb(255, 0, 0), rgb(143, 63, 151));
/* 0, 51, 95, 135, 175*/ /* 0, 51, 95, 135, 175*/
} }
.map-overlay #slider { .map-overlay #slider {
background-color: transparent; background-color: transparent;
display: inline-block; display: inline-block;
width: 100%; /*width: 100%;*/
flex:1;
position: relative; position: relative;
margin: 10px auto; margin: 10px auto;
cursor: ew-resize; cursor: ew-resize;
} }
#controls { display: flex; flex-direction: row; }
#play-button { margin: 0; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer;}
#play-button:hover { color: #848480; }
</style> </style>
</head>
<body>
<div id="mexmap"></div> <div id="mexmap"></div>
<div class="map-overlay top"> <div class="map-overlay top">
<div class="map-overlay-inner"> <div class="map-overlay-inner">
<h2>Calidad del aire - O3 en 2020</h2> <h2>Calidad del aire - O3 en 2020</h2>
<label id="datetime"></label> <label id="datetime"></label>
<div id="controls">
<button id="play-button"><i class='material-icons'>play_arrow</i></button>
<input id="slider" type="range"/> <input id="slider" type="range"/>
</div>
<div id="legend" class="legend"> <div id="legend" class="legend">
<div class="bar"></div> <!-- TODO: put labels in legend --> <div class="bar"></div> <!-- TODO: put labels in legend, on hover, or show tooltip of max value at each date -->
<div>Ozono (ppm)</div> <div>Ozono (ppm)</div>
</div> </div>
<button id="play-button">Play</button> <!-- TODO: put play button next to timeline -->
</div> </div>
</div> </div>
......
public/js/functions.js
View file @ 28ec3d65
...@@ -53,11 +53,17 @@ let map = new mapboxgl.Map({ ...@@ -53,11 +53,17 @@ let map = new mapboxgl.Map({
"style": "mapbox://styles/mapbox/dark-v10", "style": "mapbox://styles/mapbox/dark-v10",
"center": [-99.17, 19.36], "center": [-99.17, 19.36],
"zoom": 10, "zoom": 10,
"minZoom": 9,
"maxZoom": 14 "maxZoom": 14
}); });
map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.NavigationControl());
// map language - doesn't quite work
/*map.addControl(new MapboxLanguage({
defaultLanguage: 'es'
}));*/
// TODO: display more friendly dates // TODO: display more friendly dates
const dateTimeOptions = { const dateTimeOptions = {
weekday: "short", weekday: "short",
...@@ -172,11 +178,11 @@ map.on("style.load", async () => { ...@@ -172,11 +178,11 @@ map.on("style.load", async () => {
playBtn.addEventListener("click", () => { playBtn.addEventListener("click", () => {
if (!playing) { if (!playing) {
playBtn.textContent = "Pause"; playBtn.innerHTML = "<i class='material-icons'>pause</i>";
playing = true; playing = true;
animate = setInterval( run, 500); animate = setInterval( run, 500);
} else { } else {
playBtn.textContent = "Play"; playBtn.innerHTML = "<i class='material-icons'>play_arrow</i>";
playing = false; playing = false;
clearInterval(animate); clearInterval(animate);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment