Skip to content
Permalink
Browse files

improved the example (changed menu, added search, added styling for O…

…SM data fetched using tags)
  • Loading branch information...
kilsedar
kilsedar committed Aug 6, 2017
1 parent f2286c8 commit f62ac13a2b8edf29037d01eb5a5f7492d0f16391
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -7,116 +7,129 @@
<link rel="stylesheet" href="libraries/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="main.css">
<script src="aux.js"></script>
<script data-main="../require.conf" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
<!-- <script src="main.min.js"></script> -->
<!-- <script data-main="../require.conf" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script> -->
<script src="main.min.js"></script>
</head>
<body>
<div id="globe">
<canvas id="canvas">
Your browser does not support HTML5 Canvas.
</canvas>

<div class="lds-eclipse">
<div class="ldsEclipse">
<div></div>
</div>

<div id="menu_toLeft"><img src="images/left_arrow_white_40.png"></div>
<div id="menu_toRight"><img src="images/right_arrow_white_40.png"></div>
<div id="searchBox">
<input type="text" placeholder="go to..." id="searchText"/><button id="searchButton"><img src="images/magnifier_20.png"></button>
</div>

<div id="menuToLeft"><img src="images/left_arrow_white_40.png"></div>
<div id="menuToRight"><img src="images/right_arrow_white_40.png"></div>

<div id="menu">
<div id="osm_tag_type">
<p class="menu_title">Add OSM using tags.</p>

<div id="osm_tag_type_content">
<div id="osm_tag">
<p>Write down the tag (example: <i>amenity=restaurant</i>, <i>highway=yes</i>, <i>building=house</i>.)</p>
<input type="text" id="input_text_osm_tag" placeholder="OSM tag">
</div>
<div id ="menuTitle">
<button id="OSMTagTypeTitle">Add OSM using tags.</button>
<button id="OSMBuildingsTitle" class="hover">Add OSM buildings.</button>
</div>

<div id="osm_type">
<p>Check one or more of the OSM types below. The types checked should be valid for the tag specified for the OSM data. The tags and their types can be found at <a href="http://wiki.openstreetmap.org/wiki/Map_Features" target="_blank">map features of OSM</a>.</p>
<div class="checkbox">
<label><input type="checkbox" id="input_checkbox_osm_type_node" value="node">Node</label>
<label><input type="checkbox" id="input_checkbox_osm_type_way" value="way">Way</label>
<label><input type="checkbox" id="input_checkbox_osm_type_relation" value="relation">Relation</label>
</div>
<div id="OSMTagTypeContent">
<div id="colorTagType">
<p class="menuSubtitle">Color</p>
<p>Select the color:</p>
<div id="colorpickerTagType" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</div>

<p>Lastly, click twice on the globe to set the bounding box.</p>
<button id="button_go_osm_tag_type">Go!</button>
<div id="OSMTag">
<p class="menuSubtitle">Tag</p>
<p>Write down the tag (example: <i>amenity=restaurant</i>, <i>highway=yes</i>, <i>building=house</i>.)</p>
<input type="text" id="inputTextOSMTag" placeholder="OSM tag">
</div>

<div id="OSMType">
<p class="menuSubtitle">Type</p>
<p>Check one or more of the OSM types below. The types checked should be valid for the tag specified for the OSM data. The tags and their types can be found at <a href="http://wiki.openstreetmap.org/wiki/Map_Features" target="_blank">map features of OSM</a>.</p>
<div class="checkbox">
<label><input type="checkbox" id="inputCheckboxOSMTypeNode" value="node">Node</label>
<label><input type="checkbox" id="inputCheckboxOSMTypeWay" value="way">Way</label>
<label><input type="checkbox" id="inputCheckboxOSMTypeRelation" value="relation">Relation</label>
</div>
</div>

<p>Lastly, click twice on the globe to set the bounding box.</p>
<button id="buttonGoOSMTagType">Go!</button>
</div>

<div id="osm_buildings">
<p class="menu_title">Add OSM buildings.</p>
<div id="OSMBuildingsContent">
<div id="colorBuildings">
<p class="menuSubtitle">Color</p>
<p>Select the color:</p>
<div id="colorpickerBuildings" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</div>

<div id="osm_buildings_content">
<div id="color">
<p class="menu_subtitle">Color</p>
Select the color:
<div id="colorpicker" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<div id="extrude">
<div class="checkbox">
<label class="menuSubtitle"><input type="checkbox" id="inputCheckboxExtrude">Extrude</label>
</div>

<div id="extrude">
<div class="checkbox">
<label class="menu_subtitle"><input type="checkbox" id="input_checkbox_extrude">Extrude</label>
<div id="extrudeSettings">
<div class="radio">
<label><input type="radio" id="inputRadioAltitudeNumber" name="altitude" disabled>Set the same altitude in meters for all the buildings.</label>
</div>
<input type="text" id="inputTextAltitudeNumber" placeholder="altitude in meters" disabled>

<div id="extrude_settings">
<div class="radio">
<label><input type="radio" id="input_radio_altitude_number" name="altitude" disabled>Set the same altitude in meters for all the buildings.</label>
</div>
<input type="text" id="input_text_altitude_number" placeholder="altitude in meters" disabled>

<div class="radio">
<label><input type="radio" id="input_radio_altitude_osm" name="altitude" disabled>Use OSM height information for extrusion.</label>
</div>
<div class="radio">
<label><input type="radio" id="inputRadioAltitudeOSM" name="altitude" disabled>Use OSM height information for extrusion.</label>
</div>

<div class="radio">
<label><input type="radio" id="input_radio_altitude_property" name="altitude" disabled>Use a property that exists in the data.</label>
</div>
<input type="text" id="input_text_altitude_property" placeholder="a property name" disabled>
<div class="radio">
<label><input type="radio" id="inputRadioAltitudeProperty" name="altitude" disabled>Use a property that exists in the data.</label>
</div>
<input type="text" id="inputTextAltitudeProperty" placeholder="a property name" disabled>
</div>
</div>

<div id="heatmap">
<div class="checkbox">
<label class="menu_subtitle"><input type="checkbox" id="input_checkbox_heatmap" disabled>Heatmap</label>
</div>
<p>Enter the comma-seperated thresholds for building heights:</p>
<input type="text" id="input_text_heatmap_thresholds" placeholder="0, 30, 200" disabled>
<div id="heatmap">
<div class="checkbox">
<label class="menuSubtitle"><input type="checkbox" id="inputCheckboxHeatmap" disabled>Heatmap</label>
</div>
<p>Enter the comma-seperated thresholds for building heights:</p>
<input type="text" id="inputTextHeatmapThresholds" placeholder="0, 30, 200" disabled>
</div>

<div id="fetch_data">
<p class="menu_subtitle">How?</p>
<div id="fetchData">
<p class="menuSubtitle">How?</p>

<div id="byBoundingBox">
<div class="radio">
<label><input type="radio" id="input_radio_byBoundingBox" name="method">Click twice on the globe to set the bounding box.</label>
</div>
<div id="byBoundingBox">
<div class="radio">
<label><input type="radio" id="inputRadioByBoundingBox" name="method">Click twice on the globe to set the bounding box.</label>
</div>
</div>

<div id="byGeoJSONFile">
<div class="radio">
<label><input type="radio" id="input_radio_byGeoJSONFile" name="method">Upload a GeoJSON file.</label>
</div>
<!-- <input type="file" id="input_file"> -->
<div id="button_file_upload">
<span>Browse...</span>
<input type="file" id="input_file" disabled>
</div>
<div id="byGeoJSONData">
<div class="radio">
<label><input type="radio" id="inputRadioByGeoJSONData" name="method">Upload a GeoJSON file.</label>
</div>
<!-- <input type="file" id="inputFile"> -->
<div id="buttonFileUpload">
<span>Browse...</span>
<input type="file" id="inputFile" disabled>
</div>
</div>

<button id="button_go_osm_buildings">Go!</button>
</div>

<button id="buttonGoOSMBuildings">Go!</button>
</div>
</div>

<div id="legend"></div>
<!-- <div id="legend"></div> -->
</div>
</body>
</html>
@@ -17,21 +17,21 @@ body, input, button {
height: 100%;
background-color: rgba(17, 17, 17, 1.0);
}
#menu_toRight, #menu_toLeft {
#menuToRight, #menuToLeft {
position: absolute;
top: 10px;
height: 40px;
width: 40px;
background-color: rgba(33, 178, 166, 0.9);
border-radius: 0px 5px 5px 0px;
}
#menu_toLeft {
#menuToLeft {
left: 510px;
}
#menu_toRight {
#menuToRight {
left: -40px;
}
#menu_toLeft:hover, #menu_toRight:hover, .menu_title {
#menuToLeft:hover, #menuToRight:hover {
cursor: pointer;
}
#menu {
@@ -44,7 +44,6 @@ body, input, button {
background-color: rgba(33, 178, 166, 0.9);
border-radius: 5px 0px 5px 5px;
color: rgba(255, 255, 255, 1.0);
padding: 10px 10px 0px 10px;
overflow: auto;
text-align: justify;
}
@@ -53,11 +52,16 @@ body, input, button {
height: 10px;
display: block;
}
.menu_title {
#menuTitle {
padding: 0px 10px;
text-align: center;
}
#menuTitle button {
font-weight: bold;
font-size: 18px;
font-size: 16px;
width: 220px;
}
.menu_subtitle {
.menuSubtitle {
font-weight: bold !important;
}
input[type="text"] {
@@ -76,7 +80,7 @@ button {
text-align: center;
font-size: 16px;
}
#button_file_upload {
#buttonFileUpload {
position: relative;
overflow: hidden;
background-color: rgba(80, 83, 147, 1.0);
@@ -86,7 +90,7 @@ button {
width: 88px;
display: inline-block;
}
#button_file_upload input#input_file {
#buttonFileUpload input#inputFile {
position: absolute;
top: 0;
right: 0;
@@ -97,7 +101,7 @@ button {
filter: alpha(opacity=0);
font-size: 20px;
}
@keyframes lds-eclipse {
@keyframes ldsEclipse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
@@ -111,7 +115,7 @@ button {
transform: rotate(360deg);
}
}
@-webkit-keyframes lds-eclipse {
@-webkit-keyframes ldsEclipse {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
@@ -125,7 +129,7 @@ button {
transform: rotate(360deg);
}
}
.lds-eclipse {
.ldsEclipse {
position: absolute;
display: none;
left: calc(50vw - 40px);
@@ -135,9 +139,9 @@ button {
-webkit-transform: translate(-40px, -40px) scale(0.4) translate(40px, 40px);
transform: translate(-40px, -40px) scale(0.4) translate(40px, 40px);
}
.lds-eclipse div {
-webkit-animation: lds-eclipse 1s linear infinite;
animation: lds-eclipse 1s linear infinite;
.ldsEclipse div {
-webkit-animation: ldsEclipse 1s linear infinite;
animation: ldsEclipse 1s linear infinite;
width: 160px;
height: 160px;
top: 20px;
@@ -147,15 +151,43 @@ button {
-webkit-transform-origin: 80px 88px;
transform-origin: 80px 88px;
}
#osm_type, #osm_tag, #heatmap {
#OSMType, #OSMTag, #heatmap {
margin-bottom: 10px;
}
#osm_type label {
#OSMType label {
padding-right: 10px;
}
#osm_tag_type_content, #osm_buildings_content {
#OSMBuildingsContent {
display: none;
}
#osm_tag_type_content {
#OSMTagTypeContent, #OSMBuildingsContent {
padding: 10px 10px 0px 10px;
}
#OSMTagTypeTitle, #OSMBuildingsTitle {
border-radius: 0px 0px 10px 10px;
}
#OSMTagTypeTitle {
background-color: rgba(80, 83, 147, 1.0);
}
#OSMBuildingsTitle {
background-color: rgba(80, 83, 147, 0.3);
}
.hover:hover {
background-color: rgba(80, 83, 147, 0.6) !important;
}
#colorTagType {
padding-bottom: 10px;
}
#searchBox {
position: absolute;
padding: 10px;
right: 0px;
top: 0px;
}
#searchText {
margin-right: 10px;
}
#searchButton {
line-height: 1.0em;
padding: 5px;
}
Oops, something went wrong.

0 comments on commit f62ac13

Please sign in to comment.
You can’t perform that action at this time.