National Map Viewer - Revision history

Admin: /* GeoJSON to SVG */

2016-07-28T23:32:54Z

GeoJSON to SVG

← Older revision		Revision as of 23:32, 28 July 2016
Line 108:		Line 108:
	var projection = d3.geo.mercator()		var projection = d3.geo.mercator()
	.scale(100000) // aka, "zoom"		.scale(100000) // aka, "zoom"
	.center([37.78,~~-122~~.42]~~.reverse(~~)~~) // Google Maps gives the coordinates flipped.~~		.center([-122.318, 47.621])
	.translate([width / 2, height / 2])		.translate([width / 2, height / 2])
	</pre>		</pre>

Admin: /* GeoJSON to SVG */

2016-07-28T23:00:20Z

GeoJSON to SVG

← Older revision		Revision as of 23:00, 28 July 2016
Line 94:		Line 94:

	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).		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).



Line 99:		Line 104:


	From reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/]: we can see we'll need to use a D3 projection. Mercator projection is usually a good bet, unless we're near the poles. Here's what that D3 code will look like:

	<pre>		<pre>
	var projection = d3.geo.mercator()		var projection = d3.geo.mercator()
	.scale(100000) // aka, "zoom"		.scale(100000) // aka, "zoom"
	.center([37.78,-122.42].reverse()) // Google ~~Mapsgives~~ the coordinates flipped.		.center([37.78,-122.42].reverse()) // Google Maps gives the coordinates flipped.
	.translate([width / 2, height / 2])		.translate([width / 2, height / 2])
	</pre>		</pre>

Admin: /* GeoJSON to SVG */

2016-07-28T22:38:53Z

GeoJSON to SVG

← Older revision		Revision as of 22:38, 28 July 2016
Line 80:		Line 80:

	From here we have two options:		From here we have two options:
	* The older Bostock way: GeoJSON -> TopoJSON -> Shapefile https://bost.ocks.org/mike/map/		* <s>The older Bostock way: GeoJSON -> TopoJSON -> Shapefile https://bost.ocks.org/mike/map/</s> (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/		* 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)
	* Since we are not concerned with online maps ~~or loading data~~, we can ~~just cut~~ to the ~~chase and get an svg~~.
			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:

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

			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).





	From reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/]: we can see we'll need to use a D3 projection. Mercator projection is usually a good bet, unless we're near the poles. Here's what that D3 code will look like:		From reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/]: we can see we'll need to use a D3 projection. Mercator projection is usually a good bet, unless we're near the poles. Here's what that D3 code will look like:

Admin: /* GeoJSON to SVG */

2016-07-28T20:32:05Z

GeoJSON to SVG

← Older revision		Revision as of 20:32, 28 July 2016
Line 79:		Line 79:
	===GeoJSON to SVG===		===GeoJSON to SVG===

	From reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/], we ~~get a hint of the kind of code~~ we'll need to use ~~to convert the GeoJSON to (x,y) coordinates using~~ a projection. Here's ~~the~~ code ~~given~~:		From here we have two options:
			* The older Bostock way: GeoJSON -> TopoJSON -> Shapefile https://bost.ocks.org/mike/map/
			* The easier (less older) woodcut way: GeoJSON -> SVG http://setosa.io/blog/2014/08/10/woodcut-data-visualization/
			* Since we are not concerned with online maps or loading data, we can just cut to the chase and get an svg.

			From reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/]: we can see we'll need to use a D3 projection. Mercator projection is usually a good bet, unless we're near the poles. Here's what that D3 code will look like:

	<pre>		<pre>

Admin: /* Shapefiles to GeoJSON */

2016-07-28T20:24:39Z

Shapefiles to GeoJSON

← Older revision		Revision as of 20:24, 28 July 2016
Line 76:		Line 76:

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

			===GeoJSON to SVG===

			From reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/], we get a hint of the kind of code we'll need to use to convert the GeoJSON to (x,y) coordinates using a projection. Here's the code given:

			<pre>
			var projection = d3.geo.mercator()
			.scale(100000) // aka, "zoom"
			.center([37.78,-122.42].reverse()) // Google Mapsgives the coordinates flipped.
			.translate([width / 2, height / 2])
			</pre>

	=Flags=		=Flags=

Admin: /* Shapefiles to GeoJSON */

2016-07-28T20:22:44Z

Shapefiles to GeoJSON

← Older revision		Revision as of 20:22, 28 July 2016
Line 63:		Line 63:
	</pre>		</pre>

	This will install a utility called <code>ogr2ogr</code>, which we'll use to convert shapefiles to GeoJSON files.		This will install a utility called <code>ogr2ogr</code>, which we'll use to convert shapefiles to GeoJSON files. From reference [http://ben.balter.com/2013/06/26/how-to-convert-shapefiles-to-geojson-for-use-on-github/]:

	<pre>		<pre>
Line 69:		Line 69:
	</pre>		</pre>

	~~alternatively~~,		Alternatively, from reference [http://setosa.io/blog/2014/08/10/woodcut-data-visualization/]:

	<pre>		<pre>

Admin: /* Shapefiles to GeoJSON */

2016-07-28T20:22:15Z

Shapefiles to GeoJSON

← Older revision		Revision as of 20:22, 28 July 2016
Line 68:		Line 68:
	ogr2ogr -f GeoJSON -t_srs crs:84 Elev_Contour.geojson Elev_Contour.shp		ogr2ogr -f GeoJSON -t_srs crs:84 Elev_Contour.geojson Elev_Contour.shp
	</pre>		</pre>

			alternatively,

			<pre>
			ogr2ogr -f GeoJSON -t_srs EPSG:4326 Elev_Contour.geojson Elev_Contour.shp
			</pre>

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

	=Flags=		=Flags=

Admin: /* Shapefiles to GeoJSON */

2016-07-28T20:20:28Z

Shapefiles to GeoJSON

← Older revision		Revision as of 20:20, 28 July 2016
Line 55:		Line 55:
	We'll convert these shapefiles to something better for the web: GeoJSON		We'll convert these shapefiles to something better for the web: GeoJSON

	See http://ben.balter.com/2013/06/26/how-to-convert-shapefiles-to-geojson-for-use-on-github/		See this page, which talks about how to use ogr2ogr with which flags to get a Shapefile converted to a GeoJSON file: [http://ben.balter.com/2013/06/26/how-to-convert-shapefiles-to-geojson-for-use-on-github/]

	Install homebrew, then:		Install homebrew, then:
Line 68:		Line 68:
	ogr2ogr -f GeoJSON -t_srs crs:84 Elev_Contour.geojson Elev_Contour.shp		ogr2ogr -f GeoJSON -t_srs crs:84 Elev_Contour.geojson Elev_Contour.shp
	</pre>		</pre>


	=Flags=		=Flags=

Admin at 20:01, 28 July 2016

2016-07-28T20:01:02Z

← Older revision		Revision as of 20:01, 28 July 2016
Line 1:		Line 1:
			=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=		=3D Map Project=

Admin: /* D3 */

2016-07-28T19:49:12Z

← Older revision		Revision as of 19:49, 28 July 2016
Line 25:		Line 25:
	===D3===		===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 (~~latitude~~, ~~longitude~~) to (x, y).		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/		https://d3js.org/