Delphi FMX et OpenStreetmap

Question

I want to add a map in my application that contains a list of nearby stores. I wanted to integrate OpenStreetMap but I don't know where to start, even when I tried to add the TWebBroweser component and i put the url" www.openstreetmap.org" i don't have a result, and i tried to make a html url

    OpenStreetMapsPage: AnsiString =
'<html> '+
'<head> '+
'<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> '+
'<script src="http://www.openlayers.org/api/OpenLayers.js"></script> '+
'<script type="text/javascript"> '+
'  function initialize() '+
'{'+
'    map = new OpenLayers.Map("map_canvas");'+
'    map.addLayer(new OpenLayers.Layer.OSM()); '+
'    var lonLat = new OpenLayers.LonLat( [Lng] , [Lat] ) '+
'          .transform( '+
'            new OpenLayers.Projection("EPSG:4326"), '+
'            map.getProjectionObject() '+
'          ); '+
'    var zoom=16; '+
'    var markers = new OpenLayers.Layer.Markers( "Markers" );  '+
'    map.addLayer(markers); '+
'    markers.addMarker(new OpenLayers.Marker(lonLat)); '+
'    map.setCenter (lonLat, zoom); '+
'}'+
''+'</script> '+
'</head> '+
'<body onload="initialize()"> '+
'  <div id="map_canvas" style="width:100%; height:100%"></div> '+
'</body>'+
'</html>';

and nothing, someone can help me please and thank you

Why don't you simply use the `TMapView` component ? Otherwise you can use the WebBrowser of Kastri component https://github.com/DelphiWorlds/Kastri/tree/master/Demos/WebBrowserFileChooser — Bosshoss, Mar 09 '21 at 15:07
because if I understood tmapview uses google map api and it's not free — Mahmoud, Mar 09 '21 at 15:11
You are on Windows ? You can load your WebBrowser with an url, because your html show a blank page. — Bosshoss, Mar 09 '21 at 15:13
Then, you html string result a blank page, use an url to load it with Kastri component or use TMapView with Google Map API, it's free on mobile — Bosshoss, Mar 09 '21 at 15:19
i'll tried to use Kastri, but for Google Map API it's not totally free https://cloud.google.com/maps-platform/pricing — Mahmoud, Mar 09 '21 at 15:23
You will get same result if you use your var, as I repeat it's a blank page, even a on a normal browser on windows. Load it with an url. — Bosshoss, Mar 09 '21 at 15:24
@Bosshoss I must have missed where I created a WebBrowser component — Dave Nottage, Mar 09 '21 at 22:42

score 2 · Answer 1 · answered Mar 09 '21 at 16:16

There are several possibilities... One that I am using in one of my application, soon to be released as open source, is to use a "tile server" to get "tile" for the map area you are interested in.

A map tile server will return a PNG file with a tile image. Like this. You can find documentation here.

The tile can be displayed in your application just like any other image. You have just to display tiles in a grid.

In the example above, the URL is: https://tile.openstreetmap.org/7/63/42.png In that URL, 7 is the zoom factor, 63 is TileX and 42 is TileY. TileX, TileY can be compute for latitude, longitude and zoom factor with the following code:

function LongitudeToTileX(
    lon : Double;
    z   : Integer) : Integer;  // Zoom factor 0..19 
begin
    Result := Floor((lon + 180.0) / 360.0 * (1 shl z));
end;

function LatitudeToTileY(
    lat : Double;
    z   : Integer) : Integer;
begin
    Result := Floor((1.0 - ArcSinh(Tan(DegToRad(lat))) / PI) / 2.0 * (1 shl z));
end;

To display a map, you compute TileX and TileY for top-left corner and bottom-right corner of your total map image for a given zoom. Then you iterate on TileX and TileY to get the tiles using any HTTP component (I use ICS).

I keep the tile I already downloaded in files on local storage so that once downloaded, I never download it again, except if my local file is to old.

Delphi FMX et OpenStreetmap

1 Answers1