Skip to content
Permalink
Browse files

improved the example by enabling fetching any OSM data

  • Loading branch information...
kilsedar
kilsedar committed Aug 6, 2017
1 parent db046f0 commit f2286c8a4d1a9440e36d4b97bd48622261e7a087
Showing with 365 additions and 231 deletions.
  1. +69 −52 example/index.html
  2. +15 −5 example/main.css
  3. +87 −20 example/main.js
  4. +5 −134 src/OSMBuildingLayer.js
  5. +187 −18 src/OSMLayer.js
  6. +2 −2 src/OSMTBuildingLayer.js
@@ -7,8 +7,8 @@
<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">
@@ -24,78 +24,95 @@
<div id="menu_toRight"><img src="images/right_arrow_white_40.png"></div>

<div id="menu">
<div id="osm_tag">
<div id="osm_tag_type">
<p class="menu_title">Add OSM using tags.</p>
<p>Write down the tag (example: <i>amenity=restaurant</i>, <i>highway=yes</i>, <i>building=house</i>; more information at <a href="http://wiki.openstreetmap.org/wiki/Map_Features" target="_blank">map features of OSM</a>) and draw a rectangle on the globe.<br></p>
<input type="text" id="input_osm_tag" placeholder="OSM tag">
<button id="button_go_osm_tag">Go!</button>
</div>

<hr>

<div id="osm_buildings">
<p class="menu_title">Add OSM buildings.</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="color">
<p class="menu_subtitle">Color</p>
<p>Select the color:</p>
<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 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>

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

<div id="extrude">
<div class="checkbox">
<label class="menu_subtitle"><input type="checkbox" id="input_checkbox_extrude">Extrude</label>
</div>
<div id="osm_buildings">
<p class="menu_title">Add OSM buildings.</p>

<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 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>
<input type="text" id="input_text_altitude_number" placeholder="altitude in meters" disabled>
</div>

<div class="radio">
<label><input type="radio" id="input_radio_altitude_osm" name="altitude" disabled>Use OSM height information for extrusion.</label>
<div id="extrude">
<div class="checkbox">
<label class="menu_subtitle"><input type="checkbox" id="input_checkbox_extrude">Extrude</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 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="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>
<input type="text" id="input_text_altitude_property" 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 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>
<p>Enter the comma-seperated thresholds for building heights: <input type="text" id="input_text_heatmap_thresholds" placeholder="0, 30, 200" disabled></p>
</div>

<div id="fetch_data">
<p class="menu_subtitle">How?</p>
<div id="fetch_data">
<p class="menu_subtitle">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 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>
</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 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>
</div>
</div>

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

@@ -31,7 +31,7 @@ body, input, button {
#menu_toRight {
left: -40px;
}
#menu_toLeft:hover, #menu_toRight:hover {
#menu_toLeft:hover, #menu_toRight:hover, .menu_title {
cursor: pointer;
}
#menu {
@@ -40,12 +40,13 @@ body, input, button {
left: 0px;
margin: 10px;
max-height: calc(100vh - 100px);
max-width: 500px;
width: 500px;
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;
}
#menu:after {
content: "";
@@ -59,9 +60,6 @@ body, input, button {
.menu_subtitle {
font-weight: bold !important;
}
#osm_tag {
text-align: justify;
}
input[type="text"] {
border-radius: 3px;
color: rgba(0, 0, 0, 1.0);
@@ -149,3 +147,15 @@ button {
-webkit-transform-origin: 80px 88px;
transform-origin: 80px 88px;
}
#osm_type, #osm_tag, #heatmap {
margin-bottom: 10px;
}
#osm_type label {
padding-right: 10px;
}
#osm_tag_type_content, #osm_buildings_content {
display: none;
}
#osm_tag_type_content {
padding-bottom: 10px;
}
Oops, something went wrong.

0 comments on commit f2286c8

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