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:
However instead we get this:
and it loads really slowly
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.| <!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> |
| 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 |
| { | |
| "dependencies": { | |
| "topojson": "^1.6.19" | |
| } | |
| } |
