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

Conclusion

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

Some links

• Pic4Carto.js Git repository: https://framagit.org/PanierAvide/Pic4Carto.js
• Photo mapping on wiki: https://wiki.openstreetmap.org/wiki/Photo_mapping
• Pic4Carto, an efficient library for remote street-level mapping using Pic4Carto.js: http://projets.pavie.info/pic4carto/
• More about the author of this tutorial (in French): http://pavie.info/