Git Product home page Git Product logo

osmwebgltests's Introduction

OSMWebGLTests

Testing the possibilities to show 3D OpenStreetMap Maps in browsers with WebGL.

See the example in http://rbejar.github.io/OSMWebGLTests/index.html (it takes some time to load!).

For now, I have just followed the instructions in: https://www.youtube.com/watch?v=S6LbKH6NnZU

Quickly summarized:

  1. Go to openstreetmap.org, choose an area (better if it is small!) and export the data as OSM XML Data.
  2. Go to osm2world.org, download the latest build (binary). Unzip it.
  3. In a terminal, run $./osm2world.sh -i ../map.osm -o ../map.obj (Change it according to your paths; -i is the input file, -o is the name of the output file). It will give some Java exceptions. Some times it may not finish because of them. A quick "solution" is downloading a slightly different map area and crossing your fingers.
  4. Go to the github of three.js, and download utils/converters/obj/convert_obj_three.py.
  5. Transform the obj generated in step 3. The command is: $python convert_obj_three.py -i map.obj -o map.js
  6. Finally, you can use this gist to know how to create a web that loads and paints your data in 3D in a WebGL-compatible web browser: https://gist.github.com/roman01la/5794160 (Obitcontrols.js can be found in the three.js github repo (in examples) and three.min.js too (in build).

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.