 Hello, ladies and gentlemen. My name is Niels Virus. I'm living in Berlin and I want to talk today about how to build an OSM based web app from scratch. OSM doesn't mean OpenStreetMap. I think most of the audience will know that. This lecture is a little bit different because I must say I'm not a professional in the area of geospatial science or anything else. I did all my work in my leisure time and I'm an OpenStreetMapper and therefore I got some ideas to how to build a web app. And I want to take you with me through a little journey about that adventure. It was for me, maybe for some professionals from you that will be a little bit boring. Anyway, I will try to entertain you a little bit. What is my technical background? I came up already with programming languages many years ago, Algol 60. I don't know if anyone remembers that. It was in the late 70s. That was my first programming. And during university I learned Modular 2 and Pascal and all that stuff on a digital PDP 11. And my first job was macro-programming on a Xiloc 80. During 19th I worked for a software company and afterwards I was worked at this admin and the database admin in the financial industry. Then I came back to programming and to this stuff, making a web app. When I bought my first GPS device, that was a GAMI in GPSMAP 60 for outdoor mapping. And I was very fascinated about this little device. How can it track my movement and how can I upload all that stuff. And it fascinated me and afterwards I can look at the computer on the map where I was and all that stuff. Today we are more cautious with that, but at that time I was very happy about it. And I started to contribute to OpenStreetMap and my first project was a little map of the bicycle rental stations in Luxembourg where I lived that time. Luxembourg is a nice country, very small, you know. Hello. It's nice because it's so small you have some topics you can work on exhausted. You don't need an endless time for certain things like in Germany for instance. This lecture is about this jungle. It was a jungle for me in the first time. So many programs and so many things and I had to clarify programming language to use, how to retrieve the data from OpenStreetMap. Can I use mapping libraries? What about geolocation? Is this possible or not? What to do? How to program use integrated development environment? Responsive web design I need when I want to go mobile. Map tile provider, how to show a map in the background, what maps are possible. Version control, publishing, collaboration. All these things were new to me to be honest. Web server, routing, maybe you know all of these things but if you're new to the topic then it's an adventure. Some words about OpenStreetMap. OpenStreetMap is a worldwide database. It's founded about 2004 by Steve Coast in the UK and it's completely built by volunteers all over the world. It's based on surveys and on free satellite pictures. Around OpenStreetMap you find huge open source ecosystem of tools, of programs, of editors, all that stuff. I come into detail later on. And there are more than 3 million contributors in 2017. Some words about the editors. You have to get your data into the database or you have to modify it. You can add data by uploading GPX tracks. That wasn't the first time the only source we had. That means we took our GPS device with us and afterwards we uploaded the track. And then we pointed these tracks to routes, to roads or to ways or something like that. And now in Europe we have mostly all ways and it's not so important yet but that was the beginning. And one rule of OpenStreetMap is only use own surveys. Don't paint after other maps or so that is forbidden and no one wants this. The only one you can use is public satellite images. To modify data you use editors. The most famous one I think is JOSM, a Java application with a huge feature set. ID is an online editor. It's developed by Mapbox I think. Mac Hardware, maybe one knows. I didn't work with it. Potlatch and then for Android you have Vespucci. Yeah, the data is very big of OpenStreetMap. The main database is stored on a PostgreSQL database and last year about 800 gigabytes. That's a lot of stuff and it contains all the data. It's mainly node space and relations and that's it. And every node, every way and every relation can have attributes. There's a huge file, planet.osm. It's produced weekly and about 40 gigabytes even if it's compressed in this pdf format. This little table is from the wiki and shows the mirrors where you can get it. But you can also get little extracts by country, by continent, for instance, from a geofabrik company in Germany, which produces these extracts on a regular basis daily, I think, or quite often. And you can download it and use it in your applications. The formats are mainly OSM, that's an XML derivative and pdf, that's a compressed format of that. You can use this data to import into your own databases in your application if you want. Or you can convert it to JSON files and these JSON files you can use in your applications as well. How to get the data out of the database? There's a lot in, but you want to get it out for your application. There are several APIs. The only API to read and write OpenStreetMap data is the API version 0.6. You can retrieve only small areas because there are a lot of data in it. And I think it returns only 50,000 objects or so in one point, in one process. And therefore it's not suitable for retrieving larger areas. It's mostly used for editing. It has a restful API. That means you have all these put and get commands to work on the change set. It supports authorization. That means if you want to modify data in OpenStreetMap, then you have to be authorized. It's not possible anonymous. You have to have an account in OpenStreetMap and if you do it via your API, you have to be authorized in advance. XAPI is an older one. It's only a small one for read-only access. Here you can see the OSM format in XML. And the very new one is, not so new, but the new one is Overpass API, which allows very complex queries. I use it also, but that means you can select certain nodes. You can only postbox or you can select ways, which are postbox a little bit strange, but you can do that. And therefore you can get larger areas, but already filtered by certain things. Afterwards you can load this data in PostgreSQL and PySQL databases, or even in SQLite or MongoDB. It's very interesting. It's a non-SQL database and it's a very good supporting geospatial in processing. And I made already some tests with it and this is very handy and you can use the data very easy. In the current project, I use this API and version.6 and I use Overpass API. That means if I read data, I use the Overpass API and if I want to change some data, then I use the other API. Some words on OSM tools. There is OSM to PGSQL. It's an older one already that allows you to load these OSM files directly into a PostgreSQL database, but the database has to have the PostgreSQL extension in it in order to fulfill all these geographic processing. Then you may know the Geospatial Data Abstraction Library. I came over it to convert some data from one format in the other. It's also a huge topic and I'm not a specialist, not at all, but I know one tool and that worked fine for me. OSM Convert is I think a very new one. It allows conversion between different formats and sometimes you need that in order to extract the data you want to work on. For instance here, you can use an OSM filter to filter certain attributes, but you need this format here, 05M, and you can produce it with OSM Convert, for instance. Therefore, I came over it. Some other tools, Overpass Turbo. That's the GUI for the Overpass API I mentioned already. It allows you to data retrieval with a complex query language on OpenStreetMap data and you can show the data on a map. There are some points here. You can output the data also in certain formats, for instance in GeoJSON or in OSM as you like. It's a very good tool and very handy. What I used also, I mentioned already, is OSM out to authenticate the user if you want to change some data in the web application. Then you get this screen in order to log in. For Garmin, it's not so... it has no meaning anymore, I think. But in the first time, Garmin was very broad in the community and some guys made a lot of effort to convert the data from OpenStreetMap to be loaded into a Garmin device and it's not so easy because Garmin's file format is not public and you have everything you have to re-engineer and there's an ecosystem of tools, I remember. I use Overpass Turbo in my application and OSM out. The programming language... Okay, you know the programming language is JavaScript. In the first days, it adds only dynamic possibilities to websites but you can manipulate the document object model and there are a lot of libraries which can help you in developing a jQuery, for instance, a very famous one. And in the last year, the standardization was very strong in JavaScript and we have huge apps built up in JavaScript, Facebook, Twitter, you know that. Yeah, JavaScript is the choice. On the server side, you can program your data retrieval. If you want, I didn't that. I used the API. You can do it in Java, PHP, Node.js, also JavaScript, Python and more, I think. But I'm not a specialist on that area, to be honest. Some words about the software development environment. Yeah, you can use editors, Notepad++, maybe you know Sublime Text, very famous. Or you can use online development two years ago, so I tried it out, Cloud9. At that time, it was a very interesting product. You can use only in the browser from everywhere. Can you do your development work? That was very good and I think Amazon was the same meaning and therefore they bought it two years ago or one year ago and now it's fully integrated in Amazon's cloud. Or you use a local integrated software development environment in IDE. I tried a little bit out Aptana. I don't know why it came off it. I don't know. I don't remember. Only a short time. Eclipse, a very huge package. NetBeans, there was, for me, not the ideal solution and I came then over WebStorm. And now I use WebStorm. It's not open source, to be honest. It's a commercial product, but I'm very satisfied with it. Some words on WebStorm. Good auto completion, rich framework support, all the news frameworks, Angular React and so on. Very good supported, powerful search. The UI is keyboard centered. If you like that, for me it doesn't matter to be honest, but some guys like it. Everything can do with keyboard. It's 100% customizable. You have a debugger inside connecting with Chrome. That makes it real easy to debug your application. You have the console window inside. You have to go outside. Integration of version control systems like Git or SVN. Yeah, next point. What you need when you have an HTML application and you want to read some data and you want to test it is a web server. That means you need a web server. Yeah, you can use an own machine with Apache, for instance. It's the most widely used system. Or you can engine X. You can use, I don't know, to be honest, or Microsoft ES. I think it's more in the business area, that's 10% of market share. But I came over the famous Apache package, LAMP. I think you know it. Linux, Apache, MySQL and PHP. Or you have the derivatives on Windows and on Mac OS. WAMP and MAMP. And you can also use a built-in web server of your IDE if there is one. I use MAMP on Mac OS, and I'm satisfied for that. So that's about JavaScript map libraries. If you want to establish a mapping library, then you not only have to draw your objects, but also a nice background map, which suits to the topic of your map. That means there are different possibilities and these background maps are rendered by a library that you don't have to do it by your own. And afterwards you have to draw markers, you have to draw lines, maybe pop-ups, you have to draw a legend, you have to make the map moveable, zoomable, and all that stuff. And for all these things, there are luckily some libraries and you don't have to do it by yourself. And the other guy mentioned already Leaflet. And Leaflet is very famous at the moment. It's a very nice one, a very small one. And OpenLayers is a different one, a little larger. I started my first project with OpenLayers, but now I came up Leaflet. Over Leaflet, then you can use libraries from Mapbox, from Google Maps. These three also GeoXt and other. Shortly about Leaflet, the most popular light-white mapping library developed by Agafonkin working for Mapbox. And simple map creation, customized icons are no problem. And the GeoJSON format is processed very simple. That means you can create a map layer with one line of code if you have the appropriate JSON file handy. And you can make choropleth maps. And for all these things, there exist many plugins, a huge list of plugins in the internet. Well, short some code, but not too much. That's a minimal map built with Leaflet. You have to integrate the CSS and the JS file. Then you have to create a style. That means you have this height 100%. You have the definitive height you have to have in your map. Then you create a diff with an ID. And afterwards you create the Leaflet map and reference this ID. Give a coordinate a center. And afterwards you define the tile layer for the background. And that's it. And if you do that and run that, it looks like this. And it's very small and very fast. And you have already zoomable maps. You have already the reaction on touch gestures. And you have the Leaflet button here over there about the license. If you build a web app, then you come over this responsive web design. What means responsive? Responsive means that, like in this picture, the water responds to the form of the vessels. And so your software should respond to the device on which the web app is shown. And if you have different devices, then you have to rearrange the blocks of your site in order to fit all the devices. You cannot shrink all the desktop into the mobile. Then you cannot see anything. And that means you have to deal with it. And I tried it also. And this is my web app for locating ATMs on the desktop. And here on the iPad in landscape mode and on a mobile phone. And you see everything is a little different. We have here the menu. It's only the hamburger icon. Here's the fully menu. Then you have the sidebar, which comes up or not, on the format. We do all this with CSS3 techniques, with breakpoints, with media queries. And if you use a preprocessor, then you are much faster, I think. There are also some libraries to do that. You don't have to reinvent the wheel. I came up about Zub foundation. It's very good. But for me, the learning curve was a little bit steep. OK, two minutes. Thank you. I'll make it a little faster, because we are already at the end. Sorry for that. It was longer than I thought. Theming is a topic that your web app shouldn't look like all the others. And you see you have a lot of themes you can use. I use this boots wash. And I think I have to. Should I enter? Five minutes, then I think five slides. OK, then I do the five slides. Geolocation. I mentioned already, if you have a mobile web app, everything is expecting that the web app can geolocate your position, and you should care about that. There's an API, a well-known defined. And you have a browser API, just a hint. In the last time, it's becoming only over a secure HTTPS. That means maybe you have to switch your site to HTTPS in order to use it. And in leaflet, you have a location service. That's no problem. And you have a plugin for a geolocation control, which do the work for you. The last point is maps on mobile devices. How to find the next item? That's a very, very natural question. And then I researched for routing algorithms, and not to do by my own. I couldn't do that. But there are some libraries which offer you routing by car, by walk, by bicycle, or even by public transport. And I came up over this OSIM. I show you some of the possibilities. And I came up over root36.net. A very nice company, very good support. And I use it in my web app. Version control and GitHub. Last topic. I had to learn it, because that's the way it is today. And you can invite other to collaborate with your projects. And therefore I uploaded them to GitHub. And there are knowledge base. Everyone of you knows that I think all the questions are answered in Stack Overflow or in Gist Stack Overflow. And I do the same. I have a blog, and I have a Twitter account for my app in order to make it a little bit more public. Some words about my project. The FindATM.Cache, or Find.Cache in German. And I started beginning 2017. It's a full leisure time project. That means I do it in my spare time. And that's not so easy sometimes. Learning by doing only. I have to regular scan the market. And sometimes I write on my blog. And my learning resources are YouTube videos, Udemy, Stack Overflow, Meetups, and so on. Some next steps. You see we are out of the jungle. And I want evaluate TypeScript. I want to cluster the markers. Internationalization is a topic. Vector tiles. Modifying OSM objects. Evaluation, React. I want to do. And so on, and so on. Yeah. That's it. Very fast.