Brussels / 3 & 4 February 2018


Building OSM based web app from scratch

How to find the way through the open source jungle

There are a lot of tools to build a web app from scratch - as a novice you have to find your way through alle these tools and pick the right ones.

If you are an OpenStreetMap enthusiast and want to create a simple web mapping application based on OSM data you have the choice among a huge amount of software and tools. If you are, in addition, a hobby developer with a low budget but without a strong background regarding IDEs, toolsets, provider services, databases and so on, you will be lost in the jungleā€¦

I will describe you how I found the way through this jungle as a novice and how I built my web app! (www. from scratch. I will cover the following topics:

  • Programming language (JavaScript, TypeScript, PHP)
  • IDE (Eclipse, Aptana, WebStorm)
  • WebServer (Local vs remote, MacOS/Windows/Linux)
  • Mapping library (OpenLayers, Leaflet)
  • Tile Provider (Mapbox, OpenStreetMap, OpenCycleMap, other)
  • Responsive Web Design (ZURB Foundation, Bootstrapi, other)
  • CSS development (LESS, SASS)
  • OSM data retrieval (PostGIS DB, OSM API 0.6, Overpass API)
  • Additional functionality (Geolocation, Point in Polygon, Distance)
  • Routing (MapBox, OSRM,
  • Own SVG Icons (GIMP, InkScape, Illustrator)
  • Version Control/Publishing (Git, GitHub)

OpenStreetMap is a database storing a huge amount of map relevant data and there should be a lot more small web applications using this data for useful maps!

Finding the right tool chain is crucial to get it up and running.


Nils Vierus