Немного не понятно что в GeoJson. И как в GeoJson может быть изображение(может ссылка на него). Предположим там всё-таки есть какой-то тэг, позволяющий сделать сопоставление точки и соответствующей ей картинке.
Есть 2 пути:
1. Как предусмотрено это в Mapbox:
Вы загружайте ваш GeoJson на сервера MapBox и с помощью стилей описывайте эти точки. Картинки добавляются в виде спрайтов.
В спецификации к стилям для каждой точки можно указать соответствующую ей картинку
"icon-image": "{icon}"
"icon-size": "{size}"
"icon-rotation": "{rotation}"
и другие свойства.
Это делается в Mapdox Studio. Вместо
Circle используется
Symbol. Делается фильтр по данным и назначатся изображение. Как пример:
{
"filter": [
"all",
[
"==",
"$type",
"Point"
],
[
"has",
"name"
],
[
"==",
"class",
"railway"
],
[
"==",
"subclass",
"station"
]
],
"id": "poi-railway",
"layout": {
"icon-image": "{class}_11",
"text-field": "{name}",
"text-font": [
"Noto Sans Regular"
],
"text-size": 12
},
"source": "source",
"source-layer": "poi",
"type": "symbol"
}
Это в концепции Mapbox. В принципе, это может делать картограф вообще без кода. А вы просто цепляйте готовую карту на клиенте.
2.Второй вариант. Делать все те же действия только на стороне клиента JS. Загружать картинки и Json с бэкенда или сторонних сервисов.
Сопоставить типу точки ссылку на картинку в спрайтах.
И сформировать либо такой же фрагмент стиля, если вы используйте фреймворк с поддержкой стилей MapBox, либо рисовать эти изображения своими средствами, если фреймворк не поддерживает спецификацию MapBox.
У вас Mapbox GL JS поэтому просто
map.addLayer({ фрагмент стиля});