Position of custom markers with Leaflet

FNC TMS FNC Maps
1

I've noticed a difference in where custom markers are placed, between leaflet and the other services. This is with FNC Maps 4.0.0.0 and a VCL application, using a custom .png marker file.

To reproduce, drop the map control on a form, add a custom marker (I used a local one setting LocalFileAccess:=True) and zoom right in. You can leave the map centre and marker position as defaults. Switch between leaflet and e.g. OpenLayers services and the marker will move.

Or in my example shown here, I created 2 maps on the same form, set both to zoom level 18, set the left one to Leaflet source and the right to OpenLayers, added a custom marker to each and this was the result:

image
image1053×517 84.6 KB

As you can see, in the Leaflet version the icon is drawn with the specified lat/lon location in the centre, and in the OpenLayers version the icon is drawn with the specified lat/lon at the centre-bottom of the marker.

Dave

2

Hi,

I have not been able to reproduce this issue.
How exactly are you adding the marker to the map?
Does this only happen with a specific png file or with any png file?

This is the code I used and a screenshot of the result:

procedure TForm2.TMSFNCLeaflet1MapInitialized(Sender: TObject);
begin
  TMSFNCLeaflet1.BeginUpdate;
  TMSFNCLeaflet1.SetZoomLevel(18);
  TMSFNCLeaflet1.AddMarker(TMSFNCLeaflet1.Options.DefaultLatitude, TMSFNCLeaflet1.Options.DefaultLongitude, '', DEFAULTSTARTMARKER);
  TMSFNCLeaflet1.EndUpdate;
end;

image
image1573×802 84.7 KB

3

In my demo app (see below) I added the marker at design time, and set the iconURL at run time. In my actual app both are done at run time.

Zipped up demo here: Dropbox - TMCLeafletTest.zip - Simplify your life

My marker file is in there. I'll try with some other png markers.

Dave

4

So, I tried a different png marker grabbed from the internet, and then the position was correct in leaflet. However all of the icons I use in my application behave in the way I described. So the question is, what is it about specific markers that causes the difference in behaviour?

Dave

5

Can you please try using square images instead of rectangular?

We'll have to investigate if this behavior can be improved in a future version.

6

Thanks, I've taken one of my markers, made it square, and yes that fixes the problem.

I'll look out for a new version!

Dave

7

Hi TMS Team,

the same issue is here (Leaflet only). with square markers (48x48). it's visible if you have several markers. 1st marker is always ok, markers 2,3...all shifted / very visible if you apply zoom, because shift in 1/2 marker size.

my steps: I requested fnc direction from point 1 to point 2, via point 3, created polyline for path, and added 3 markers to the map.

result: marker 1 - ok. markers for p 2 and p 3 - all shifted / 24 pix by height in my case,

thank you.

8

Hi,

I have not been able to reproduce this issue.
Are you using the same image file for all markers or different images for each marker?
Does it happen with a specific image or with all images?

Can you please provide sample code that demonstrates the issue so I can further investigate this?

9

Hi Bart,
This happens only if markers have different size.
with TMSFNCMaps1 do
begin
Options.DefaultZoomLevel := 12;
LocalFileAccess := True;
AddMarker(arr[0], '', IconName[1]); // 24x24
AddMarker(arr[1], '', IconName[2]); // 48x48 !
AddMarker(arr[2], '', IconName[3]); // 24x24
AddMarker(arr[3], '', IconName[4]); // 24x24
end;
Please, see attached image.
FNC_Map_Leaflet_Markers_shift

10

As a workaround can you try increasing the canvas size of the 24x24 images to 48x48? With the image content itself aligned at bottom center. If all images have the same dimensions the marker positioning should work as expected.

We are currently investigating how this behavior can be improved in a future version.

11

No problem. I'll use other maps.
we have 100's of images / which are used as markers / with different size and even aspect ratio.
Thanks.