Giter Club home page Giter Club logo

nasser85 / spaceview-earth Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 991 KB

This app uses the Google Maps API in tandem with the NASA API to fetch the most recent LANDSAT 8 image of any location (address, city, state, country, landmark, etc.). The LANDSAT 8 satellite takes pictures of the entire earth every 16 days.

HTML 4.12% CSS 12.79% JavaScript 83.08%
nasa-api nasa-data react google google-maps-api google-maps reactjs landsat-8 landsat-data

spaceview-earth's Introduction

Spaceview Earth - Nasa Imagery App

This app uses the Google Maps API in tandem with the NASA API to fetch the most recent LANDSAT 8 image of any location (address, city, state, country, landmark, etc.). The LANDSAT 8 satellite takes pictures of the entire earth every 16 days.

For more information check out Nasa's Api Docs on the Earth Endpoint

Screenshots

Recent LANDSAT 8 capture of Accra

Recent LANDSAT 8 capture of Lima

UI/UX Example

Demo

Check out a demo of the app here

spaceview-earth's People

Contributors

nasser85 avatar

Watchers

 avatar  avatar

spaceview-earth's Issues

Create IE alternative to fetch api

No release of IE supports the fetch api. We use this api in both class MapFactory and class EarthFactory. We should consider employing XMLHttpRequest in a polyfill.

Resolve CORS Issue

Currently the NASA API is fetching an insecure resource. This throws an error in the console as this violates CORS protocol.

Allow multi-faceted image cache refresh

Currently, when a user clicks on the "View Nasa Images from this Location" link in the info window of a marker, one of two things happens:

  • If a location and its image(s) are not present in the GoogleMap component cache - the latitude and longitude of the location are passed along to the NASA Earth Imagery API where a GET request is made for url link to the image. This image is not only displayed in the image window modal but the url is also saved alongside the location in the cache for future access.
  • If a location and its image(s) are present in the GoogleMap component cache - the relevant url is accessed from the cache and displayed.

The problem here is that the url comes with a token attached to it that has an expiration. As a result, it is possible for someone to access a location that exists in the cache that pulls up an image with a broken src. Therefore we would have to build a robust set of refresh cache functions or a class to refetch urls and update the cache in the event that a image token has expired.

GoogleMap component rendering twice

When a user enters a search query, it triggers the zoom to location process twice. This could be a problem with the render() method in <GoogleMap /> component.

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.