Skip to content

Commit dba2205

Browse files
eikeseikes
authored
Fix demos to work with FOSSGIS servers and use a common styling (#241)
1 parent 7b3eee8 commit dba2205

File tree

17 files changed

+1193
-1709
lines changed

17 files changed

+1193
-1709
lines changed

‎elevation/css/elevation.css

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,45 @@
1-
html {
1+
body {
22
width: 100%;
3-
height: 100%;
3+
height: 100vh;
4+
padding: 0;
5+
margin: 0;
6+
font-family: sans-serif;
47
}
58

6-
body {
7-
font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
8-
background-color: #eee;
9-
width: 100%;
9+
.container {
10+
display: flex;
11+
flex-direction: row;
1012
height: 100%;
11-
min-height: 600px;
13+
width: 100%;
14+
overflow: hidden;
1215
}
1316

14-
.container-fluid {
17+
#map-container {
1518
height: 100%;
19+
width: 75%;
1620
}
1721

1822
#map {
19-
height: calc( 100% - 300px );
23+
height: 100%;
2024
width: 100%;
21-
/* position: absolute;
22-
background: #fff;
23-
margin:0;*/
25+
}
26+
27+
#sidebar {
28+
height: 100%;
29+
padding: 10px;
30+
text-align: center;
31+
overflow: scroll;
32+
width: 25%;
33+
}
34+
35+
form {
36+
display: block;
37+
text-align: left;
38+
}
39+
40+
label {
41+
display: block;
42+
margin-top: 10px;
2443
}
2544

2645
.range-bar {
@@ -32,30 +51,30 @@ body {
3251
}
3352

3453
.axisLabel {
35-
position: absolute;
36-
text-align: center;
37-
font-size: 12px;
38-
font-weight: bold;
54+
position: absolute;
55+
text-align: center;
56+
font-size: 12px;
57+
font-weight: bold;
3958
}
4059

4160
.xaxisLabel {
42-
bottom: 10px;
43-
left: 0;
44-
right: 0;
61+
bottom: 10px;
62+
left: 0;
63+
right: 0;
4564
}
4665

4766
.yaxisLabel {
48-
top: 50%;
49-
left: 2px;
50-
font-weight: bold;
51-
transform: rotate(-90deg);
52-
-webkit-transform: rotate(-90deg);
53-
transform-origin: 0 0;
54-
-webkit-transform-origin: 0 0;
67+
top: 50%;
68+
left: 2px;
69+
font-weight: bold;
70+
transform: rotate(-90deg);
71+
-webkit-transform: rotate(-90deg);
72+
transform-origin: 0 0;
73+
-webkit-transform-origin: 0 0;
5574
}
5675

57-
58-
.legend table, .legend > div {
76+
.legend table,
77+
.legend>div {
5978
height: 35px !important;
6079
opacity: 1 !important;
6180
right: -55px;
@@ -80,24 +99,4 @@ body {
8099
-moz-box-shadow: 0px 1px 1px #ddd;
81100
-webkit-box-shadow: 0px 1px 1px #ddd;
82101
box-shadow: 0px 1px 2px #ddd;
83-
}
84-
85-
html.is-iframed-demo .container-fluid {
86-
padding-left: 0;
87-
padding-right: 0;
88-
}
89-
90-
@media (max-width: 767px) {
91-
html.is-iframed-demo #map {
92-
height: calc( 100% - 550px );
93-
}
94-
}
95-
96-
html.is-iframed-demo .not-map-part {
97-
max-width: 900px;
98-
margin: 0 auto;
99-
}
100-
101-
html.is-iframed-demo .hide-if-iframed {
102-
display: none;
103102
}

‎elevation/index.html

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,12 @@
11
<html class="elevation-widget" data-ng-app="elevation">
2+
23
<head>
3-
<meta charset="utf-8"/>
4+
<meta charset="utf-8" />
45
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
66
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
77
<link rel="stylesheet" href="css/elevation.css" />
88
<link rel="stylesheet" href="css/mapzen-common.css" />
99

10-
<script>
11-
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
12-
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
13-
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
14-
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
15-
16-
ga('create', 'UA-47035811-1', 'auto');
17-
ga('send', 'pageview');
18-
</script>
19-
2010
<script src="conf/environment.conf"></script>
2111
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
2212
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
@@ -27,41 +17,46 @@
2717
<script type="text/javascript" src="../flot/jquery.flot.canvas.js"></script>
2818
<script type="text/javascript" src="../flot/jquery.flot.stack.js"></script>
2919
</head>
20+
3021
<body>
31-
<div class="container-fluid" data-ng-controller="ElevationController">
32-
<div id="map"></div>
33-
<div class = "row not-map-part">
34-
<div id="graph_controls" class = "clear">
35-
<div id="controls" class = "col-sm-4 col-md-4">
36-
<div id="sampling_text"><h5>Sampling Distance: 50</h5></div>
37-
<input id="resample_distance" class = "range-bar" min="10" max="100" value="50" type="range"></input>
38-
<div class = "instruction">
22+
<div class="container" data-ng-controller="ElevationController">
23+
<div id="sidebar">
24+
<div>
25+
<img src="../routing/images/Valhalla.png" height="175" width="175" alt="Valhalla Logo">
26+
</div>
27+
<div id="controls">
28+
<div id="graph" style="width: 100%; height: 300px"></div>
29+
<div id="sampling_text">
30+
Sampling Distance: 50
31+
</div>
32+
<input id="resample_distance" class="range-bar" min="10" max="100" value="50" type="range"></input>
33+
<div class="instruction">
3934
<div>
40-
<button id="clearbtn" class ="btn btn-mapzen" type="button" style='margin-right: 1em;'>clear</button>
35+
<button id="clearbtn" type="button" style='margin-right: 1em;'>clear</button>
4136
<div id='permalink' style='display:inline-block;'></div>
4237
</div>
4338
</div>
44-
<p>
45-
The sampling distance controls how often other points than the ones you've clicked will be sampled.
46-
Clicking on a displayed marker will show its height and distance along the course of input points.
47-
<span class='hide-if-iframed'>Learn more about our <a href='https://mapzen.com/blog/moving-on-up/'>Mapzen Elevation Service</a> and the <a href='https://github.com/valhalla/valhalla-docs/blob/master/elevation/elevation-service.md'>API reference</a>.</span>
48-
</p>
39+
<p>
40+
The sampling distance controls how often other points than the ones you've clicked will be sampled.
41+
Clicking on a displayed marker will show its height and distance along the course of input points.
42+
</p>
43+
<h5><a href='https://valhalla.github.io/valhalla/api/elevation/api-reference/'>Elevation API docs</a></h5>
4944
</div>
5045
</div>
51-
<div class = "col-sm-8 col-md-8">
52-
<div id="graph" style = "width: 100%; height: 300px"></div></div>
46+
<div id="map-container">
47+
<div id="map"></div>
48+
</div>
5349
</div>
54-
</div>
5550
<script type="text/javascript" src="../routing/js/leaflet-hash.js"></script>
5651
<script type="text/javascript" src="js/elevation.js"></script>
5752
<script type="text/javascript" src="js/L.Elevation.Widget.js"></script>
5853

5954
<script>
6055
//hiking map with terrain
6156
var defaultMapLayer = L.tileLayer('https://b.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=f8f13e0070864ac3ad996f7bf7beb9af', {
62-
attribution : 'Maps &copy; <a href="https://www.thunderforest.com">Thunderforest</a> | Data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
57+
attribution: 'Maps &copy; <a href="https://www.thunderforest.com">Thunderforest</a> | Data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
6358
}), outdoors = L.tileLayer('https://b.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=f8f13e0070864ac3ad996f7bf7beb9af', {
64-
attribution : 'Maps &copy; <a href="https://www.thunderforest.com">Thunderforest</a> | Data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
59+
attribution: 'Maps &copy; <a href="https://www.thunderforest.com">Thunderforest</a> | Data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
6560
});
6661
</script>
6762

@@ -70,7 +65,8 @@
7065
if (window.self !== window.top) {
7166
document.documentElement.className += ' is-iframed-demo';
7267
}
73-
window.addEventListener("hashchange",function(){parent.postMessage(window.location.hash, "*")});
68+
window.addEventListener("hashchange", function () { parent.postMessage(window.location.hash, "*") });
7469
</script>
7570
</body>
76-
</html>
71+
72+
</html>

‎elevation/js/elevation.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
var app = angular.module('elevation', []);
22
var hash_params = L.Hash.parseHash(location.hash);
33

4-
serviceUrl = server.local;
4+
serviceUrl = server.prod;
55
token = prodToken;
66

7-
//??
87
app.run(function($rootScope) {
98
var hash_loc = hash_params ? hash_params : {
109
'center' : {
@@ -85,7 +84,7 @@ app.controller('ElevationController', function($scope, $rootScope, $sce, $http)
8584
var slider = document.getElementById('resample_distance');
8685
slider.min = low;
8786
slider.max = high;
88-
document.getElementById('sampling_text').innerHTML = '<h5>Sampling Distance: ' + slider.value + 'm</h5>';
87+
document.getElementById('sampling_text').innerHTML = 'Sampling Distance: ' + slider.value + 'm';
8988
return slider.value;
9089
};
9190

@@ -218,7 +217,7 @@ app.controller('ElevationController', function($scope, $rootScope, $sce, $http)
218217
});
219218
$("#resample_distance").on("input", function() {
220219
var slider = document.getElementById('resample_distance');
221-
document.getElementById('sampling_text').innerHTML = '<h5>Sampling Distance: ' + slider.value + 'm</h5>'
220+
document.getElementById('sampling_text').innerHTML = 'Sampling Distance: ' + slider.value + 'm'
222221
});
223222

224223
// Resize graph when viewport changes

0 commit comments

Comments
 (0)