National Map Viewer
From charlesreid1
Contents
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).
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])