Skip to main content
100%

KML to GeoJSON

✓ Published0🌍 Public
Aakre54
Last edited Mar 29, 2014
Created on Mar 29, 2014

This example converts a GPS track from a KML file into a GeoJSON MultiLineString for use in web mapping. It reads `history.kml`, parses it with the `xml2js` library, extracts the coordinates from the `gx:Track` element, and writes the resulting GeoJSON to `points.json`. The conversion relies on Node.js’s `fs` module for file input/output and `parseFloat` to clean each coordinate pair. The output is a single-feature GeoJSON object with a MultiLineString geometry, ready for visualization with tools like D3’s `d3.geoPath`.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist b2644a6ec6b1fd1a95ef87d5a93ec93c

This example visualizes a GPS track as a three-dimensional path using a MultiLineString GeoJSON feature. The data, sourced from a gist by FergusDevelopmentLLC, is rendered with altitude encoded as the third coordinate in each vertex. The visualization highlights the elevation changes along the path through a continuous line, with the points tracing a looping route. The use of 3D coordinates allows the viewer to perceive the terrain's vertical profile alongside its horizontal extent, making it useful for analyzing elevation gain, slope, and path shape in a compact, geographic context.

WWill Carter
64% match
Loading thumbnail…

Gist 8393657

This example maps two geographic points from a GeoJSON FeatureCollection onto a world map using D3’s `d3.geoPath` and a geographic projection. It then runs a force-directed simulation with `d3.forceSimulation`, treating the points as nodes that repel each other while being constrained by the map’s bounds. The visualization shows how the points drift and settle under the force layout, with their positions updated via D3’s data join. The code relies on the `Octomonster.geojson` file for the initial coordinates and uses Canvas rendering for the map and points.

Aadkatrit
61% match
Loading thumbnail…

Running a Trace Sync gpx file through togeojson

This example visualizes a GPS running trace by converting a GPX file to GeoJSON, then rendering the route as a line on a map. It shows a short, high-frequency recorded path with timestamps every 200 milliseconds, likely representing a brief burst of movement. The visualization relies on the `geojson` data structure, with the `coordTimes` property enabling time-based animation or styling. The work uses the togeojson library for conversion and can be rendered with mapping libraries like Leaflet or Mapbox GL JS to display the trace geographically.

DDylanFM
61% match
Loading thumbnail…

GPS

This example visualizes GPS route data on an interactive map, showing a path of timestamped waypoints overlaid on OpenStreetMap tiles. The map centers on the route’s starting location and renders the track as a red line connecting green waypoints. Built with D3.js v5 and Leaflet, the code uses `d3.geoPath` with a custom `d3.geoTransform` to project GeoJSON coordinates into Leaflet’s layer points, while SVG elements are appended to the map’s overlay pane for animation and styling.

XXiaoyu Su
61% match
Loading thumbnail…

Gist 60d493d13e828f2892fa43773cba7d70

This example plots a single GeoJSON point feature representing a cycling detour sign, displaying its direction and timestamps. The map renders via a custom D3.js geographic projection using `d3.geoPath` to draw the basemap and point symbol. Data comes from a GeoJSON FeatureCollection, with properties like `direction` and `first_seen_at` accessible for hover interactions. The visualization relies on D3.js for map rendering and feature styling, while geographic coordinates are projected into 2D space for display.

SStephen
60% match
Loading thumbnail…

Gist 4047791

This example renders a single MultiPolygon geographic feature—a small island coastline—using D3’s `d3.geoPath` to project and draw the shape onto a canvas. The raw GeoJSON coordinates define the polygon’s boundary, and the visualization shows the resulting landmass as a filled path. The code relies on D3’s geographic projection pipeline to convert latitude and longitude points into screen-space coordinates, but does not include axes, labels, or interaction. It is a minimal demonstration of how a GeoJSON geometry can be displayed directly with D3’s path generator.

Aandrewxhill
59% match
Loading thumbnail…

Gist 8393692

This example displays two geolocated markers on a map, each with a title and description of a building. It uses a `map.geojson` file as the data source, containing point features with custom properties for labels and colors. The visualization renders the map using D3’s `d3.geoPath` to draw the geographic features, while the markers are positioned based on their coordinates. The code relies on D3’s force simulation (`d3.forceSimulation`) to potentially handle marker placement or interaction, though the static view shows the two points plotted directly.

Aadkatrit
59% match
Loading thumbnail…

TopoJSON Points

This example shows how to encode a MultiPoint geometry object using TopoJSON. The block loads airport coordinates from a TopoJSON file and renders them as a collection of points in an SVG visualization. The file defines a Topology with a single MultiPoint object, transformed and scaled to map the point coordinates. This serves as a demonstration of TopoJSON’s support for representing point-based geometry, as opposed to its more common use for polygons and lines.

Aapratt2003
59% match