Small test of D3 API used to map a geojson with cartesian coordinates (instead of lat-lon's). Uses an override of standard D3 geo projection behaviour: don't perform a full projection and resampling, but only a 1st order translation and scaling to transform real-world XY-coordinates into SVG screen coordinates...
Last active
December 19, 2015 09:19
-
-
Save kobben/5932448 to your computer and use it in GitHub Desktop.
Map using GeoJSON with cartesian coordinates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .boundary { | |
| fill: #eee; | |
| stroke: #999; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var SVGwidth = 400, SVGheight = 400; | |
| // RD=RijksDriehoekstelsel=Dutch national projection system bounds: | |
| var minx = 13600; | |
| var miny = 306900; | |
| var maxx = 278000; | |
| var maxy = 619300; | |
| // use RD limits to calculate scale and bounds needed for | |
| // affine transformation of RD coordinates to screen coordinates | |
| var height = maxy - miny; | |
| var width = maxx - minx; | |
| var scale = Math.min(SVGheight,SVGwidth)/Math.max(height,width); | |
| var y_offset = (maxy * scale); | |
| var x_offset = -(minx * scale); | |
| var svg = d3.select("body").append("svg") | |
| .attr("id", "theMapSVG") | |
| .attr("width", SVGwidth) | |
| .attr("height", SVGheight) | |
| ; | |
| // AffineTransformation as a basic pseudo-projection of RD coords to screen coords | |
| // http://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations | |
| function AffineTransformation(a, b, c, d, tx, ty) { | |
| return { | |
| //overrides normal D3 projection stream (to avoid adaptive sampling) | |
| stream: function(output) { | |
| return { | |
| point: function(x, y) { output.point(a * x + b * y + tx, c * x + d * y + ty); }, | |
| sphere: function() { output.sphere(); }, | |
| lineStart: function() { output.lineStart(); }, | |
| lineEnd: function() { output.lineEnd(); }, | |
| polygonStart: function() { output.polygonStart(); }, | |
| polygonEnd: function() { output.polygonEnd(); } | |
| }; | |
| } | |
| }; | |
| } | |
| var path = d3.geo.path().projection(AffineTransformation(scale, 0, 0, -scale, x_offset, y_offset)); | |
| d3.json("test.json", function(json) { | |
| // test.json = small map of Netherlands (using RD coords) | |
| nl=json; | |
| svg.selectAll("path") | |
| .data(nl.features) | |
| .enter().append("path") | |
| .attr("class", "boundary") | |
| .attr("d", path) | |
| ; | |
| }); | |
| d3.select(self.frameElement).style("height", SVGheight + "px"); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment