Creating interactive 3D Maps with OpenStreetMap and Sketchfab

Back to overview

Last week I noticed a tutorial by ‘data journalist’ Lorenz Matzat in which he showed how to quickly create a 3D map view of any location in the world. In my adaptation of his tutorial I’ll give you a step by step instruction on how to achieve this, starting from downloading the required tools to tweaking the materials on Sketchfab.

Downloading a map

To start off, head to OpenStreetMap.org and navigate to the area you want to export. Next, select the ‘Export’ option at the top of the screen. Exporting large areas will generate huge data files that may not display properly, so start small!

Fine-tune the exported part of the map with the ‘Manually select a different area’ option and change the selection rectangle. Click ‘Export’ to save the result.

image

The export will be saved as ‘map.osm’ and needs to be converted before you can load it into Sketchfab. For this task we’ll use the open source tool ‘OSM2World’. This is a Java application which runs on all systems that support Java. It is a ‘command line’ tool, so you’ll need to open a terminal to run it (I’ll explain how below).

Converting OSM files to .OBJ

Download OSM2World (select the file ‘OSM2World-latest-bin.zip’) and extracting the .zip archive. I just double-clicked the archive to have it unzip on my desktop.

Next, download the ‘example texture selection’ from the OSM2World download page. Unzip it, and place the textures directory along with the file texture_config.properties in the OSM2World directory that you unzipped above.

To run OSM2World, open a terminal:

  • Windows: Press Win-R, enter ‘cmd’ (without the quotes) and press enter.
  • OSX: Open Spotlight, enter ‘terminal’ and press enter.
  • Linux: Linux has so many flavors that it’s hard to list them here, but I’m pretty sure you’ll know where to find a terminal on your system 😉

In the terminal, navigate to the OSM2World directory. In my case:

cd Desktop/OSM2World-latest-bin

Now it’s time to do the actual conversion. First, drag the map.osm file that you downloaded earlier into the OSM2World directory. To run, OSM2World requires at least two parameters, -i to define the input file and -o to define the output file. For example:

./osm2world.sh -i map.osm -o map.obj

There are more options, please see the OSM2World wiki page for the full documentation.

Note: you may see some warnings during conversion, but in my experience you can ignore them.

Uploading the files to Sketchfab

I will now receive two files: map.obj with the geometry and map.obj.mtl with material definitions. Zip these together with the textures directory in a file and upload it to Sketchfab. You should now get something like this:

image

Cleaning up your model

Now you may see some objects that you don’t want or need. You can choose to either open the converted .obj file in your favorite 3D editing software, but you can also take the lazy way out by using the Sketchfab materials editor. Just double-click on any object that you’d like to remove from view, go to the Transparency tab and set the transparency all the way up to 100. It’s a bit of a hack, but it works 😉

Fixing the trees

As I was using the texture_config.properties configuration file, OSM2World will also export some additional models like trees. It’s using tree ‘billboards’ (simplified models using texture maps), but I’ve found it doesn’t quite export the transparency right:

image

Fortunately, fixing this is easy on Sketchfab: switch to the the Sketchfab materials editor once again and double-click on one of the trees.

We need to tell Sketchfab to use the tree’s texture map as a transparency map too, so open the Transparency box and click on the texture icon. Select the right texturemap for your tree type:

  • arbaro_tree_broad_leaved.png
  • arbaro_tree_coniferous.png

image

After updating the transparency map, your trees should look fine:

image

Fixing wall shading

You may have noticed the walls of the buildings have some weird shading. You can’t fix this entirely on Sketchfab: switching to Shadeless will remove the shading but it will also make your map look flatter (I rather like that look for maps though).

Another approach is to import the OBJ file into a 3D tool and fix the normals on your models. Just loading the OBJ into Blender and uploading it with the bundled Sketchfab exporter add-on will already do this (be sure to remove any objects from your scene before importing though – especially the lamps).

Thanks for reading

So there you have it! You have now selected part of a map, exported it to a 3D file and published it to Sketchfab.

If you created your own OpenStreetMap export, please be sure to let us know in the comments!

 

About the author

Bart Veldhuizen

Head of Community at Sketchfab. 3D Scanning enthusiast and Blenderhead. Running BlenderNation in my spare time.


Leave a Reply

Your email address will not be published. Required fields are marked *

  • Jaime says:

    When I type in “./osm2world.sh -i map.osm -o map.obj” I get an error that ‘.’ is not a recognized command. Do you know what I might be doing wrong?

  • Bart Veldhuizen says:

    Hmm, are you sure you didn’t leave any spaces in between the point, slash and osm2world.sh? Also, which system are you running this one?

  • mehdi says:

    very nice help ..

  • Hritik Vaishnav says:

    I am also getting the same error that ‘.’ is not a recognised command. Please type the exact phrase that you type in your system.
    Windows 7 32-bit.
    🙂

    • Bart Veldhuizen says:

      I’m currently not able to download OSM2World, seems like their website is down. I’ll keep tabs on it and will report back here when it works again.

      In the mean time, could you try the following?

      – make sure you’re in the directory where you unzipped OSM2World: something like ‘cd OSM2World-latest-bin’
      – execute the following command: ./osm2world.sh -i map.osm -o map.obj

      As I can’t check right now, ‘osm2world.sh’ might need to be renamed to ‘osm2world.bat’ or something similar. Just look in the unzipped directory and see what’s available.

      • ramelli jonathan says:

        Same problem so I downloaded it from github (https://github.com/tordanik/OSM2World). When I excecute osm2world-windows.bat I get “Unable to access jarfile OSM2WORLD.jar”. I’ll try on linux to see if it works better…

      • Bart Veldhuizen says:

        Hmm perhaps it’s better to talk to the creator of the OSM2World app, I’m afraid I can’t solve this for you :-/

      • Bart Veldhuizen says:

        Oh I do have one quick thought: make sure you download the ‘bin’ file, not the ‘src’ version!

Related articles