Code Monkey home page Code Monkey logo

heightmapper's Introduction

heightmapper

http://tangrams.github.io/heightmapper

Heightmapper is an interactive grayscale heightmap browser, which can generate heightmaps for use in 3D applications. By default, it "auto-exposes" the display so that the highest visible elevation in the current view will be white, and the lowest will be black.

Uses Mapzen's global elevation service.

screen shot 2016-07-19 at 11 17 17 am

Usage

  • Uncheck "auto-expose" to set min and max height levels manually.
  • Check "show lines" and "show labels" to see more map data.
  • Click "export" to open the current view as an image in a new tab - "Save As" to save the image to disk.
  • Import the resulting image as a "displacement map" in a 3D application to generate a 3D model of the terrain. (Here's a tutorial for doing this in Blender.)
  • The "z:x scale factor" describes how "high" the current view is, on the z-axis, in terms of how wide the current view is on the x-axis. Multiplying this scale factor by the width of a 3D mesh in units x will tell you how high in units z your mesh should be after displacement in order to be true-scale.
  • Press the "h" key to toggle UI visibility.

Rendering

  • Render Multiplier (1 - 8) will split the view up into that number of cells on the x and y axis. i.e., a Render Multiplier of 4 will render a 4x4 grid.
  • Render Name is the name of the output file you want.
  • render will automatically zoom to each area and stitch together a high quality render, then save the render as {render name}.png to your downloads.

This comes with a gotcha: the map must take up the entire view (no whitespace above or below) for the renderer to work properly.

Do not resize the view or move the map during render as this will interfere with the render process.

Todo

  • add a GeoTIFF export option which includes metadata
  • fix Render Multiplier issue when the view bounds exceeds the tile latitude limit.
  • Super Extra Credit: further export options including lat/lon bounding boxes, country/boundary masking using OSM vector tiles

To run locally:

Start a web server in the repo's directory:

python -m SimpleHTTPServer 8000

If that doesn't work, try:

python -m http.server 8000

If running this produces CORS errors on your local machine, try:

python run-server.py

or

python3 run-server.py (on mac)

Then navigate to: http://localhost:8000

heightmapper's People

Contributors

meetar avatar andrewmcshane avatar bcamper 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.