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?