Displaying icons with exact size

Question

I'd like to have exact-sized icons on my map, where each icon takes up a predefined size in meters on the map. Additionally, these need to be changed at runtime, so generating an image ahead of time that covers the whole map is a no-go. My use case is displaying to-be-painted pavement markings, so a 3 meter square is probably the largest thing displayed. Matching the rotation and pitch is easily done with setting icon-rotation-alignment to map , leaving the issue of size. I could scale the icon-size by interpolate -ing the zoom factor ( ['interpolate', ['exponential', 2], ['zoom'], 15, 1 / 72, 22, 1 / 0.56] ), but I would then run into problems with the difference in latitudes with the Mercator projection . It would probably be possible, though, to interpolate based on both the zoom and current latitude.

Alternatively, some demos that look to be doing similar tasks of aligning real-world sizes are Add a 3D model , Add a canvas source , Add a custom style layer (although I don't think I need that), and Add an image . My understanding of how I would use each:

• Add a 3D model: I would use three.js (or another renderer) and set it up with the location and image of each symbol, then use it to draw.
• Add a canvas source: Either create a very large canvas (probably would use too much RAM) or one canvas per symbol (overhead?), then draw the symbol
• Add an image: Same decision, but with URLs instead of canvases

Which of these would be the best option?

Answer 1

You can do that easily with a raster layer in mapbox but you'll need to do on your side the calculations of the length in meters for the 4 corners of the image using a conversion that considers latitude.

Other option if you want to add an image in exact meters size (considering the latitude), just check this out made with the latest version of threebox

You'll be able to load any image (and any 3D model) and define its size in meters (millimeters indeed) with only a few lines of code, but using a threejs plug-in for a pure 2D task is probably like shooting fish in a barrel.