Blog

All Blog Posts  |  Next Post  |  Previous Post

Display EV charging station locations with TMS FNC Maps for Delphi

Wednesday, November 22, 2023

TMS Software Delphi  Components

One of the challenges in today's mobility that is becoming more and more important: knowing exactly where you can charge your electronic vehicle (EV) to avoid running out of charge.
Currently this functionality does not come built-in with TMS FNC Maps. However, thanks to the versatility of the TMS FNC framework, this can be accomplished in just a few easy steps.
In this blog post I'm going to demonstrate how you can fetch data from a REST API, parse that data and display the relevant information on a map.


Steps to display EV charging station locations on a map

Find a suitable REST API

TMS Software Delphi  Components

First of all, we need to find a source for the data we would like to display. After comparing some of the available REST APIs which offer the possibility to fetch charging station data, I decided to go with OpenChargeMap. The main advantage of this particular service being that it is free to use.
All we need to do is sign up for a free account, register an app and you got yourself a free API key to start using the service.

TMS Software Delphi  Components


Building HTTP requests

Fortunately TMS FNC Core provides the necessary tools to quickly build and execute HTTP requests. The OpenChargeMap API provides a lot of parameters for the HTTP requests that return specific data. For now we're going to start with the most important one: find charging stations around a given location by providing a latitude and longitude coordinate. Make sure to replace the placeholder key value with the actual API key from the previous step.


type
  public
    c: TTMSFNCCloudBase;
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  c := TTMSFNCCloudBase.Create;
end;

procedure TForm1.FormDestroy(Sender: TObject);
begin
  c.Free;
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  c.Request.Clear;
  c.Request.ClearHeaders;
  c.Request.Headers.Add(TTMSFNCCloudBaseRequestHeader.Create('User-Agent', 'none'));
  c.Request.Method := rmGET;
  c.Request.Host := 'https://api.openchargemap.io';
  c.Request.Path := '/v3/poi';
  c.Request.Query := 'key=xyz123'
    + '&maxresults=10'
    + '&latitude=' + FloatToStrDot(TMSFNCLeaflet1.Options.DefaultLatitude)
    + '&longitude=' + FloatToStrDot(TMSFNCLeaflet1.Options.DefaultLongitude);
  c.ExecuteRequest(DoRequestGetChargeStations);
end;


Parse the JSON result data

Usually REST services return the requested data in JSON format.
This is an extract of the JSON data provided by the REST API. For this example, we are only interested in the Latitude and Longitude coordinates.


[
  {
    "AddressInfo": {
      "ID": 114474,
      "Title": "Vantage",
      "AddressLine1": "33 Park View Ave",
      "AddressLine2": null,
      "Town": "Jersey City",
      "StateOrProvince": "New Jersey",
      "Postcode": "07392",
      "CountryID": 2,
      "Country": {
        "ISOCode": "US",
        "ContinentCode": "NA",
        "ID": 2,
        "Title": "United States"
      },
      "Latitude": 40.7133979,
      "Longitude": -74.04439,
      "ContactTelephone1": "(201) 333-1222",
      "ContactTelephone2": null,
      "ContactEmail": null,
      "AccessComments": null,
      "RelatedURL": null,
      "Distance": 1.6687791812414279,
      "DistanceUnit": 2
    }
  }
]

Before we can display the locations on the map we need to parse the JSON to extract the list of coordinates.

uses
  FMX.TMSFNCUtils, FMX.TMSFNCMapsCommonTypes, JSON;

procedure ParseJSON(AJSON: string; var ACoordinates: TTMSFNCMapsCoordinateRecArray);
var
  o, ov: TJSONValue;
  jar: TJSONArray;
  I: Integer;
  ob: TJSONObject;
begin
  if AJSON <> '' then
  begin
    o := TTMSFNCUtils.ParseJSON(AJSON);
    if Assigned(o) then
    begin
      try
        jar := o as TJSONArray;
        if Assigned(jar) then
        begin
          SetLength(ACoordinates, TTMSFNCUtils.GetJSONArraySize(jar));
          for I := 0 to TTMSFNCUtils.GetJSONArraySize(jar) - 1 do
          begin
            ov := TTMSFNCUtils.GetJSONArrayItem(jar, I);
            ob := TTMSFNCUtils.GetJSONValue(ov, 'AddressInfo') as TJSONObject;
            if Assigned(ob) then
            begin
              ACoordinates[I].Latitude := TTMSFNCUtils.GetJSONDoubleValue(ob, 'Latitude');
              ACoordinates[I].Longitude := TTMSFNCUtils.GetJSONDoubleValue(ob, 'Longitude');
            end;
          end;
        end;
      finally
        o.Free;
      end;
    end;
  end;
end;

procedure TForm1.DoRequestGetChargeStations(
  const ARequestResult: TTMSFNCCloudBaseRequestResult);
var
  c: TTMSFNCMapsCoordinateRecArray;
  I: Integer;
begin
  if ARequestResult.Success then
  begin
    ParseJSON(ARequestResult.ResultString, c);
  end;
end;


Display the locations on the map

TMS Software Delphi  Components


Now that we have all the coordinates available, we can add markers to the map to display the coordinates from the request result on the map.
After adding all the markers, we add a call to ZoomToBounds with an array consisting of all marker coordinates to make sure the map is zoomed and positioned correctly so all the markers we just added are visible.
In this example I've used TTMSFNCLeaflet to display a map based on the Leaflet library. The main advantage of this particular library being that it is free to use. We don't even need to provide an API key. Just drop the component on the form and the map is displayed instantly. Note that the same functionality is available in the other supported mapping services in TMS FNC Maps such as Google Maps, Here Maps, ...

procedure TForm1.DoRequestGetChargeStations(
  const ARequestResult: TTMSFNCCloudBaseRequestResult);
var
  c: TTMSFNCMapsCoordinateRecArray;
  I: Integer;
begin
  TMSFNCLeaflet1.BeginUpdate;
  TMSFNCLeaflet1.Clear;
  if ARequestResult.Success then
  begin
    ParseJSON(ARequestResult.ResultString, c);
    for I := 0 to Length(c) - 1 do
    begin
      TMSFNCLeaflet1.AddMarker(c[I], '', ExtractFilePath(ParamStr(0)) + '\power.png');
    end;
    TMSFNCLeaflet1.ZoomToBounds(TMSFNCLeaflet1.Markers.ToCoordinateArray);    
  end;
  TMSFNCLeaflet1.EndUpdate;
end;


Conclusion

In just a few simple steps we are able display data from a REST API on a map.
All these features are available now in TMS FNC Maps for Delphi. You can download the latest trial version and start using them yourself right away!




Bart Holvoet




This blog post has not received any comments yet.



Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post