OpenStreetMap
Pour les journées européennes du patrimoine 2017, les contributeurs OpenStreetMap d’Ille-et-Vilaine ont réalisé une cartographie du Musée de Bretagne (Rennes) et de ses oeuvres majeures. Une contribution innovante puisque peu de musées sont encore cartographiés précisément en intérieur dans OSM.
Pour en savoir plus : https://openstreetmap.fr/musee-bretagne-indoor
Pic4Carto is a great tool for finding lot of urban features using street-level pictures. I was able to add some vending machines remotely, in Aizu-Wakamatsu (where the next State of the Map 2017 will happen). This map (made with MapContrib) shows all the machines in the city.
You might know that soon the annual OpenStreetMap conference will take place in Aizu-Wakamatsu. As some other lucky mappers, I’m going to this amazing event (thanks to the French OSM association) and give a talk about a tool I’ve made called Pic4Carto. This post is a real-world example of what can be achieved using this tool.
I’ve been last year to Tokyo, it was such an amazing trip. Japanese people and culture are so great. I was amused by the amount of vending machines you can find in the city. Here in France, we have only a few vending machines, and most of them are indoors. So seeing a bunch of machines pretty everywhere was really fun.
As I will talk about Pic4Carto, I thought it would be great to do a real showcase of the tool with these vending machines. But first, what is Pic4Carto ?
Pic4Carto ( http://projets.pavie.info/pic4carto/ ) is a web viewer of all open-licensed, street-level pictures available online. It was created to make re-use of pictures from Mapillary, OpenStreetCam, Flickr and Wikimedia Commons easier for mapping. In fact, you can easily find on these pictures a lot of urban objects, like fire hydrants, benches, shops, speed signs, and… vending machines !
So, the idea of the showcase is to see how you can map remotely urban objects using Pic4Carto and other tools like MapCraft. Before I started, there was already some vending machines in Aizu-Wakamatsu. 33 nodes to be precise (thanks Overpass Turbo !).
Meanwhile, I can see that there are a lot of recent pictures (last 6 months) using the Pic4Carto main map, which shows picture availability statistics in a city (just wait two seconds for stats to load).
So we’re good to go: a theme, a good source of data, and all the tools ready to do some efficient micro-mapping !
In order to make what I call exhaustive mapping, meaning map all objects in an area using all available pictures, we can use the power of both Pic4Carto and MapCraft. MapCraft is a tool for work in team over an area, as you do in Humanitarian OSM. You provide to the tool a set of geometries, each one will be handled by one contributor.
Good news, you can directly export the Pic4Carto main map grid to use it in MapCraft. Use the export button in the top left corner (see below), and save the grid as “OSM XML” format on your computer.
Then, in MapCraft, you can create your own “Cake”, which is mapping project. Just log-into MapCraft, then you will have the menu “New cake”. There, you have to supply some informations: project name, description, and geometry. The geometry file is the grid we just exported from Pic4Carto.
Then create it, and here you are ! You have your freshly-baked cake ready to use. Here can start the productive work: each one of your team mates can take a slice of the cake, and start mapping over it.
Now that all the tools are ready, we can do some productive mapping. As I was working alone on this project, the MapCraft cake is just a way to track which pictures I already have looked at. The process is the following:
Not so hard, eh ? I think it’s a good way to spend time when weather isn’t good in your city, it lets you discover amazing places and improve our database.
So you have wondered that all this can work for pretty any kind of objects: street lanes, benches, traffic signs, shop, amenities, building description… You can use pictures for mapping whatever you like, and it have never been that easy. You can work alone, or in team. You have access simply to all available street pictures of the world.
Oh, what about these vending machines ? I created a map showing them (using MapContrib which is a great online editor for new mappers), and you can add the ones you know in your city directly there: https://www.mapcontrib.xyz/t/8a6e32-Vending_machines
I hope that this story was interesting to you, and will inspire you for doing some remote mapping, or uploading pictures to Mapillary or OpenStreetCam ! And if you go to the State of the Map this year, see you soon there ! :-)
As a developer or a map hacker, when you create maps for real world users, it is important to let them know about the context. To represent some object, a pin on a map is a start. However, it is better to visualize the object in its context, and this is best done using street-level pictures.
OK, but using pictures in web maps is hard…
Well, it was hard. There are many pictures providers (Mapillary, Wikimedia Commons, Flickr…), each of them having its own API, returning different results. It is simple to use only one of them, but what if Flickr has pictures Mapillary hasn’t ? Or the contrary ? It depends of the cities. It takes lot of time to support every provider, and it may not be worthing it for a simple map.
I agree, but why were you saying that it was hard, it is still the case, isn’t it ??
No, now it is easy to use pictures for your map. How ? Using Pic4Carto.js ! Pic4Carto.js is a JavaScript library aiming to provide pictures for your online map or application easily. It retrieves data from several providers in a single function call.
Probably, but I need a real world example.
Here it is.
Let’s do a simple map, showing some bicycle parkings. We will display some markers over a Leaflet map, and by clicking one of them, show the nearest picture available. The code of this tutorial is available here, and don’t forget to download Pic4Carto.js here, choose the latest dist.zip package (or if you are a hardcore dev, you can also use npm install pic4carto).
First step, create your base Leaflet map. Also, add some GeoJSON data to display (here, some bicycle parkings extracted using Overpass API).
As you can see, in the L.geoJSON call, we can use the onEachFeature parameter to do some processing over every Leaflet layer created from GeoJSON data. Here, we bind a temporary pop-up. Let us keep a track of every generated layer, in order to be able to update them later.
Now, we can start the pictures retrieval. After the previous code, we start iterating over generated layers. Also, we create a PicturesManager, which is the main class of Pic4Carto.js. It will allow us in a few moment to retrieve pictures.
So let’s use this pictures manager. The library works asynchronously, requesting every handled API over HTTP. When an API response arrives, its results are parsed. And when every results has come, pictures are sent to a listening function. You have to create this function, which will receive pictures and do whatever you want. This can be done like below. How it works: when pictures are ready, if any picture is available for the current Leaflet marker, we show the first one in the popup. If no pictures is available, we let the user know about this.
Then, we can finally call the function which will effectively start pictures retrieval. You have to pass it a bounding box. As we have here markers, we can do a bit of magic before. We create a circle having the marker as center and a radius of 10 meters. Then, get the square bounding box containing it using Leaflet function. And then calling the PicturesManager function startPicsRetrieval.
Let’s see the complete code (also available here for copy/paste).
It’s ready. Yes, for real. With this code you can retrieve all the available pictures for every place in the world. And not having to deal with every provider API. See how it is beautiful.
Of course, this map is very simple. You will not always see what you want to show that way. That’s why Pic4Carto.js has a lot more of functionalities (picture metadata, picture orientation, retrieve statistics of picture availability in an area…) that you can explore through some examples. Now that you know about how it’s easy to use street pictures in your web map, no more excuses for not making great maps ;-)
Les photos de rues sont une excellente source de données pour OpenStreetMap. On y voit beaucoup d’éléments : voies de circulation, pistes cyclables, signalisation, tout le mobilier urbain, les bâtiments… D’autant que les photos sont de plus en plus nombreuses et régulièrement mises à jour, grâce à des projets tels que Mapillary ou le naissant OpenStreetCam. Mais pour l’instant, nous n’utilisons qu’à la marge ces photos, et ce pour plusieurs raisons : multiplicité des sources et des outils, sélection par zone fastidieuse, problèmes de licences… Mais des solutions existent désormais pour tirer le meilleur parti de ces photos. Ce petit article a pour objectif de vous montrer comment utiliser les photos de rues pour améliorer OpenStreetMap, et ce en collaborant à plusieurs.
Pic4Carto (http://projets.pavie.info/pic4carto) est un visionneuse qui rend simple la visualisation des photos sous licence libre de Wikimedia Commons, Flickr et Mapillary. Il s’agit d’un outil dédié à la contribution OpenStreetMap qui se veut efficace. On choisit sa zone sur la carte, et les photos récentes s’affichent une par une, à la manière d’un diaporama.
On accède ainsi à toutes les images récentes utilisables pour contribuer à OpenStreetMap en un clic. Elles s’affichent de la plus récente à la plus ancienne, jusqu’à 6 mois en arrière. Quand on voit sur une photo un élément qui nous intéresse, un clic de plus et l’on accède à la zone correspondante dans l’éditeur iD ou JOSM pour pouvoir l’ajouter. Quoi de plus simple ?
Cet outil est très efficace pour visionner rapidement les photos d’une zone. Mais quand on se lance dans une tâche de grande ampleur (“tiens, si je rajoutais tous les panneaux publicitaires d’une ville”), il est facile de s’y perdre (“mince, est-ce que j’ai déjà ajouté les éléments dans cette zone ??”). Et pour travailler à plusieurs dans une même ville, ça devient compliqué. Pour cela, pourquoi ne pas profiter d’un autre outil existant et dont c’est le but, nommé Mapcraft !
Mapcraft (http://mapcraft.nanodesu.ru) est un outil de collaboration pour simplifier la contribution à plusieurs sur une même zone. On découpe la zone (le gâteau) en plusieurs parts. Chaque personne peut s’approprier une part, qu’il bloque le temps de contribuer et qu’il débloque lorsqu’il a achevé son travail.
Le découpage du gâteau utilise un fichier OSM XML, contenant plusieurs chemins fermés qui vont délimiter chacune des zones que l’on pourra se partager. Voyons comment travailler à plusieurs sur une tâche qui va exploiter les photos des rues.
Pour commencer, il faut obtenir le découpage que va utiliser Mapcraft. Pour cela, Pic4Carto propose d’exporter la grille visible sur la carte principale. L’avantage est que le partage de la zone sera équitable, et que chacun pourra consulter sur Pic4Carto le carreau qu’il s’est approprié dans Mapcraft. Dans Pic4Carto, pour exporter la grille actuellement visible sur la carte, il suffit de cliquer sur le bouton d’export à gauche. Deux boutons vont apparaître à la place : “G” et “O”. Ils correspondent aux formats d’export disponibles : GeoJSON et OSM XML. Cliquez sur le bouton “O” pour exporter en OSM XML. Enregistrez ce fichier sur votre ordinateur.
Vous pouvez retourner dans Mapcraft. Sur la page qui liste les gâteaux existants, vous devez vous connecter avec votre compte OpenStreetMap en cliquant sur “Login”.
Une fois connecté, cliquez sur “New cake”. Vous allez arriver sur cette page.
Vous devez donner un nom à votre gâteau, par exemple “Ajout des arrêts de bus sur telle ville”. Pour le champ “geometry”, chargez le fichier OSM XML que vous avez exporté depuis Pic4Carto. Enfin, remplissez le Captcha, puis cliquez sur “Create” pour valider. Le site vous redirige ensuite vers la page correspondant à votre gâteau fraîchement sorti du four.
On y retrouve les mêmes carreaux que sur Pic4Carto. Là, le travail collaboratif peut commencer : chacun des contributeurs peut s’approprier une part du gâteau en cliquant sur un carreau sur la carte, puis sur le bouton “Owner”.
Cela indique aux autres personnes que vous travaillez actuellement sur tel carreau. Vous pouvez en parallèle visualiser les photos de ce carreau dans Pic4Carto, et réaliser les modifications correspondant à votre tâche dans votre éditeur OSM préféré.
Une fois votre tâche achevée sur ce carreau, vous pouvez en modifier l’état d’avancement en changeant la valeur de progression. Pour cela, cliquez sur le bouton “Progress”.
L’état d’avancement est qualifié de 0 à 9, 0 signifiant que la zone n’a pas encore été consultée, et 9 que la tâche a complètement été réalisée. Les valeurs intermédiaires donnent une idée de la progression du travail.
Pensez également à libérer le carreau en recliquant sur le bouton “Owner”, pour que celui-ci soit accessible à d’autres contributeurs.
Convaincu du système, mais vous ne savez pas trop quoi ajouter à partir des photos ? Voici quelques idées qui pourront vous inspirer :
Vous savez désormais comment tirer le meilleur parti des nombreuses images à votre disposition sur le web pour contribuer à OpenStreetMap de chez vous. N’hésitez pas à partager vos retours d’expériences !
Bonjour à tous :)
Alors que je parcourais la carte OpenStreetMap, j'aperçus des grands triangles à l'est du territoire russe, triangles qui ne semblent pas être présents en réalité ^^' Le problème semble n'être présent que sur le rendu mapnik, et les données ne sont pas éditables avec Josm. On voit l'ensemble dans des zooms assez larges (niveau 6).
Bonne journée à tous ;)