Giter VIP home page Giter VIP logo

osm-globe-demo's Introduction

OpenStreetMaps 3D Globe Web Demo

Are you tired of squinting at distorted maps, trying to fit a round peg in a square hole? Then buckle up for the journey of a lifetime with this OpenStreetMaps 3D globe demo!

You can view the demo here: https://munro.github.io/osm-globe-demo/

You could also use Mapbox: example, source code.

Animated 3D globe demo

Future Improvements (TODO)

  • Shader should use texture slices (not one giant texture).
  • Progressive load more detailed tiles. Preload textures at the max zoom level, then overlay lower quality images on them, and then overlay higher quality tiles as they arrive!
  • Prioritize loading tiles the user is currently viewing.
  • Prevent the loading of tiles not within the user's view.
  • Retry to load images if initial loading fails.
  • Fix the rotation speed, it would be cool if dragging keeps the same spot under the mouse (until it's off the globe obviously).
    • Rotating speed seems to be system dependent, some people it spins too fast, others it spins too slow, for me just right. :)
  • Fix the zoom speed, it's too fast as you get closer.
  • Mobile support (maybe it already does, idk).
  • There seems to be a bug in Chrome where some tiles don't get loaded.
  • Consider changing from semaphore to queue for possibly more efficient and smoother program execution.

Development

For development, Node.js is a prerequisite. Here is a step-by-step guide on how to download and install Node.js, then install the necessary dependencies, and finally start the demo project on different platforms.

And before you question on the ReactJS dependency, I'm lazy and this is the way I quickly start working on a web project in literally 9.545 seconds:

npx create-react-app osm-globe --template typescript
npm start

It sets up TypeScript, a web server, CSS compiler, static files, hot reloading, and even opens a web browser for me! I'm instantly productive.

For MacOS

  1. Install Node.js: The easiest way to install Node.js is via Homebrew. If you don't have Homebrew installed, install it first with this command in your terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. Then, install Node.js using Homebrew:
brew install node
  1. Clone the project from GitHub:
git clone https://github.com/munro/osm-globe-demo.git
cd osm-globe-demo
  1. Install the dependencies:
npm install
  1. Run the demo:
npm start

Now, you should be able to view the demo at http://localhost:3000/

For Linux

  1. Install Node.js: You can use a package manager like apt to install Node.js. Open your terminal and run:
sudo apt update
sudo apt install nodejs
  1. Follow the same steps from 3 to 5 as in MacOS instructions.

For Windows

  1. Install Node.js: Download the Node.js installer from the official website. Choose the version appropriate for your system (32-bit or 64-bit) and follow the prompts to install Node.js.
  2. Open Command Prompt and follow the same steps from 3 to 5 as in MacOS instructions.

License

MIT

osm-globe-demo's People

Contributors

munro avatar

Stargazers

Janez Pavel avatar

Watchers

 avatar  avatar

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.