Blog
All Blog Posts | Next Post | Previous Post
Display EV charging station locations with TMS FNC Maps for Delphi
Bookmarks:
Wednesday, November 22, 2023
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
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.
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
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
Bookmarks:
This blog post has not received any comments yet.
All Blog Posts | Next Post | Previous Post