Dynamically adding geographic elements to a map

README.md

Sometimes 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:

• D3 API reference: Geo Paths
• GIS Stack Exchange geoJSON path discussion
• Animated map connecting coordinate points

continents.json

countries.json

index.html

map.js