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

do some gui work

parent 8d0e56bd
......@@ -5,13 +5,36 @@ html, body, #viewDiv{
width: 100%;
}
#controls{
width: 100px;
background-color: white;
width: 200px;
margin-left: 12px;
display:block;
position: absolute;
z-index: 10;
top:100px;
left:0;
top:0;
left:1;
right:0;
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;
text-shadow: black 1px 0 10px;
}
#togglebtn{
display:block;
position: absolute;
z-index: 10;
top:0;
left:1;
right:0;
bottom:0;
}
......@@ -15,7 +15,7 @@ require([
center: [-118.71511,34.09042],
zoom: 11
});
document.querySelector(".btn_topo").addEventListener("click", function(event) {
document.querySelector("#btn_topo").addEventListener("click", function(event) {
if (mapstate != 0){
mapstate = 0;
view.map = map1;
......@@ -25,7 +25,7 @@ require([
console.log('already in state 0');
}
});
document.querySelector(".btn_sat").addEventListener("click", function(event) {
document.querySelector("#btn_sat").addEventListener("click", function(event) {
if (mapstate != 1){
mapstate = 1;
view.map = map2;
......@@ -35,4 +35,9 @@ require([
console.log('already in state 1');
}
});
});
\ No newline at end of file
});
function toggleControls(){
console.log('test');
$('#controls').slideToggle();
}
\ No newline at end of file
......@@ -6,14 +6,25 @@
<title>Datavis 2.0</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://js.arcgis.com/4.12/"></script>
<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>
<div id="controls">
<button class='btn_sat'>Satellite</button>
<button class='btn_topo'>Topography</button>
<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>
</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