Угловой радиус 2/4 мапбокса вокруг маркера

Кто-нибудь знает, можно ли добавить круг/радиус вокруг маркера с помощью angular2-mapbox?

Я знаю, что это невозможно из коробки, но, может быть, это не так уж и сложно?

Любые предложения очень приветствуются.

<mapbox [center]="[-5.646973, 52.087483]">
<mapbox-marker
    *ngFor="let marker of map.markers"
    flyTo="16"
    [image]="marker.image"
    [coordinates]="marker.coordinates"
    [popup]="marker.popup"
    [data]="marker.data"
    (click)="markerClicked($event)">
</mapbox-marker>

Link to repo: repo

Это все, что они поддерживают, я думаю.


typescript angular mapbox mapbox-gl
person Community    schedule 07.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Маркером в mapbox является HTML DOM, поэтому вы можете использовать CSS для стилизации маркеров (т. е. не относится к библиотеке угловых компонентов mapbox).

Для этого укажите в своем CSS с className .marker и примените требуемые стили CSS.

пример

.marker {
  border-radius: 50%;
  border: 1px solid #f00;
}

Предполагая, что вы просто хотите сделать круг CSS самостоятельно

обвести

.marker {
  border-radius: 50%;
  background-color: red;
  height: 10px;
  width: 10px
}

Вы можете использовать псевдоселекторы, чтобы создать элемент круга после и соответственно расположить его.

псевдо

.marker:after {
  content: "";
  display: block;
  border-radius: 50%;
  background-color: red;
  height: 10px;
  width: 10px
}
person Denis Tsoi    schedule 29.06.2017
comment
@ Драгос Подару, это ответ на твой вопрос? - person Denis Tsoi; 04.07.2017