Blog

All Blog Posts | Next Post | Previous Post

Visualize your routes with TMS FNC Maps Summer Delphi project

Thursday, July 25, 2024

It's summer time, the ideal time for outdoor activitities. One of my personal favorite outdoor activitities is biking. And when I go for a bike tour, I want small roads, little traffic, nice landscapes and places where I have never been before. So, in this summer project, I'm going to use the power of Delphi, TMS FNC Maps and Google Maps to preview the biking routes I prepare so that I can see in advance there are no ugly, high traffic roads with industry around it. When it is quality time for a biking tour, I want the quality of the tour to be as high as possible.

Map service selection

TMS FNC Maps was created with the specific goal in mind to be mapping service neutral and to enable switching between a multitude of mapping services with a single property. In this Summer Delphi project, we will use the Google Mapping Service, specifically as we will want to take advantage of Google StreetView, a capability unique to the Google service. So, we drop a TTMSFNCGoogleMaps component on the form and we will need to set the API key obtained from Google at its developer console. We will use a TTMSFNCGoogleMaps component on the form to visualize the GPX file and another one to show the pictures along the route.

Start from a GPX

The GPX file format is a standard file format for sharing routes. A GPX file can be transfered to a small bike GPS system like Wahoo and this way, it is very easy to follow a route from start to finish. On the internet and among bike loving friends, there is an abundance of GPX files. Another convenience is that we know the distance of the route in advance so we can select the right distance based on the time we want to devote to biking. TMS FNC Maps has built-in support to import and export GPX files, so as a first step, let's add the code to load & visualize a GPX file on the map. This is not more than this small code snippet:

if OpenDialog1.Execute then
begin
  TMSFNCGoogleMaps1.Polylines.Clear;
  TMSFNCGoogleMaps1.LoadGPXFromFile(FileName);
end;

Loading the GPX file will add a polyline to the map, so when we load a new GPX file, we first delete any possible polyline created from a previously loaded GPX file.

Note that the LoadGPXFromFile has a few extra parameters other than the file name. It has parameters for setting the polyline stroke color and width and also show timestamps and elevation information that might have been stored in the GPX file. But for this example, we are not going to use this. The default settings to zoom & pan the map to bring the GPX route fully in view is used.

So, that was the first easy part: allow us to select a GPX file and have it displayed on the map.

View the location via Google StreetView

Google Streetview allows us to look in a specific area, based on address. So, we are going to take advantage here of Google StreetView to get a glimpse of the area where the biking tour is planned. Via TMS FNC Maps, using Google StreetView becomes super easy. To programmatically invoke StreetView at a specific location, we first set the location via:

TMSFNCGoogleMaps.SetCenterCoordinate(CenterCoordinate);

CenterCoordinate is a record structure of longitude & latitude.

Next, we can enable StreetView via

TMSFNCGoogleMaps.Options.StreetView.Enabled := True;

But there is something more to it! We will want to specify in what direction to look at the coordinate. The direction for looking via StreetView is set with the Heading property:

TMSFNCGoogleMaps.Options.StreetView.Heading := Round(CalculateBearing(FirstCoordinate, SecondCoordinate));

Here the heading is calculated via a TMS FNC Maps helper function CalculateBearing that calculates the direction between 2 coordinates. In this example of the biking route, the direction is quite simply determined from 2 consecutive points along the route.

Animating StreetView along the route

Also the next steps are really simple thanks to TMS FNC Maps. We can find all recorded coordinates along the route via the Polyline coordinates array that is the result from importing the GPX file.

We move from start to end coordinate and always take 2 consecutive coordinates, move to the new start coordinate and set the heading to point to the next coordinate. On the map visualizing the route, we update a marker to indicate where the view along the route is from:

c1 := TMSFNCGoogleMaps1.Polylines[0].Coordinates.Items[Idx].Coordinate;
c2 := TMSFNCGoogleMaps1.Polylines[0].Coordinates.Items[Idx + 1].Coordinate;
TMSFNCGoogleMaps1.Markers[0].Coordinate := c1;
TMSFNCGoogleMaps2.SetCenterCoordinate(c1.ToRec);
TMSFNCGoogleMaps2.Options.StreetView.Heading := Round(CalculateBearing(c1.ToRec, c2.ToRec));

Finally, we can also save the Google StreetView image to file via

TMSFNCGoogleMaps2.CaptureScreenShot(
  procedure(const AScreenShot: TTMSFNCBitmap)
  begin
    AScreenShot.SaveToFile('.\'+FileName + Idx.ToString+'.png');
  end
);

Note that calling CaptureScreenShot from the map is an asynchronous call, hence the anonymous method handling it. With this method, we generate a series of views along the route. When we animate the marker, i.e. position along the route, position Google StreetView to this location and capture a screenshot, we get a series of PNG files. Putting all these PNG files sequentially together enables us to get a sort of video preview of the bike tour we are going to take and approve the road is attractive before starting!

Using FFMPEG to create a video

As a bonus, let's now convert all StreetView obtained images to a video. We can use the free command-line tool FFMPEG for this. Having never used FFMPEG before, I turn to ChatGPT to ask a command-line for converting a series of images into a video.

TMS Software Delphi Components

The response is almost directly usable. Just to make it a bit slower, I chose the framerate of 5:

..\bin\ffmpeg -framerate 5 -i Chateaux_de_frasnes%d.png -c:v libx264 -pix_fmt yuv420p chateaux.mp4

and FFMPEG generates this first video:

Admitted, the StreetView images and especially the sequence of it is up for improvement (I think for example when the bearing changes a lot between 2 steps, additional pictures in interpolated steps should be taken) it is at least something to quickly have a better idea of whether a bike route is worth biking or not. And with that, I hope other Delphi biking lovers will have a higher quality summertime with this free tool.

Get started

Last week, we've just released the newest version of the unique & feature-rich TMS FNC Maps product. The fully functional trial version can be downloaded and you can discover its power with all of the included mapping services, including the fully free OpenStreetMap or LeafletJS maps!

Grab the source code of the presented Delphi Summer project here, request a Google Maps JavaScript API key and you can play with this sample project as well.

Bruno Fierens

This blog post has not received any comments yet.