Bayesean Blog - Desktop, Mobile and IOT Developer Blog


Delphi FMX Leaflet Plotter using OSM Maps

Posted on 31st Jul 2018 in Delphi FMX


delphileafletplotter28.png

Project Background

 This is a FMX project to View and Plot latitude and longitude points on the OSM (Open Source Mapping layers) in the browser component. Use the excellent ‘Scriptgate’ library created by Jun HOSOKAWA (install through the Gettit Manager) to make call-backs to the leaflet plotting library using pure Delphi to extract the synchronized plotted points and toggle editing /read- only on the map. Note! No Google Maps are used and only free Open-Source libraries are used to create this example.

 By making use of the open source JavaScript libraries, all the processing is performed in the browser without having to create an extra Delphi layer to code and perform these functions. This makes it light enough for use in a Mobile Application.

leaflet.gif

Components used

 Delphi FMX standard components:- Toolbar, Browser, buttons and memo. This could easily be used in a VCL application.

  • js is a mature open-source mapping JavaScript library which has a huge following with all sorts of open-source supporting libraries that will provide a solution for any type of mapping requirement.
  • Leaflet plotter is found in Github is just one of these add-on libraries which allows plotting onto a leaflet map.
  • Scriptgate is a fantastic call-back light-weight library that allows Delphi to communicate with the Browser by overcoming the CORS restriction in the cross platform browser component. First install the component through the Gettit Manager and only then can you compile the example.

 Difficulty Low

An understanding of HTML, CSS and JavaScript would help you to understand the logic of the application design.

 Project structure

Delphi Project

 The project consists of a main form and a HTML page plotter.html. The html page acts as the Interface page for both Delphi and JavaScript to communicate with and also will be the page that will be loaded into the browser to show the OSM map.

 SRC

 This holds all the js and css files.

  • js and leaflet.css are part of the leaflet JavaScript mapping library.
  • Leaflet, plotter.js and plotter.css are from the open-source plotting library which has all the plotting functions and the look and feel of the plotted line and plotted point.

 Images

This holds standard images for leaflet.js. In this application these images are not used and the images can be removed.

elevationstructure3.png

Adjustments

The code of the Original Leaflet Plotter library code for the plotter.js and plotter.css has been adjusted to show a plotted blue- line with a round blue geo-point icon. The original featured a bland square gray- icon.

Code

As all the work is performed in the html file.  Let’s take a good look at the two main functions that are required to interface with the Delphi code.

The first function toggles the plotting process from Read-Only to Edit and Visa-Versa and calls an existing function  ‘plottedPolyline.setReadOnly()’ within Plotter.js. This function is set up to allow Delphi to call this function directly using ‘Scriptgate’.

 

    // Trigger for toggling readonly property

      var readOnly = false;
      function toggle(actual){
      if (actual== "read"){
      plottedPolyline.setReadOnly(readOnly);
      } else  if (actual== "edit"){
      plottedPolyline.setReadOnly(!readOnly);
      }
       if (actual== "read"){
       return 'Editing';
       }else if (actual == "edit"){
        return 'Read Only';  }
       }

 

Back in the FMX main form the ‘editbuttononclick ‘ method becomes a toggle button which will toggle  to read / or edit and this will call the above function using the ‘FScriptGate.CallScript’ function.

 

procedure TForm4.btneditClick(Sender: TObject);
begin
if btnedit.text = 'Read Only' then
begin
FScriptGate.CallScript('toggle("read")',
procedure(const iResult:string)
begin
  btnedit.Text:= iResult;
end
);
 end
 else
if btnedit.text = 'Editing' then
begin
FScriptGate.CallScript('toggle("edit")',
procedure(const iResult:string)
begin
   btnedit.Text:= iResult;
end
);
end;
end;

 

The second function will call all the latitude and longitude points sequentially form plotter.js. The plotter.js library uses leaflet.js to track all ‘latlng’ changes and updates. The function within Plotter.js called is ‘plottedPolyline.getLatLngs()’. All the points are extracted into a variable using a ’ for ‘ statement.

 

      function getpoints(){
      var Points = plottedPolyline.getLatLngs();
      for(var i=0; i < Points.length; i++) {
      if(map.getBounds().contains(Points[i])) {
           return Points;
        }
      }
      };

 

In the FMX main form the buttononclick method calls the above function using ‘FScriptGate.CallScript’ function and fills the memo with the latitude and longitude points. The points are loaded as text(string).

 

procedure TForm4.Button1Click(Sender: TObject);
begin
FScriptGate.CallScript('getpoints()',
 procedure(const iResult:string)
begin
  memo1.Text:= iResult;
end
);
end;

 

Running the Project

Ensure that you have connection to the Internet before running the Application as it needs to call the OSM Maps to download the correct tile(s) to be viewed in the browser.

The plotting is essential a new map overlay.  A left click will add a plotted point and update the plotted points list. This point can be repositioned with left mouse-down and dragged.

Double clicking the point will delete the point and update the internal plotted points list.

 Summary – Where to Next?

Whilst this application is barebones in design. With a little extra coding on your part, it can become a fully-fledged application by adding functionality such as extracting to GPX coordinates and adding elevation data. Either Delphi or JavaScript would work, however I would suggest making use of the light- weight JavaScript libraries for designing up an Android / IOS app. For the purest Delphi coder, the uploaded data can be coded using Delphi GPX libraries and ideal for a VCL or FMX Desktop Windows App.

I am sure you found this as interesting as I enjoyed putting this code together.

 

Feel free to download the code from Here

Download Code

 

Happy Coding

 


Lauro      Commented   2 months ago Reply

Congratulations on the Code! This example can be used in DBGrid to make the Tree feature. | Customers A | -Sales $ 100.00

Add a Comment

9+5

Recent News

Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB
Delphi Libusb Library Introduction
Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App
Delphi FMX Leaflet Plotter using OSM Maps
C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout

Categories

Bootstrap 4
Delphi VCL
Delphi FMX
Ajax
Bootstrap 3
CSS
XE4>Delphi > XE4
Delphi < XE4

Archives

October 2018

Delphi VCL Buttons in DBGrid
Two Helper Apps for Delphi LibUSB

September 2018

Delphi Libusb Library Introduction

August 2018

Delphi Object directly to a Json string in a REST Client
Delphi using Environment Variables in your App

July 2018

Delphi FMX Leaflet Plotter using OSM Maps

June 2018

C2PAS32 Convertor Application
C to Delphi Open Source Convertors Shootout
Delphi command-line programs with DOSCommand

May 2018

Delphi PDF Embedded viewer with PDF.js

March 2018

Delphi FMX - Changing TCharacter to TCharHelper
Make Your Delphi App POP using Javascript!

January 2018

Delphi FMX Dashboard using Chart.JS
Delphi FMX Form Docking

December 2017

PHP Slim REST Server & Delphi Auth Part 5

November 2017

Delphi FMX REST Client App Part 4

October 2017

Delphi VCL REST Pricing Client App Part 3

September 2017

Delphi REST VCL Client Basic Auth Part 2B

August 2017

Delphi REST Client Part 2A
PHP PDO REST Server Part 1

July 2017

PHP REST Server and Delphi Client Intro

June 2017

Delphi SQLite Encryptor-Decryptor Tool
Updating Applications Manifest using Delphi

May 2017

Create a Visual IP Address Geolocation with PHP

March 2017

PHP Downloader using Countdown timer
PHP File Downloader from a Inbox Selection

February 2017

Javascript Image-File Uploader with ThumbViewer

January 2017

Morris Charts and PHP-PDO

December 2016

CSS to create a functional Toggle Button