Code Monkey home page Code Monkey logo

worldwindearth / explorer Goto Github PK

View Code? Open in Web Editor NEW
76.0 15.0 25.0 14.61 MB

WorldWindExplorer: A 3D virtual globe geo-browser app framework based on WorldWindJS, Bootstrap and KnockoutJS. Includes 3D globe and 2D map projections, imagery, terrain, markers, plus solar and celestial data.

Home Page: https://worldwind.earth/explorer

License: MIT License

CSS 3.76% HTML 0.67% JavaScript 95.57%
nasa worldwind explorer globe imagery terrain maps 3d earth weather-forecast

explorer's Introduction

WorldWindEarth | Explorer

An HTML5/JavaScript geo-browser built with the WorldWindJS library plus the KnockoutJS and Bootstrap libraries.

Overview

The WorldWind Explorer is a geospatial web application for visualizing the earth. It uses the NASA WebWorldWind SDK to display a 3D globe with terrain and imagery as well as 2D maps.

alt text

Features

  • Preconfigured imagery and map layers
  • Ability to add external WMS map servers for additional imagery
  • Layers can be sorted and opacity can be adjusted
  • A day/night and atmosphere layer for realistic visual effects
  • Shareable bookmark URLs that can be pasted into emails or saved in your browser
  • Search box to goto a location
  • Automatic time zone detection
  • Keyboard controls to pan, zoom and reset the globe
  • Markers that can be dragged and dropped on the globe
  • Weather Scouts that can be placed on the globe to obtain point weather forecasts from the National Weather Service (US-only)
  • Time widget that shows current time at the crosshairs plus sunrise, sunset and solar hour
  • Location widget that shows the coordinates and elevation at the crosshairs, plus the slope and aspect of the terrain and the solar azimuth angle
  • Collapsible layer manager and output/info panels
  • A time slider and controls to advance and retard the time used for day/night dispaly and weather forecasts
  • Setting are saved between sessions
  • Mobile/responsive layout

Objectives

  • Be a useful web application in its own right
  • Be an example of a NASA WebWorldWind SDK base project that is easy to fork and customize.

Open Source Credits

  • NASA WorldWind
  • Knockout
  • Bootstrap
  • JQuery
  • Dragula
  • SplitJS
  • Vis
  • Moment

Important Links


Usage Instructions

Globe Navigation

Mouse/Touch Controls

  • Zoom with your mouse wheel (pinch gesture for mobile devices).
  • Pan the globe by dragging the mouse or your finger.
  • Tilt the globe by dragging the right mouse button or your two fingers upward/downward.
  • Rotate the globe by dragging the right mouse button or your two fingers left/right.

View Controls

  • A set of view controls overlaid on the globe allow zoom, rotate, tilt, and vertical exaggeration.

Keyboard Controls

  • You must set the focus on the globe (click on the globe) for keyboard controls to work
  • Panning: use the up, down, left, right arrow key
  • Zooming: use the + and - minus keys to zoom
  • Holding a key down will repeat at a progressively faster rate

Time Widget

  • The application's date and time, are displayed in the body of the widget. These values are controlled by the time slider.
  • The sun icon that orbits the dial indicates the local solar hour angle. Solar noon is at the top of the dial, and midnight is at the bottom. When the sun icon is at the top of the dial, then the real sun is at its zenith. To see it in action, either move the time slider, or zoom out on the globe and move the crosshairs in an easterly or westerly direction. Note that the sun icon turns dark during nighttime hours.
  • The sunrise and sunset markers depict the solar hour angles for for sunrise and sunset and indicate the amount of sunlight received. They are relative to the application date/time and the geographic position. To see them in action, zoom out on the globe and then pan north and south to the poles, or rapidly advance the time slider.

Location Widget

  • The latitude, longitude and ground elevation are displayed for the point under the crosshairs.
  • The compass needle and compass rose rotate with your view of the globe and always point to true North.
  • The sky/ground background is an inclinometer that rotates to display the slope of the terrain under the crosshairs. To see it in action, zoom in on the globe to see some elevation and then move the crosshairs across the terrain.
  • The red diamond icon that orbits the compass indicates the aspect of the terrain under the crosshairs. Its position is relative to the compass points. To see it in action, zoom in on the globe to see a ridgeline and then move the crosshairs back and forth across the ridge.
  • The sun icon that orbits the compass indicates the solar azimuth angle. Its position is relative to compass points. To see it in action, either move the time slider, or zoom out on the globe and move the crosshairs in an easterly or westerly direction. When the sun icon and aspect icon are coincident then the maximum solar radiation is received by the terrain at that point. Note that the sun icon turns dark during nighttime hours.

Developer Notes

Debugging

  • In js/main.js set the window.DEBUG flag to true to put the app in debug mode.
  • The window.DEBUG flag controls whether to use the minified or debug versions of libraries.

explorer's People

Contributors

beak-man avatar combatvision avatar dependabot[bot] avatar emxsys avatar gpetrak avatar zglueck avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

explorer's Issues

Show local time in the Time Widget

Show the local time for the position under the cross hairs.

  • Add a 'Show local time' setting
  • Apply time zone offset extracted from Time Zones layer

Layer Manager UI improvements

Improve the layer list UI in the layer manager.

  • Display the count next to the category so user can have insight into the contents without having to expand the layer manager.
  • Use "badges" instead of buttons for show/hide, configuration, and zoom.
  • Add feedback to show the currently selected layer.

Add Day/Night/Atmosphere toggle to Settings tab

Add the ability to easily toggle the Day/Night & Atmosphere on/off. In nighttime regions the Day/Night layer occludes the underlying data--this must be made easy to defeat this issue.

  • This feature must be easy to use
  • The utility of this feature should be easy to discover

WebGL Error: RENDER WARNING: there is no texture bound to the unit 0

At startup, the following error repeats 256 times in the before being suppressed by Chrome:

[.CommandBufferContext.Offscreen-MainThread-04553D80]RENDER WARNING: there is no texture bound to the unit 0 (13:39:26:381 | warning, rendering)
  at root/index.html
WebGL: too many errors, no more errors will be reported to the console for this context. (13:39:26:648 | warning, rendering)
  at root/index.html

View controls and screen widgets are clipped in FireFox

In FireFox, screen image are clipped when you zoom in on the globe. In the following screenshot, note the View Controls and the Location and Time widgets have been clipped by a circular region. The circular region grows as you zoom in.

Screenshot

image

Note: This issue occurs also in the WebWorldWind SDK's Explorer app/demo.

Add an About tab to Info panel

Add an "About" tab to the Info panel that displays open-source credits, links and other useful information about the Explorer.

Show My Location feature

Add an option to show the user's location. This could be a optional, persistent marker in the Marker view or a setting.

Add a Location tab to the Info pane

Add a Location tab that displays relevant information about the current reticule (crosshairs) location and the last queried (right-click) location.

Candidates:

  • Lat/Lon and other coordinate systems
  • Elevation (ft and meters)
  • Administrative places
  • Sunrise/Sunset

Time Zone layer buttons don't work

The button next to the time zone layer does not seem to do anything, and the one next to it displays an opacity slider that also does not do anything. I also believe that adding the current time in each time zone as the user hovers over it would be a useful enhancement.

Help System

Add a help page that can be displayed in separate browser window. The help system should be accessible from a "?" help button on the main menu as well as from "i" info buttons elsewhere in the Explorer.

  • Establish documentation website linked to branding
  • Tooltips

Show layer's legend in the Layer dialog

Expand the functionality of the Layer settings dialog to show the layer's legend.

(As alternative, consider adding a Layer tab to the Info panel that shows the selected layer's legend and all the available metadata.)

Add Output panel to display ancillary information

Add an Output panel below the Globe panel to display ancillary information.

  • Output panel should be resizeable
  • Output panel should be collapsible

Use the Split.js library to create a splitter between the Globe and Output panels.

Adjustable and collapsible side panel(s)

Use the Split.js library to make the size of the left side panel adjustable.

  • Include a button for collapsing the side panel.
  • Include behavior to expand a collapsed side panel when it corresponding navbar button is clicked.

"Add Layer" feature

Provide the capability to add ad hoc layers to the globe
Include in the design, planned support for:

  • WMS Layers
  • WMTS Layers
  • Shapefiles
  • KML
  • GeoTiffs
  • Collada

Add Tool Tips

It is not very clear to a new user what the circular widgets on the bottom left and right are for, so I would recommend adding tool tips or something similar that can explain what everything is when the user hovers over them (for example, that the times on the bottom left are sunset and sunrise, what the little sun icon represents, and even that the forward and backward buttons change the time of day and the date).

Problems with the north and south poles

Navigating around the north and south poles yields "invalid date" on the bottom left widget instead of the sunrise and sunset times. Also, navigating all the way to the very north or the very south will cause the webpage to crash and become unresponsive.

Add single layer mode option to Base Maps

Add a single/multi layer mode option to base maps. When in single layer mode, clicking a new layer will automatically disable the existing layer. This saves bandwidth.

Suggest adding a checkbox for multi-layer mode in the category header.

Screen layout in Android tablet is too tall

In Chrome, the page size is larger than the screen size, and is truncated at the bottom, as can be seen in the following screenshot.

Screenshot

screenshot_20170213-052522
Bottom of page is truncated

[.Offscreen-For-WebGL-000001A2056308A0]RENDER WARNING

When loading an application in Chrome I get this error 256 times:
[.Offscreen-For-WebGL-000001A2056308A0]RENDER WARNING: there is no texture bound to the unit 0
WebGL: too many errors, no more errors will be reported to the console for this context.

I've seen similar issues, but none with the same error code (000001A2056308A0) as mine.

Add the D3.js - Data Driven Documents library

Add the D3.js Data Driven Documents library for use in the Output panel.

From the D3 website:

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

https://d3js.org/

Add Weather Scouts

Add support for point weather forecasts from the National Weather Service (NWS)

  • Add ability to place Weather Scouts on Globe. Weather scouts are placemarks with weather forecast data.
  • Add a Weather tab to manage Weather Scouts
  • Display weather data from selected Weather Scout in Output panel

Improve branding of application

The name "World Wind Explorer" can be misconstrued as an app for exploring the world's winds. It's not readily apparent in this context that "World Wind" is a NASA organization. The application/project should be rebranded such that the organization and name are distinguishable. Ideas:

  • WorldWind Explorer : concatenate "World Wind"
  • NASA WorldWind Explorer : add NASA to concatenated WorldWind
  • NASA WorldWind Explorer : leverage typography / colors / logos

Also, include credits to third party open-source projects in the README.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.