National Map Viewer

About

The National Map Viewer is an online service provided by USGS that allows citizens to download high-quality topographical and geographical information.

3D Map Project

Ultimate goal: http://setosa.io/blog/2014/08/10/woodcut-data-visualization/

Start from Shapefiles. Use ogr2ogr (a utility that comes with GDAL) to convert Shapefiles to GeoJSON.

Use D3 to pick a projection and convert GeoJSON latitude/longitude to vector (x,y) and SVG format.

What You'll Need

You will need a few different pieces of software for each step. These are covered below.

GDAL

To convert Shapefiles into GeoJSON format, you can use a utility called ogr2ogr, which is installed along with the GDAL framework.

On a Mac, the simplest way to install this is not to download and install a dozen packages from the internet, but rather to use Homebrew:

brew install gdal

D3

The D3 (data driven documents) software library is a Javascript library that can be used to draw maps and do projections. It has software built in to do a mapping of (lat,long) -> (x,y).

https://d3js.org/

This is pretty straightforward to use: since it's Javascript it can be used on an HTML page.

You don't have to install anything, you just include the D3 library from your Javascript code, and you have everything at the ready.

Shapefiles

Getting Shapefile Data

To download elevation data in shapefile format:

Zoom into the area you want

Check "US Topo" and click Find Products

Next to each item, there are four links - the third one is "Download"

Download the shapefile data and unzip it

Shapefiles to GeoJSON

We'll convert these shapefiles to something better for the web: GeoJSON

See this page, which talks about how to use ogr2ogr with which flags to get a Shapefile converted to a GeoJSON file: [1]

Install homebrew, then:

brew install gdal

This will install a utility called ogr2ogr, which we'll use to convert shapefiles to GeoJSON files. From reference [2]:

ogr2ogr -f GeoJSON -t_srs crs:84 Elev_Contour.geojson Elev_Contour.shp

Alternatively, from reference [3]:

ogr2ogr -f GeoJSON -t_srs EPSG:4326 Elev_Contour.geojson Elev_Contour.shp

(The EPSG:4326 converts to lat/long coordinates by default.)

GeoJSON to SVG

From here we have two options:

• The older Bostock way: GeoJSON -> TopoJSON -> Shapefile https://bost.ocks.org/mike/map/ (not good because extra step and better for drawing maps on computer)
• The easier (less older) woodcut way: GeoJSON -> SVG http://setosa.io/blog/2014/08/10/woodcut-data-visualization/ (can just write a simple D3 script, and use SVG Crowbar to obtain the SVG image)

To get SVG Crowbar: http://nytimes.github.io/svg-crowbar/

Start by getting latitude/longitude from Google Maps. Look for the area of interest in Google Maps, and obtain the lat/long from the URL.

For example, here's the URL Capitol Hill neighborhood of Seattle:

https://www.google.com/maps/@47.6215334,-122.3185469,13z

From which we can see the lat/long should be set to 47.621/-122.318 (the latitude is 47.621, the longitude is -122.318).

We will create a D3 script in its own .js file. In this D3 file, we will need to create a D3 map projection (there are LOTS to choose from, but the Mercator projection is a good bet unless you're near the poles).

We'll tell the projection where to center the map (the latitude/longitude of our area of interest).

var projection = d3.geo.mercator()
  .scale(100000) // aka, "zoom"
  .center([-122.318, 47.621])
  .translate([width / 2, height / 2])