Dynamically adding geographic elements to a map
This example demonstrates how users can dynamically add geographic elements to a map by creating and projecting GeoJSON objects at runtime. The visualization displays a world map built from TopoJSON country and continent data, rendered as SVG paths using D3 v3’s `d3.geo.path` with a Ginzburg6 projection. As the mouse moves, a line is redrawn from a fixed starting point to the cursor’s current geographic coordinates, and clicking permanently appends new line segments to the map, allowing users to build a custom path interactively.
AI-generated descriptionSometimes you want to allow users or your program to dynamically add geographic features to a map graphic. In order to achieve this with D3, you can create geoJSON objects and then use D3 to project and draw the elements.
GeoJSON objects are specifically formatted JSON objects (see the full specification). When making even small maps, geoJSON objects become huge with featureCollections and geometryCollections, but in their simplest form, they look like:
var geoFeature = {
"type":"Feature",
"properties" : null,
"geometry": {
"type":"LineString",
"coordinates": [
[ pointaLat, pointaLon ],
[ pointbLat, pointbLon ]
]
}
}
Without using OGR2OGR or topoJson command line interface or your choice GIS software, you can create your own simple geographic elements directly in your application. Elements can include lines, multilines, polygons--just change the "type" property.
Some useful links: