Map Markers are placed incorrectly at low zoom levels

[boonboonsiri]

Issue

Low zoom levels using markers are broken (ie the marker doesn't appear in the correct location), for latitude

Working Zoom Level (marker on Zurich)

http://localhost:8080/styles/test-style/static/8.5432,47.3669,10/1000x1000.png?marker=8.5432,47.3669|https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png|scale:0.1|offset:0,30

Zoom Level Broken

http://localhost:8080/styles/test-style/static/8.5432,47.3669,1/1000x1000.png?marker=8.5432,47.3669|https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png|scale:0.1|offset:0,30

Config used looks something like this

{
  "options": {
    "paths": {
      "styles": "styles",
      "fonts": "fonts"
    },
    "allowRemoteMarkerIcons": true,
    "allowInlineMarkerImages": true
  },
  "styles": {
    "test-style": {
      "style": "osm-bright/style.json",
      "tilejson": {
        "type": "overlay",
        "bounds": [8.529446, 47.364758, 8.55232, 47.380539]
      }
    }
  },
  "data": {
    "openmaptiles": {
      "mbtiles": "zurich_switzerland.mbtiles"
    }
  }
}

Thoughts on why this is happening

I did some investigating. Below is the code that I think needs to be fixed.

tileserver-gl/src/serve_rendered.js

Lines 338 to 380 in 2a441a0

	const precisePx = (ll, zoom) => {
	const px = mercator.px(ll, 20);
	const scale = Math.pow(2, zoom - 20);
	return [px[0] * scale, px[1] * scale];
	};
	/**
	* Draws a marker in cavans context.
	* @param {object} ctx Canvas context object.
	* @param {object} marker Marker object parsed by extractMarkersFromQuery.
	* @param {number} z Map zoom level.
	*/
	const drawMarker = (ctx, marker, z) => {
	return new Promise((resolve) => {
	const img = new Image();
	const pixelCoords = precisePx(marker.location, z);
	const getMarkerCoordinates = (imageWidth, imageHeight, scale) => {
	// Images are placed with their top-left corner at the provided location
	// within the canvas but we expect icons to be centered and above it.
	// Substract half of the images width from the x-coordinate to center
	// the image in relation to the provided location
	let xCoordinate = pixelCoords[0] - imageWidth / 2;
	// Substract the images height from the y-coordinate to place it above
	// the provided location
	let yCoordinate = pixelCoords[1] - imageHeight;
	// Since image placement is dependent on the size offsets have to be
	// scaled as well. Additionally offsets are provided as either positive or
	// negative values so we always add them
	if (marker.offsetX) {
	xCoordinate = xCoordinate + marker.offsetX * scale;
	}
	if (marker.offsetY) {
	yCoordinate = yCoordinate + marker.offsetY * scale;
	}
	return {
	x: xCoordinate,
	y: yCoordinate,
	};
	};

Basically what I believe is happening is that if the height of the requested image is too large, the map will hit it's max zoom and stop zooming for lower zoom levels, ie notice that the map at zoom level 1 is the exact same as the map at zoom level 1.8 if you request an 1000x1000 image. Because of this, I believe the mercator projection is still expecting the map to be furthered zoomed out, while the zoom of the image is the same and thus causing a mismatch. Not sure what the fix is though.

Curl 1

http://localhost:8080/styles/test-style/static/8.5432,47.3669,1/1000x1000.png?marker=8.5432,47.3669|https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png|scale:0.1|offset:0,30

Curl 1.8

http://localhost:8080/styles/test-style/static/8.5432,47.3669,1.8/1000x1000.png?marker=8.5432,47.3669|https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png|scale:0.1|offset:0,30

 
 
 

About

Macos: 13.5.1
Docker: 4.24.0
TileserverGL: 4.5.2

[acalcutt]

If someone has an idea to fix this I would love a PR

[Caerbannog]

At what zoom levels does the problem appear?
Could it be related with this special case?
#1075

[acalcutt]

Testing with these urls it seems like it could be something like that

Zoom level 1
https://tiles.wifidb.net/styles/WDB_OSM/static/8.5432,47.3669,1/1000x1000.png?marker=8.5432,47.3669|marker-icon.png

Zoom level 2
https://tiles.wifidb.net/styles/WDB_OSM/static/8.5432,47.3669,2/1000x1000.png?marker=8.5432,47.3669|marker-icon.png

Testing past zoom level 2 and on looked ok