Commit a3c60045 authored by Porter Libby's avatar Porter Libby
Browse files

+ other views, +button icons + style

parent 316e11aa
html, body, #viewDiv{
html, body, #viewDiv, #mapView, #graphView, #dataView{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#controls{
background-color: white;
#mapcontrols{
width: 200px;
height: 200px;
margin-left: 100px;
display:block;
position: absolute;
z-index: 10;
top:0;
left:0;
right:0;
bottom:1;
text-align: center;
}
#navcontrols{
width: 200px;
height: 200px;
margin-left: 12px;
display:block;
position: absolute;
......@@ -17,18 +30,6 @@ html, body, #viewDiv{
bottom:0;
text-align: center;
}
.btns{
padding: 0;
border: none;
outline: none;
font: inherit;
color: inherit;
background: none;
cursor: pointer;
padding-top: 5px;
padding-bottom: 20px;
}
.btn-select{
transition-duration: 200ms;
text-shadow: black 1px 0 10px;
......
$( document ).ready(function() {
function mapReady(){
unselect("btn_sat");
select('btn_topo');
toggleControls();
console.log( "ready!" );
});
switchToMap()
console.log( "map view ready!" );
}
var mapstate = 0;
require([
......@@ -69,10 +69,6 @@ require([
});
});
function toggleControls(){
console.log('test');
$('#controls').slideToggle();
}
function select(tag){
console.log(tag);
var element = document.querySelector("#" + tag)
......@@ -84,4 +80,23 @@ function unselect(tag){
var element = document.querySelector("#" + tag)
element.classList.remove("btn-select");
element.classList.add("btn-unselect");
}
function switchToMap(){
document.getElementById("dataView").style.display = "none";
document.getElementById("graphView").style.display = "none";
document.getElementById("mapView").style.display = "block";
console.log('switched to map view');
}
function switchToGraph(){
document.getElementById("mapView").style.display = "none";
document.getElementById("dataView").style.display = "none";
document.getElementById("graphView").style.display = "block";
console.log('switched to graph view');
}
function switchToData(){
document.getElementById("mapView").style.display = "none";
document.getElementById("graphView").style.display = "none";
document.getElementById("dataView").style.display = "block";
console.log('switched to data view');
}
\ No newline at end of file
......@@ -11,20 +11,42 @@
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="viewDiv"></div>
<div id='togglebtn'>
<button class='btns' onclick='toggleControls()'>
<img width='60px' height='60px' src="https://img.icons8.com/cotton/2x/menu.png"/>
</button>
<div id='mapView'>
<div id="viewDiv"></div>
<div id="mapcontrols">
</br>
<button class='btns' id='btn_sat'>Satellite</button>
</br>
<button class='btns' id='btn_topo'>Topography</button>
</div>
<div id='navcontrols'>
<input onclick='switchToData()' type="image" src="img/data-icon.png" alt="Submit" width="32" height="32">
<input onclick='switchToGraph()' type="image" src="img/graph-icon.png" alt="Submit" width="32" height="32">
</div>
</div>
<div id="controls">
<button class='btns' onclick='toggleControls()'>
<img width='30px' height='30px' src="http://cdn.onlinewebfonts.com/svg/img_125563.png"/>
</button>
</br>
<button class='btns' id='btn_sat'>Satellite</button>
</br>
<button class='btns' id='btn_topo'>Topography</button>
<div id='graphView'>
<div id='graph'>
graph
</div>
<div id='navcontrols'>
<input onclick='switchToData()' type="image" src="img/data-icon.png" alt="Submit" width="32" height="32">
<input onclick='switchToMap()' type="image" src="img/map-icon.png" alt="Submit" width="32" height="32">
</div>
</div>
<div id='dataView'>
<div id='data'>
data
</div>
<div id='navcontrols'>
<input onclick='switchToMap()' type="image" src="img/map-icon.png" alt="Submit" width="32" height="32">
<input onclick='switchToGraph()' type="image" src="img/graph-icon.png" alt="Submit" width="32" height="32">
</div>
</div>
<script>
mapReady();
</script>
</body>
</html>
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