Translating GeoJSON Data into SVG Paths

Translating GeoJSON data into Scalable Vector Graphics (SVG) paths is a fundamental technique for rendering interactive web maps. This process converts spherical geographic coordinates (longitude and latitude) into flat screen coordinates (X and Y pixels) and formats them into standard SVG path commands. By breaking down the workflow into geometry parsing, mathematical projection, screen transformation, and path string generation, developers can render complex spatial boundaries directly in the browser.

1. Parsing the GeoJSON Geometry

GeoJSON structures spatial data into standardized JSON formats representing geometries such as Point, LineString, Polygon, MultiLineString, and MultiPolygon. Each geometry type contains an array of coordinate pairs:

• LineString: A one-dimensional array of [longitude, latitude] pairs.
• Polygon: An array of linear rings (closed loops), where the first ring defines the exterior boundary and subsequent rings define interior cutouts or holes.
• MultiPolygon: An array of polygon coordinate structures.

The translation process begins by parsing these nested coordinate arrays into readable coordinate sequences.

2. Applying a Map Projection

Earth coordinates are defined on a three-dimensional curved surface (usually the WGS 84 ellipsoid), while SVG operates on a two-dimensional Cartesian plane.

To convert angular coordinates into planar coordinates: * A mathematical projection algorithm (such as Mercator, Albers Equal Area, or Equirectangular) maps the [longitude, latitude] values to intermediate planar coordinates [x, y]. * The projection handles spherical distortion and scales the geographic features based on the chosen center point and zoom level.

3. Scaling and Screen Coordinate Transformation

Once the points are projected, they must be scaled and aligned to fit the dimensions of the target SVG container (<svg> viewport):

• Axis Inversion: In geographic and mathematical coordinate systems, the Y-axis increases upwards (North). In computer graphics and SVG viewports, the Y-axis increases downwards. The transformation must invert the Y values: \[\text{Screen Y} = \text{Height} - \text{Projected Y}\]
• Translation and Scaling: Coordinates are shifted and multiplied by scale factors to center the bounding box of the geographic feature within the designated width and height of the SVG element.

4. Constructing SVG Path Definition Strings

The transformed pixel coordinates are converted into an SVG path definition string, assigned to the d attribute of a <path> element. The string uses standard SVG path commands:

• M x,y (Move To): Starts a new sub-path at the first pixel coordinate of a line or polygon ring without drawing a line.
• L x,y (Line To): Draws a straight line from the current position to the specified coordinate for every intermediate point in the array.
• Z (Close Path): Appended at the end of a polygon ring to draw a line back to the initial M coordinate, creating a closed shape that can be filled with color.

For example, a triangular polygon is converted into a path string formatted as:
M 100,200 L 150,100 L 200,200 Z

5. Practical Implementation

In modern web development, libraries such as D3.js automate this translation pipeline. The d3.geoPath() generator combines a projection configuration (like d3.geoMercator()) and stream-transforms GeoJSON geometries directly into valid SVG path strings, allowing developers to render maps dynamically using declarative web standards.