BlogAll Blog Posts | Next Post | Previous Post
Friday, January 12, 2024
So, let's explore how much work it would take to make an application that allows us to visualize GPX files on the map. It turns out we can achieve that in less than 10 minutes!
Obviously this application will run in the browser, so the first thing to do is allow the browser to get to your GPX files. For this, we add the component TWebFileUpload on the form. This component allows to drag files from the operating system in the browser to open these or to click to start an Open File Dialog to pick the file.
The code we need to add here is to handle the TWebFileUpload.OnDroppedFiles that gets triggered when a file is dropped or picked via the dialog. We need to handle this event to instruct the component how to get access to the file. Since we want access to the file as text, the code to implement here is:
procedure TForm2.WebFileUpload1DroppedFiles(Sender: TObject; AFileList: TStringList); begin if WebFileUpload1.Files.Count > 0 then WebFileUpload1.Files.GetFileAsText; end;
The TWebFileUpload component will then in turn trigger the event OnGetFileAsText when it loaded the file and it is available as text. From there, we can have the XML GPX file processed to return an array of lat/lon coordinates. And then this array is used to draw a polyline on the map:
procedure TForm2.WebFileUpload1GetFileAsText(Sender: TObject; AFileIndex: Integer; AText: string); var ja: TJSArray; begin ja := GPXToCoordinates(AText); WebLeafletMaps1.AddPolyLine(ja, clBlue, 3); end;
There is not much more to this than that. One extra thing is to add a button with which we can remove the displayed GPX tracks again. Also here, one line of code:
procedure TForm2.WebButton1Click(Sender: TObject); begin WebLeafletMaps1.ClearPolylines; end;
The result becomes:
So, all in all, to create this fully functional app, all we had to do was write 7 (seven!) lines of code!
If you want to write zero lines of code, download the full source code of this app here and compile and run this app in 3 (three) seconds.
Or want to see the result even faster, open this link to the live demo.
Discover TMS WEB Core!
Grab the free TMS WEB Core trial version now and discover for yourself the unparalleled productivity gain to develop web client applications using Object Pascal and RAD component based development. Your web apps will run from every device with a current browser and you can deliver software solutions to your customers with zero deployment.
This blog post has received 4 comments.
All Blog Posts | Next Post | Previous Post