mapbox / mapbox/mapbox-maps-ios

iconBorderRadius for SymbolLayer

Open
#2,068 1 comment 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged feature :green_apple:
Dominant language
Swift
Stars
601
Forks
196
PR merge metrics
No merged PRs in 30d

Description

## New Feature

Is there any way to add a border radius to an icon within a `SymbolLayer`, or an equivalent way of rounding the edges and/or make a circular mask on an image from a given url?

The most straightforward use-case for this would be to show circular remote images of locations, users, etc. on the map that are dynamically coming from a remote source and are fully rectangular.

I'm aware that you can modify a `UIImage` to have the desired edge radius before adding it to the map style, however this is fairly cumbersome, and feels like it should be specified at the layer style level instead of the image level. I'm aware that you can achieve a basic circular image on top of the map using a view annotation as well. An alternative implementation could also be to allow an image background in a `CircleLayer`, but this seems fairly restrictive too.

![image](https://github.com/mapbox/mapbox-maps-ios/assets/5520838/bc29d18b-2b2b-4847-b325-3e39f85bbddb)

Thanks for the great work so far and congrats on the v11 release!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the SymbolLayer image-styling entry point and compare the CircleLayer and view-annotation alternatives mentioned in the issue. Define the supported layer-level behavior and acceptance cases for rounded or circular remote images; the work is done when the chosen API and its rendering behavior are documented and tested.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, swift
Domain
computer-graphics, mobile-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.