Hello Robert! Thanks for the report.
So I’m actually seeing a similar pixel quality both on my Mac and Windows devices (in Chrome). That being said, the quality isn’t great — it’s definitely not as good as you were probably intending with the markers.
The most likely culprit here is the scaling — you probably have the markers uploaded at a much larger size and you’ve scaled them down a lot, and due to different scaling algorithms inside Mapbox symbol layers, sometimes I see a lot of aliasing.
First, try adding your icons at the real size you’re going to show them — see if that helps. If not that, then try scaling them at a regular amount (ie, 1/2 the size, 1/4 the size, and so on).
Let me know if that seems to give a better result. Otherwise I can try to implement some other possible solutions, but it’s difficult due to a few pieces that aren’t totally in my control here.
Hi, I tried the test you suggested, but the marker still doesn’t look clear enough.
When the original PNG is scaled down to the size needed for the map, it loses a lot of quality and looks blurry and not very sharp. And in this case is even worse because the lost of quality affect to all browsers and OS’s.
Ideally, we should be able to use SVG files or implement the imageSmoothingQuality property Rob suggested.
Would it be feasible to implement either of these two proposals?
SVG I imagine is not possible to render into a canvas element, lets double check Mauricio as I’m not sure we did try with exact increments of the scaling factor.
Hi guys, remember, we aren’t directly using the canvas element here to do the work. We are using Mapbox or Maplibre, so we don’t have complete control and access to every canvas method.
Involved methods include:
You can see that SVGs aren’t supported directly, and I believe I have a method that converts any SVG into a proper raster if it’s going to be used as an icon because of this limitation.
If scaling down your image to the size to be used on the map makes it blurry directly, then obviously simply placing it on the map won’t make it a good quality. I can see that the images being loaded are large: https://kaplanliving.com/tachyon/sites/3/2025/04/282×400-3.png and https://kaplanliving.com/tachyon/sites/3/2024/08/282×400-1.png on the current site. Scaling these down can definitely result in artifacts. Again I’d try playing with the size to get the ideal size in Photoshop or whatever image editing program, that looks good to you. Then use that size directly.
If you need, I’m happy to experiment a little myself to get the sharpest icon I can get, but I’ll probably be more or less working on the original image size and avoid scaling since I believe that tends to cause more issues.
Thank you very much for your reply.
Working with the original image has definitely improved the rendering, although the slight loss in quality will likely be noticeable on other operating systems as well.
We started from the desired icon size on the frontend, multiplied it by two, and then applied a 50% scale. We also tried with a 3x size (33% scale), which gave slightly better results.
Thanks again for your willingness to help!
OK, just let me know if you want me to do some testing directly and see if I can get better results?
Just marking this as resolved, please let me know if you need any more help!
