Skip to content

Commit 6930568

Browse files
ZodiaseZodiase
committed
Merge pull request #10 from xhuang26/testing
Resolve #1.
2 parents 333f4ff + 09843da commit 6930568

13 files changed

+8518
-2
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.travis.yml

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
language: node_js
2+
node_js:
3+
- 4.1
4+
before_script:
5+
- "curl -O http://selenium-release.storage.googleapis.com/2.53/selenium-server-standalone-2.53.0.jar"
6+
- "npm install"
7+
- "npm run build"
8+
- "java -jar selenium-server-standalone-2.53.0.jar -Dphantomjs.binary.path=./node_modules/phantomjs-prebuilt/bin/phantomjs &"
9+
- sleep 3
10+
- npm start &
11+
- sleep 5
12+
script:
13+
- wdio ./test/wdio.conf.js

‎README.md

+17-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,17 @@
1-
# map-visualizer
1+
# map-visualizer
2+
- install pjs
3+
$ sudo npm install -g phantomjs
4+
- run selenuim
5+
$ java -jar selenium-server-standalone-2.53.0.jar
6+
7+
- install express, chai locally
8+
$ npm install express AND chai
9+
- install webdriver
10+
$ npm install webdriverio --save-dev
11+
The test runner is called wdio and should be available after the install was successful:
12+
$ ./node_modules/.bin/wdio --help
13+
- install mocha framework
14+
$ npm install wdio-mocha-framework
15+
16+
- run web server
17+
$ node server.js

‎index.css

+227
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
html, body {
2+
height: 100%;
3+
width: 100%;
4+
margin: 0;
5+
border: 0;
6+
padding: 0;
7+
}
8+
9+
#map {
10+
position: absolute;
11+
z-index: 1;
12+
top: 0;
13+
right: 0;
14+
bottom: 0;
15+
left: 0;
16+
background-color: rgba(33, 33, 33, 0.8);
17+
}
18+
19+
#map > .ol-viewport .layer-list {
20+
position: absolute;
21+
top: 0;
22+
bottom: 0;
23+
width: 0;
24+
overflow: visible;
25+
-webkit-transition: width 200ms ease;
26+
-moz-transition: width 200ms ease;
27+
-ms-transition: width 200ms ease;
28+
-o-transition: width 200ms ease;
29+
transition: width 200ms ease;
30+
}
31+
#map > .ol-viewport.layer-list--expanded .layer-list {
32+
width: 300px;
33+
}
34+
35+
#map > .ol-viewport .layer-list__toggle.ol-control {
36+
top: 0;
37+
left: 100%;
38+
margin-top: 0.5em;
39+
margin-left: 0.5em;
40+
-webkit-transition: margin-left 200ms ease;
41+
-moz-transition: margin-left 200ms ease;
42+
-ms-transition: margin-left 200ms ease;
43+
-o-transition: margin-left 200ms ease;
44+
transition: margin-left 200ms ease;
45+
}
46+
#map > .ol-viewport.layer-list--expanded .layer-list__toggle.ol-control {
47+
margin-left: -2.5em;
48+
}
49+
50+
#map > .ol-viewport .layer-list__container {
51+
position: absolute;
52+
top: 0;
53+
right: 0;
54+
width: 300px;
55+
height: 100%;
56+
overflow: hidden;
57+
background-color: white;
58+
color: black;
59+
60+
display: flex;
61+
flex-direction: column;
62+
flex-wrap: nowrap;
63+
align-items: stretch;
64+
}
65+
66+
#map > .ol-viewport .layer-list__title {
67+
display: block;
68+
width: auto;
69+
height: auto;
70+
padding: 10px 40px;
71+
border-bottom: 1px solid rgba(33, 33, 33, 0.27);
72+
font-size: 24px;
73+
74+
flex-grow: 0;
75+
flex-shrink: 0;
76+
flex-basis: auto;
77+
}
78+
79+
#map > .ol-viewport .layer-list__body {
80+
padding: 10px;
81+
overflow-x: hidden;
82+
overflow-y: auto;
83+
84+
flex-grow: 1;
85+
flex-shrink: 1;
86+
}
87+
88+
#map > .ol-viewport .layer-list__item {
89+
min-height: 40px;
90+
font-size: 18px;
91+
background-color: transparent;
92+
}
93+
#map > .ol-viewport .layer-list__item:hover {
94+
background-color: rgba(33, 33, 33, 0.1);
95+
}
96+
97+
#map > .ol-viewport .layer-list__item-row {
98+
position: relative;
99+
height: 40px;
100+
101+
display: flex;
102+
flex-direction: row;
103+
flex-wrap: nowrap;
104+
align-items: center;
105+
}
106+
107+
#map > .ol-viewport .layer-list__item-row > * {
108+
margin: 0 5px;
109+
flex-grow: 0;
110+
flex-shrink: 0;
111+
}
112+
113+
#map > .ol-viewport .layer-list__item__label {
114+
white-space: nowrap;
115+
overflow: hidden;
116+
text-overflow: ellipsis;
117+
flex-grow: 1;
118+
flex-shrink: 1;
119+
}
120+
121+
#map > .ol-viewport .layer-list__item button {
122+
border: 0;
123+
border-radius: 50%;
124+
width: 30px;
125+
height: 30px;
126+
font-size: 20px;
127+
padding: 0;
128+
background-color: transparent;
129+
cursor: pointer;
130+
outline: none;
131+
}
132+
#map > .ol-viewport .layer-list__item button:hover {
133+
background-color: rgba(33, 33, 33, 0.2);
134+
}
135+
136+
#map > .ol-viewport .layer-list__item:not(.layer-list__item--hidden) .layer-list__item__action-hide {
137+
visibility: hidden;
138+
}
139+
#map > .ol-viewport .layer-list__item:not(.layer-list__item--hidden):hover .layer-list__item__action-hide {
140+
visibility: visible;
141+
color: rgba(33, 33, 33, 0.3);
142+
background-color: transparent;
143+
}
144+
#map > .ol-viewport .layer-list__item.layer-list__item--hidden .layer-list__item__action-hide {
145+
visibility: visible;
146+
}
147+
148+
#map > .ol-viewport .layer-list__item:not(:hover) .layer-list__item__action-demote,
149+
#map > .ol-viewport .layer-list__item:not(:hover) .layer-list__item__action-promote {
150+
display: none;
151+
}
152+
153+
#map > .ol-viewport .layer-list__item-row__label {
154+
font-size: 14px;
155+
}
156+
157+
#map > .ol-viewport .layer-list__item-row.row-opacity .layer-list__item-row__input {
158+
flex-grow: 1;
159+
flex-shrink: 1;
160+
}
161+
162+
#map > .ol-viewport .layer-list__item-row.row-opacity .layer-list__item-row__value-label {
163+
font-size: 14px;
164+
width: 50px;
165+
text-align: center;
166+
}
167+
168+
#map > .ol-viewport .layer-list__item .layer-list__item-row.row-opacity {
169+
background-color: white;
170+
margin-left: 20px;
171+
}
172+
173+
#map > .ol-viewport .layer-list__item button.layer-list__item__action-opacity {
174+
border-radius: 2px;
175+
}
176+
177+
#map > .ol-viewport .layer-list__item:not(.layer-list__item--opacity-control-expanded) .layer-list__item-row.row-opacity {
178+
display: none;
179+
}
180+
181+
#map > .ol-viewport .layer-list__item.layer-list__item--opacity-control-expanded .layer-list__item__action-opacity {
182+
opacity: 1 !important;
183+
background-color: rgba(33, 33, 33, 0.1);
184+
transform: translateX(0px) translateY(6px);
185+
}
186+
187+
#map > .ol-viewport .layer-list__item.layer-list__item--opacity-control-expanded .layer-list__item-row.row-opacity {
188+
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
189+
}
190+
191+
#map > .ol-viewport .ol-control.ol-zoom {
192+
top: 3em;
193+
left: 0.5em;
194+
}
195+
196+
197+
#notifications {
198+
position: absolute;
199+
z-index: 2;
200+
top: 0;
201+
right: 0;
202+
bottom: 0;
203+
left: 0;
204+
background-color: transparent;
205+
font-family: monospace;
206+
color: white;
207+
pointer-events: none;
208+
209+
display: -ms-flexbox;
210+
display: -webkit-flex;
211+
display: flex;
212+
-webkit-flex-direction: column;
213+
-ms-flex-direction: column;
214+
flex-direction: column;
215+
-webkit-flex-wrap: nowrap;
216+
-ms-flex-wrap: nowrap;
217+
flex-wrap: nowrap;
218+
-webkit-justify-content: center;
219+
-ms-flex-pack: center;
220+
justify-content: center;
221+
-webkit-align-content: center;
222+
-ms-flex-line-pack: center;
223+
align-content: center;
224+
-webkit-align-items: center;
225+
-ms-flex-align: center;
226+
align-items: center;
227+
}

‎index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>Visualize</title>
7+
<meta name="description" content="">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
10+
<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">
11+
<link rel="stylesheet" href="index.css" type="text/css">
12+
<script src="lib/babel-polyfill-6.9.0.js" type="text/javascript"></script>
13+
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
14+
<script src="http://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script>
15+
</head>
16+
<body>
17+
<div id="map"></div>
18+
<div id="notifications"></div>
19+
<!--<script src="https://rawgit.com/Zodiase/map-visualizer/master/src/viewer.js" type="text/javascript"></script>-->
20+
<script src="./lib/viewer.js" type="text/javascript">
21+
</script>
22+
<!--<script type="text/javascript">
23+
24+
(function(){
25+
'use strict';
26+
console.log("get here");
27+
var map = $('#map');
28+
var appendDiv = function(m) {
29+
m.append($('<div>'));
30+
31+
};
32+
appendDiv(map);
33+
var mybutton = function(){
34+
this.toggleButton_ = document.createElement('button');
35+
this.toggleButton_.className = 'material-icons';
36+
this.toggleButton_.title = 'Toggle layer list';
37+
this.toggleButton_.textContent = 'layers';
38+
};
39+
var $button = new mybutton();
40+
$('#map div').append($button.toggleButton_);
41+
console.log('get here');
42+
})();
43+
44+
45+
</script>-->
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)