Skip to content
Permalink
Browse files

enabled fetching data by two clicks (setting bounding box)

  • Loading branch information...
kilsedar
kilsedar committed Aug 4, 2017
1 parent d09d632 commit 9e13bfd856b38d19df716925288206232f9ac8f2
Showing with 86 additions and 83 deletions.
  1. +1 −0 .gitignore
  2. +2 −14 example/index.html
  3. +82 −68 example/main.js
  4. +1 −1 example/main.min.js
@@ -8,3 +8,4 @@ src/OSMBuildingLayer_1.js
src/GeoJSONParserTriangulation_0.js
src/GeoJSONParserTriangulation_1.js
example/data/prin*
example/test.js
@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- NOTE: Most Web World Wind examples use jQuery, Bootstrap and RequireJS but those technologies are NOT required by Web World Wind. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="libraries/bootstrap-3.3.7-dist/css/bootstrap.min.css">
@@ -22,6 +21,7 @@
</div>

<div id="menu_a"><img src="images/menu_white_scaled.png"></div>

<div id="menu">
<div id="osm_tag">
<p class="menu_title">Add OSM using tags.</p>
@@ -75,23 +75,11 @@

<div id="fetch_data">
<p class="menu_subtitle">How?</p>
<!-- <div class="radio">
<label><input type="radio" id="input_radio_byBoundingBox" name="method">Draw a bounding box.</label>
</div> -->

<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="bounding_box">
<div id="bounding_box_lat">
<label for="min_lat">Minimum latitude: </label><input type="text" id="min_lat" value="9.45" disabled>
<label for="max_lat">Maximum latitude: </label><input type="text" id="max_lat" value="9.50" disabled>
</div>
<div id="bounding_box_lon">
<label for="min_lon">Minimum longitude: </label><input type="text" id="min_lon" value="45.48" disabled>
<label for="max_lon">Maximum longitude: </label><input type="text" id="max_lon" value="45.50" disabled>
</div>
</div> -->
</div>

<div id="byGeoJSONFile">
@@ -1,18 +1,21 @@
define(['libraries/WebWorldWind/src/WorldWind',
'libraries/WebWorldWind/src/gesture/ClickRecognizer',
'libraries/WebWorldWind/src/gesture/TapRecognizer',
'libraries/WebWorldWind/src/shapes/SurfacePolygon',
'src/OSMBuildingLayer',
'src/OSMTBuildingLayer',
'jquery',
'colorpicker'],
function (WorldWind, OSMBuildingLayer, OSMTBuildingLayer, $, colorpicker) {
function (WorldWind, ClickRecognizer, TapRecognizer, SurfacePolygon, OSMBuildingLayer, OSMTBuildingLayer, $, colorpicker) {
"use strict";

WorldWind.Logger.setLoggingLevel(WorldWind.Logger.LEVEL_ERROR);
WorldWind.configuration.baseUrl = "../libraries/WebWorldWind/";

/** Create the WorldWindow. **/
/** create the WorldWindow **/
var worldWindow = new WorldWind.WorldWindow("canvas");

/** Add imagery layers. **/
/** add imagery layers **/
worldWindow.addLayer(new WorldWind.BMNGOneImageLayer());
worldWindow.addLayer(new WorldWind.BingAerialLayer());
// var bingAerialWithLabels = new WorldWind.BingAerialWithLabelsLayer();
@@ -27,40 +30,6 @@ define(['libraries/WebWorldWind/src/WorldWind',
atmosphereLayer.lightLocation = WorldWind.SunPosition.getAsGeographicLocation(starFieldLayer.time);
worldWindow.addLayer(atmosphereLayer); */


/* // var source = {type: "boundingBox", coordinates: [-74.0232, 40.6998, -73.97, 40.74]}; // New York (big)
// var source = {type: "boundingBox", coordinates: [-74.03, 40.70, -73.99, 40.72]}; // New York (small)
// var source = {type: "boundingBox", coordinates: [9.04284, 45.3871, 9.27791, 45.536]}; // Milan (PRIN & big)
// var source = {type: "boundingBox", coordinates: [9.05, 45.45, 9.10, 45.50]}; // Milan (medium)
// var source = {type: "boundingBox", coordinates: [9.45, 45.48, 9.50, 45.50]}; // Milan (small)
// var source = {type: "boundingBox", coordinates: [9.1705, 45.4557, 9.2021, 45.4735]}; // Milan (center)
// var source = {type: "boundingBox", coordinates: [9.2, 45.48, 9.21, 45.49]}; // Milan (buggy region - nodes)
// var source = {type: "boundingBox", coordinates: [9.48, 45.18, 9.53, 45.19]}; // region tested in GRASS
// var source = {type: "GeoJSONFile", path: "data/prin_smaller_med.geojson"};
// var source = {type: "GeoJSONData", data: {"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[37.0458984375,40.85537053192494],[36.639404296875,40.3130432088809],[36.881103515625,39.95185892663005],[37.056884765625,40.23760536584024],[37.55126953125,40.772221877329024],[37.0458984375,40.85537053192494]]]}}]}};
var source = {type: "GeoJSONFile", path: "data/newYork.geojson"};
var configuration = {
// interiorColor: new WorldWind.Color(0.1, 0.7, 0.8, 1.0),
// interiorColor: new WorldWind.Color(0.02, 0.2, 0.7, 1.0),
interiorColor: new WorldWind.Color(1.0, 0.1, 0.1, 1.0),
applyLighting: true,
extrude: true,
heatmap: {enabled: true, thresholds: [0, 10, 30, 50, 900]},
// altitude: {type: "number", value: 100},
altitude: {type: "osm"},
// altitude: {type: "property", value: "height_median"},
altitudeMode: WorldWind.RELATIVE_TO_GROUND
};
var test = new OSMBuildingLayer(worldWindow, configuration, source);
test.add();
// test.boundingBox = [9.15651, 45.44919, 9.20246, 45.48449]; // prin_small_med.geojson
// test.boundingBox = [9.18307, 45.46073, 9.20421, 45.46957]; // prin_smaller_med.geojson
test.boundingBox = [-74.03, 40.70, -73.99, 40.72]; // newYork.geojson
test.zoom(); */


$(function(){
$("#menu_a").click(function() {
$("#menu").fadeToggle("fast", "linear");
@@ -103,19 +72,82 @@ define(['libraries/WebWorldWind/src/WorldWind',
});

$("#fetch_data input[type='radio']").change(function() {
if($("#input_radio_byBoundingBox").is(":checked")) {
// $("#bounding_box input[type='text']").prop("disabled", false);
if($("#input_radio_byBoundingBox").is(":checked"))
$("#input_file").prop("disabled", true);
}
else {
// $("#bounding_box input[type='text']").prop("disabled", true);
else
$("#input_file").prop("disabled", false);
}
});


/** used in the case bounding box is set clicking twice on the globe **/
var position, clickCoordinates = {latitude: [], longitude: []}, boundingBoxLayer = new WorldWind.RenderableLayer();
worldWindow.addLayer(boundingBoxLayer);

/** used in the case a file is uploaded **/
var data = {};

var source = {}, configuration = {
interiorColor: new WorldWind.Color(1.0, 1.0, 1.0, 1.0),
applyLighting: true,
extrude: false,
heatmap: {},
altitude: {},
altitudeMode: WorldWind.RELATIVE_TO_GROUND
}

var OSMBuildings = new OSMBuildingLayer(worldWindow, configuration, source);


function handleClick (recognizer) {
var x = recognizer.clientX, y = recognizer.clientY;
var pickList = worldWindow.pick(worldWindow.canvasCoordinates(x, y));
if (pickList.objects.length == 1 && pickList.objects[0].isTerrain) {
var position = pickList.objects[0].position;

if ($('#input_radio_byBoundingBox').prop('checked')) {

clickCoordinates.latitude.push(position.latitude);
clickCoordinates.longitude.push(position.longitude);
// console.log(clickCoordinates);

if (clickCoordinates.latitude.length == 2 && clickCoordinates.longitude.length == 2) {

boundingBoxLayer.removeAllRenderables();

var latMin = Math.min(clickCoordinates.latitude[0], clickCoordinates.latitude[1]);
var latMax = Math.max(clickCoordinates.latitude[0], clickCoordinates.latitude[1]);
var longMin = Math.min(clickCoordinates.longitude[0], clickCoordinates.longitude[1]);
var longMax = Math.max(clickCoordinates.longitude[0], clickCoordinates.longitude[1]);

// console.log(latMin + ", " + latMax + ", " + longMin + ", " + longMax);

var boundingBox = [new WorldWind.Location(latMin, longMin), new WorldWind.Location(latMax, longMin), new WorldWind.Location(latMax, longMax), new WorldWind.Location(latMin, longMax)];

var attributes = new WorldWind.ShapeAttributes(null);
attributes.outlineColor = WorldWind.Color.WHITE;
attributes.outlineWidth = 2.0;
attributes.interiorColor = new WorldWind.Color(1, 1, 1, 0.1);

var boundingBoxShape = new WorldWind.SurfacePolygon(boundingBox, attributes);

boundingBoxLayer.addRenderable(boundingBoxShape);


OSMBuildings.source = {type: "boundingBox", coordinates: [longMin, latMin, longMax, latMax]};
OSMBuildings.boundingBox = [longMin, latMin, longMax, latMax];


clickCoordinates = {latitude: [], longitude: []};
// console.log(clickCoordinates);
}
}
}
}

var clickRecognizer = new WorldWind.ClickRecognizer(worldWindow.canvas, handleClick);
var tapRecognizer = new WorldWind.TapRecognizer(worldWindow.canvas, handleClick);


$("#input_file").change(function(event) {
$(".lds-eclipse").css("display", "block");

@@ -124,6 +156,9 @@ define(['libraries/WebWorldWind/src/WorldWind',
reader.onload = function(event) {
data = event.target.result;

OSMBuildings.source = {type: "GeoJSONData", data: JSON.parse(data)};
OSMBuildings.calculateBoundingBox(JSON.parse(data));

$(".lds-eclipse").css("display", "none");

if (!isJSON(data)){
@@ -136,16 +171,7 @@ define(['libraries/WebWorldWind/src/WorldWind',

$("#button_go_osm_buildings").click(function() {

console.log("clicked on 'button_go_osm_buildings'");

var source = {}, configuration = {
interiorColor: new WorldWind.Color(1.0, 1.0, 1.0, 1.0),
applyLighting: true,
extrude: false,
heatmap: {},
altitude: {},
altitudeMode: WorldWind.RELATIVE_TO_GROUND
}
// console.log("clicked on 'button_go_osm_buildings'");

/** color settings **/
var rgba = $("#colorpicker").colorpicker("getValue");
@@ -183,22 +209,10 @@ define(['libraries/WebWorldWind/src/WorldWind',
}
}

var test = new OSMBuildingLayer(worldWindow, configuration, source);

if ($("#input_radio_byBoundingBox").is(":checked")) {
test.source = {type: "boundingBox", coordinates: [5, 5, 8, 8]}; // temporary
// test.source = {type: "boundingBox", coordinates: [parseFloat($('#min_lat').val()), parseFloat($('#min_lon').val()), parseFloat($('#max_lat').val()), parseFloat($('#max_lon').val())]};
test.boundingBox = [5, 5, 8, 8]; //temporary
// test.boundingBox = [parseFloat($('#min_lat').val()), parseFloat($('#min_lon').val()), parseFloat($('#max_lat').val()), parseFloat($('#max_lon').val())];
}
else if ($("#input_radio_byGeoJSONFile").is(":checked")) {
test.source = {type: "GeoJSONData", data: JSON.parse(data)};
// console.log(JSON.stringify(test._source) + ", " + JSON.stringify(test.source));
test.calculateBoundingBox(JSON.parse(data));
}

test.zoom();
test.add();
OSMBuildings.zoom();
OSMBuildings.add();
boundingBoxLayer.removeAllRenderables();

// console.log("configuration -> " + JSON.stringify(configuration));
});

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 9e13bfd

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