OpenStreetMap logo OpenStreetMap

PanierAvide's Diary

Recent diary entries

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 :

Location: Colombier - Champ de Mars, Centre, Quartiers Centre, Rennes, Ille-et-Vilaine, Bretagne, France métropolitaine, 35000, France

How I added some vending machines in a Japan city I've never visited

Posted by PanierAvide on 6 August 2017 in English. Last updated on 20 June 2019.

Summary (TL;DR)

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.

Vending machines in their natural environment

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 logo

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 !

Pic4Carto main map

Add all the 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 !).

Overpass API extract of vending machines

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).

Pictures over Aizu-Wakamatsu

So we’re good to go: a theme, a good source of data, and all the tools ready to do some efficient micro-mapping !

Pic4Carto + MapCraft = <3

Pic4Carto and MapCraft

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.

MapCraft example

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.

Export Pic4Carto grid

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.

MapCraft new cake

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.


Adding vending machines

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:

Spotted !

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:

MapContrib and 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 ! :-)

Want to go further ?

Location: Nishisakaemachi, Aizuwakamatsu, Fukushima Prefecture, 965-0878, Japan

Some pictures for your maps with Pic4Carto.js

Posted by PanierAvide on 23 January 2017 in English. Last updated on 20 June 2019.

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.

A simple use case

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 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).

Code #1

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.

Code #2

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.

Code #3

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.

Code #4

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.

Code #5

Let’s see the complete code (also available here for copy/paste).

Complete code

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.

Result map


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 ;-)

Pic4Carto + Mapcraft = OpenStreetMap++

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.

Visualiser avec Pic4Carto


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.

Carte principale

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 ?

Visionneuse de photos

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 !

Éditer et collaborer avec Mapcraft


Mapcraft ( 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.

Exemple de gâteau

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.

Bouton d'export

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”.

Liste des gâteaux

Une fois connecté, cliquez sur “New cake”. Vous allez arriver sur cette page.

Nouveau gâteau

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.

Gâteau créé

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.

Changement de progression

Pensez également à libérer le carreau en recliquant sur le bouton “Owner”, pour que celui-ci soit accessible à d’autres contributeurs.

Quelques idées d’objets à ajouter

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 ;)

Location: городской округ Эгвекинот, Tchoukotka, District fédéral extrême-oriental, Russie