danburzo / every-street

Drawing every street in Romania using OpenStreetMap data, Node.js and SVG

every-street

Draw every street in Romania, based on OpenStreetMap data.

Read the article here: http://danburzo.ro/every-street

Installing

Clone this repository and run npm install on it.

Using

Here's how to create a similar map for any area:

1. Dowload an .osm.pbf OpenStreetMap data file for your country/area from download.geofabrik.de and place it into data/data.osm.pbf.
2. node tools/extract-data.js to extract node data into output/nodes.txt and street data into output/streets.txt;
3. node tools/load-nodes.js to load the nodes into a database so they can be looked up;
4. node tools/apply-nodes.js to replace the node IDs in your street file with the actual coordinates of the nodes into output/streets-with-coordinates.txt;
5. node tools/bbox.js to compute the bounding box and the aspect ratio for the map area into output/bbox.json;
6. node tools/map-coords.js to transform the geographical coordinates to screen coordinates using a Spherical Mercator projection into output/streets-with-coordinates-mapped.txt;
7. node tools/generate-svg.js to generate the final SVG.

Or, if you're brave enough, run them all in one fell swoop:

node tools/extract-data.js && node tools/load-nodes.js && node tools/apply-nodes.js && node tools/bbox.js && node tools/map-coords.js && node tools/generate-svg.js

...and wait... and wait.

Converting the SVG to PNG

ImageMagick has worked for me:

convert -density 900 output/streets.svg output/streets.png

every-street's Issues

Clarify Mercator projection

How do you find the "natural" ratio when you use the Mercator projection? A mapWidth/mapHeight seems arbitrary.

Every street in Brazil

As described in this post, I followed your steps and used this PBF file to generate visualizations of every street in Brazil:

Just as a heads up to someone trying the same, I tweaked the final output image by hand (removing the long lines) because some streets were glitched:

Maybe some incoherent data in the original PBF?

Nevertheless the result is really interesting and I can share the generated SVG too if you'd appreciate. Thank you.

Check out tippecanoe

https://github.com/mapbox/tippecanoe

Add Osmosis as intermediary step to filter the data.

osmosis --read-pbf data/romania-latest.osm.pbf --tf accept-ways highway=* --used-node --write-pbf data/data.osm.pbf

Append </svg> to end of generated SVG file

Right now you need to do it manually.

Performace

This data was gathered using the latest florida image from geofabrik.de (md5sum 89a6468db0a90ce7b5392695892287bf) inside of a Ubuntu VM that was allocated 2GB of ram with 2 cores (i5-4570, host has 12GB of ram and was not under load)

Step	Time
Extracting Streets	34s
Extracting Nodes	49s
Loading Nodes	1m 39s
Applying Nodes	5m 35s
Finding Binding Box	5s
Mapping Coordinates	24s
Generating SVG	19s

Using node inspector to inspect the Applying Nodes step shows:

I'm not sure what the deal is with the idle time, but ignoring that we can see that Leveldown is taking 60% of the time reading from the database(Database and LevelDOWN._get are seperate at 30% each). I'm going to run some experiments with using Redis as an alternative to leveldb. Yes it will be in ram, but I'm hoping that because it is in a database the amount used should be much more manageable (LevelDB only uses 300MB of diskspace in this case)

Using docker could let you test a redis server really quick and cleanly (as it doesn't touch the host).

undefined db in callback

The command nodejs tools/load-nodes.js returns this error:

/home/every-street-master/node_modules/level-writestream/index.js:5
  db.createWriteStream = createWriteStream;
                       ^
TypeError: Cannot set property 'createWriteStream' of undefined
    at attachConstructor (/home/every-street-master/node_modules/level-writestream/index.js:5:24)
    at /home/every-street-master/tools/load-nodes.js:15:2
    at dispatchError (/home/every-street-master/node_modules/level/node_modules/level-packager/node_modules/levelup/lib/util.js:64:35)
    at /home/every-street-master/node_modules/level/node_modules/level-packager/node_modules/levelup/lib/levelup.js:119:14
    at /home/every-street-master/node_modules/level/node_modules/leveldown/node_modules/abstract-leveldown/abstract-leveldown.js:39:16

If I console.log(db) right here I get undefined. So the whole levelup callback receives undefined for the database instance.

Any clues as to the cause of this?

Remove hardcoded bounding box

Bounding box should be generated as part of extracting the nodes from the OSM data file.

Generate PDF from SVG (using cairoSVG?)

Look into SQLite + Bookshelf.js as alternative to LevelDB