We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

From photographic survey to street-level imagery integration in an OpenSource webgis: complete workflow

00:00

Formal Metadata

Title
From photographic survey to street-level imagery integration in an OpenSource webgis: complete workflow
Title of Series
Number of Parts
351
Author
License
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language
Production Year2022

Content Metadata

Subject Area
Genre
Abstract
For several years Gter has been involved in the development and maintenance of the webGIS related to the management of the road network of the Province of Piacenza. Recently, the client requested the integration of the images, deriving from the photographic survey of about 520 Km of routes, in the existing webGIS (an instance of Lizmap Web Client which public version can be found here catastostrade.provincia.pc.it/lizmap/lizmap/www/index.php/view/map/?repository=progettipubblici&project=catasto_strade_pub). In this case, the Public Administration needed the photographic survey in order to update a set of old images sparsely distributed along the network and to have a customized tool similar to services like Google Street View. Therefore, an integration of the Mapillary viewer in Lizmap Web Client has been proposed and developed; hence the survey was performed with a camera that uses front and back optics to have 360-degree photos. The workflow consisted of four main tasks. The first step involved the photographic survey of the road network using a GoProFusion360 mounted on a car that took photos of the surrounding environments. The next step consisted in the processing of the images, stitching the front and the back photos in order to obtain a 360-degree panoramic image. This step has been automated through the development of a Python script together with the use of the available software of the camera from the command line. About 50000 photos were uploaded on the Mapillary platform. Images have been integrated into the Lizmap Web Client webGIS through the Mapillary viewer and utilities. The integration was achieved by developing a new feature for Lizmap Web Client based on Mapillary JS, an Open Source library provided by Mapillary that helps developers interact with the Mapillary API. The final result is a tool that makes the Public Administration able to navigate and reach the photos uploaded on Mapillary directly from a window in the webGIS.
Keywords
202
Thumbnail
1:16:05
226
242
Speech synthesisMeeting/Interview
UsabilityDisintegrationOpen sourceLevel (video gaming)Archaeological field surveyWorld Wide Web ConsortiumData managementSpacetimeIntegrated development environmentExclusive orSatelliteAreaServer (computing)Client (computing)OpticsDistancePoint cloudDegree (graph theory)Computing platformComputer-generated imageryProcess (computing)Frame problemStapeldateiScripting languagePixelQuery languageEmailVolumenvisualisierungLevel (video gaming)Content (media)Point (geometry)Web browserOpen sourceLibrary (computing)Scripting languageOpen setArchaeological field surveyComputing platformDigital photographyClient (computing)Projective planeCASE <Informatik>INTEGRALFrame problemDescriptive statisticsMereologyAreaSinc functionGame theoryInterface (computing)Artificial lifeView (database)DistanceLine (geometry)Order (biology)ResultantSoftwareTask (computing)InformationDrag (physics)Server (computing)Drop (liquid)Web 2.0File viewerMoment (mathematics)Game controllerRootSlide rulePixelMaxima and minimaProcess (computing)Series (mathematics)Diallyl disulfideCoordinate systemData miningComputer filePresentation of a groupEmail1 (number)Computer iconDifferent (Kate Ryan album)Augmented realityExecution unitTrianglePosition operatorSoftware developerWeb-DesignerSign (mathematics)Mobile appObject (grammar)Suite (music)CircleFreewareWebsiteNear-ringLimit (category theory)Mixed realityImage resolutionSoftware development kitBitOpticsDegree (graph theory)Arrow of timeRotationEvent horizonStapeldateiWordInteractive televisionImmersion (album)Computer animationXML
Transcript: English(auto-generated)
Hello, hello to everyone, I'm Francesco Bursi, I'm speaking from Italy, and okay, let me share the screen and switch off the camera. So, okay, thank you.
Okay, okay, I'm Francesco Bursi, I'm from Italy, and okay, today I'll talk about this project, so from photographic survey to street-level imagery integration in an open source web GIS. Yes, this is a complete workflow that we as GTAR followed.
But before diving into this project, let me introduce myself and the company I work for. So, I'm a GIS developer, and I work for GTAR, that is a small and dynamic company based in the north of Italy,
and it was founded as a spin-off of the University of Genova in 2010. And in GTAR we have two main business units, one that works in GNSS, so precise positioning mostly,
and the other one more involved in GIS, both desktop and web I would say. I mostly work on the second one, so in the GIS business unit, but not only. In GTAR we work with a lot of different open source tools, libraries and software.
We also try to contribute to some of them. We work with QGIS, QGIS server, Lidmap web client, GeoServer, Postgres, and PostGIS of course, and many more.
For example, yes, in web development we use Open Layer and Leaflet libraries to render geographic data. We take advantage of GDAL and OGR tools, and yes, many more of course. This year we are bronze sponsor for the Phosphor G, and we are really excited to participate in this awesome event.
But after this really short introduction, let me talk about the summary and what I will present to you.
Today I'll talk and I'll touch a lot of tools and platforms, so it will be a general overview of the workflow that we, and I mean we as a company, as GTAR, follow, that we follow after the
customer of ours expresses a need and does some integration for an existing web map. So, I start with a description of the project and the problems that involved in the first part a photo survey. That was accomplished by a colleague of mine, not by myself.
Then I briefly explain how we use Mapillary with the data from the survey and why we use Mapillary and what for. Before uploading the data from the survey to Mapillary, I also process the data, so the frames and photos.
And after the upload, I developed a tool to integrate the existing WebGIS with the Mapillary APIs and of course information. Okay, just a moment. Yes. Okay, so next slide.
As I said, let's start with a brief description of the needs of the customer. In fact, the customer needed and still needs to manage the root network of the country area nearby the city of Piacenza, that is south of Milan, the north of Italy.
They already have a web tool that helps them to keep the network under control. In fact, a few years ago, we deployed a server on a server farm of this customer, Lisma Web Client and QGIS Server as WebGIS.
But right now, at the moment of this project, they also needed to be able to access some photos of the roads from the map. They didn't have the photos, they wanted us to take the survey, take the
photos and access these photos in the web app, in the Lisma Web Client interface. Also, they wanted a final experience, so the results should be similar in their words as the infamous Google Street View experience with 360 degrees panoramas photo.
But of course, they wanted to use their data, so the photos of the survey. So, they asked the integration of Lisma Web Client interface with the possibility to
access these photos and views and they also asked us to take the photos. As a description of the project, the road network that we are talking about is more or less 512 kilometers long.
We immediately thought it would be a nice use case for integration between Mapirari and Lisma Web Client with Mapirari.
Since, as I'll explain in the next part, Mapirari is a platform that, among many other things, lets the user upload photos and access them freely. So, before diving into the description of Mapirari, let me talk about the survey and how it was done.
So, the colleague that took the survey used a camera with two optics back and front in order to obtain, after the stitching of the back and front photos, a 360 degree panoramic photo.
In this case, we used, as the Mapirari platform recommended, a GoPro Fusion 360 camera, but I don't think
that the brand is important, as long as the camera has two optics and, yes, it can do the work. The survey was done by mounting the camera on a car, so the colleague of mine mounted the camera on his car with the kit provided by the camera brand, GoPro, sorry.
But, yes, if you like medium to long distances, 512 kilometers, you can also use a bike and mount the camera on your helmet. The survey was overall quite easy, we didn't have a lot of issues, it took approximately a week.
The main issue was the weather, since we did the survey in December and in that part of the year, and in that particular region, so the country area nearby Milan, the weather is cloudy and foggy, and the humidity can lead to some wrecked photos and frames, and so we took advantage of the hours around midday.
The speed of the car was between 30 to 50 kilometers per hour, as we experienced that
with the highest resolution of the cameras, 16 megapixels, we experienced some good results with this speed limit.
Not limit, also with this speed, only with this speed. So, let's now talk a little bit about Mapillary. Mapillary, at first sight, is a platform where you can upload jet tagged photos, so photos with coordinates, and where you can access these photos publicly.
Of course, it is indeed much more, but let's not dive into it too much, since, yes, it could be really deep. But, as I said, it's possible to upload photos and to view them, as
it's represented in the GIF, of course, in this immersive way with interactive panoramas. Mapillary is free, or at least it's free from my experience, and it's partially open source, and by this I mean that the Mapillary team offers a client-side JavaScript library that is present on GitHub,
that everyone can access, and this library is used to interact with the API and to increase the viewer capabilities. So, the viewer capabilities is this part of the suite, so the viewer is the 360 degrees panorama photos.
Mapillary platform can also do basic object detection, as it can be seen in the GIF of the presentation, so it's easy to spot, for example, traffic signs and many other features.
That are listed on the documentation of the Mapillary platform, and it's also easy to show them in a map by accessing, I don't know if I said
this, but they offer a public API, so you can access this feature by API, so the position of the traffic signal can be accessed with the API, and can be rendered on another map outside the Mapillary platform, of course.
This is not a complete description, but for our need, it can do the work. So, let's continue with the presentation. After taking the photos of this survey, so after my colleague gave me the photos of this survey, I
had to upload these photos to my PR, but before this part, so before uploading, I had to stitch the front and the back frame in order to obtain panoramas or 360 degree photos, as we want to name them.
As it can be seen in the slide, this is the process. Since we had a lot of photos, more than 100,000 to stitch, I automatized the process via Python scripting, taking advantage of the free and recommended by the camera and the software.
So, that can be used also via command line, so it was easy to put part in the Python script, but I also tested the free and open source eugen that work really smoothly to stitching the photos.
In the script, I also automatized a lot of things, the most important ones are, for example, the check of the CSV file of each frame, in order to see if the coordinates of the photo were present or not, and the minimum amount of pixels in the picture, since we had some quality to be taken into account.
As already said, 100,000 photos were processed and stitched together, obtaining 50,000 panoramas or 360 degree photos.
And 5,012 kilometers of road were driven by my colleague during the photo survey.
And let's go now to the most central part of the task that we were asked to solve. So, the main task required was to be able to access the Mapiria re-infos
after uploading, of course, the photos on the Mapiria re-platform with a simple upload. I automatized this upload via batch script, but it can be done also with drag and drop, for example. And, yes, the main task was to access the Mapiria re-infos directly in the lead
map web client interface, so directly in the lead map web GIS map of the customer. So, to enable this feature, I increased the lead map web client capabilities by writing a quite simple, I would say, JavaScript script that was able to query the Mapiria API.
And, taking advantage of the Open Layer library, I was able to render the points of interest, so the photos geotagged of
the survey and its content, so the panoramas, the 360 degree photos, in a viewer, that is the tab inside the map. Of course, the viewer was rendered thanks to the Mapilary JS library that I told in the last few slides.
So, it was also possible to access only the required data, and so to filter the data of interest in order to avoid keeping in the web map of the customer all the data. So, Mapilary, people from all over the world can upload data, but we didn't want to upload in the web map of the customer the
data from all the people in the world, or at least from all the people that took the photo in this particular position in Milan.
So, we tried to, we didn't try, we filtered the data using only our customer photo. So, I would like to show you the final result, and the final result can be seen in the GIF.
So, in the web map, it's possible to click on a point of the layer. So, the layer is represented by green circles, where a red triangle represents the viewer, so the car, and that moves, that can
move along the road and can rotate as the viewer explores, the viewer, I mean the end user, explores the 360 degree panoramas photo. So, as you can see, I'm on my map, I can interactively play with the panoramas photos, and the red triangle rotates.
Ok, so, this is our work, as I said, a lot of photos, so every point represents a photo, and you can go from one photo, one stitched photo, to another, moving the triangle or moving with the arrows in the viewer.
So, yes, as you can see, there was the snow this winter in this area, and the weather was good.
It is also possible to access directly the Mapillary, clicking on this icon of Contributors 2021, it is possible, as I said, to access directly the Mapillary platform. In conclusion, this project, in this project, we took advantage of a lot of tools, and
the most important ones, I would say, are lead map web client, QG server, and Mapillary. So, a big thanks also to the companies behind this project, and to the community behind this project.
Of course, I'm open to suggestions, and to questions, or doubts, or whatever. You can reach me at my email, my working email at Jitr, or you can search me on LinkedIn, or on GitHub, this is my username.
Yes, it was a pleasure to hold this presentation, and really thank you for your time, and let me know if you have some questions for me. Bye.