SF Shoreline

Found some nice GIS files for the SF shoreline.

Using a neat tool called mapshaper, it appears these files generate a super nice map like this:

sf shoreline

However instead we get this:

sf shoreline

and it loads really slowly

Debug Steps

Looking at the GeoJSON outputted by the topojson.mesh call, the resulting coordinates seem to be super weird. We would expect things to be roughly in the ballpark of (-122, 37) but somehow we have things near (6,006,080, 2,123,063) instead.

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js" charset="utf-8"></script>
    <title>SF Shoreline</title>

    <style text="text/css">
.land {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
    </style>
  </head>
  <body>
    <script type="text/javascript">
var alcatrazCenter = [-122.42293660528958, 37.81796563882381];

var width = 800,
    height = 400;

var svg = d3.select('body')
  .append('svg')
    .attr('height', height)
    .attr('width', width);

d3.json('sfshore.json', function(error, sfshore) {
  if (error) { throw error; }

  // how to center the thing
  // https://groups.google.com/forum/#!topic/d3-js/lR7GGswygI8
  var projection = d3.geo.albers()
      .rotate([-alcatrazCenter[0], 0])
      .center([ 0, alcatrazCenter[1] ])
      .scale(1070 * 512)
      .translate([width / 2, height / 2])
      .precision(.1);

  var path = d3.geo.path()
    .projection(projection);

  // Using either of these does not give the expected result
  function exteriorBoundary(a, b) { return a === b; }
  function interiorBoundary(a, b) { return a !== b; }

  svg.append('path')
    .datum(topojson.mesh(sfshore, sfshore.objects.sfshore))
    .attr('class', 'land')
    .attr('d', path);
});
    </script>
  </body>
</html>

Makefile

topojson = node_modules/topojson/bin/topojson

$(topojson): package.json
	npm install
	touch -c $(topojson) || exit 1

sfshore/sfshore.shp:
	mkdir -p sfshore/
	# https://data.sfgov.org/Geographic-Locations-and-Boundaries/San-Francisco-Shoreline-Zipped-Shapefile-Format-/kj7y-jjpu
	curl -L https://data.sfgov.org/download/kj7y-jjpu/ZIP > sfshore.zip
	unzip sfshore.zip -d sfshore/
	touch -c sfhore/sfshore.shp || touch -c sfhore/sfshore.dbf || exit 1

sfshore/sfshore-fixed.shp: sfshore/sfshore.shp sfshore/sfshore.dbf
	ogr2ogr -f 'ESRI Shapefile' -t_srs wgs84 \
		sfshore/sfshore-fixed.shp \
		sfshore/sfshore.shp

sfshore.json: sfshore/sfshore-fixed.shp sfshore/sfshore-fixed.dbf $(topojson)
	$(topojson) \
		--out sfshore.json \
		-- sfshore=sfshore/sfshore-fixed.shp

package.json

{
  "dependencies": {
    "topojson": "^1.6.19"
  }
}