Добавьте пользовательский маркер (например, IMG) в маршрут AJAX Mapbox

Question

Я хотел бы добавить пользовательские маркеры в запрос направления Ajax для множества шагов в маршруте

Я ищу на многих веб-сайтах, но не нашел ответа, кто-то может мне помочь и предложить мне решение?

Заранее спасибо,

<script>

       mapboxgl.accessToken = 'myAccessToken';

       var map = new mapboxgl.Map({
           container: 'map_test',
           style: 'mapbox://styles/mapbox/streets-v9',
           center: [-84.518641, 39.134270],
           zoom: 11
       });

       map.on('load', function() {
         getRoute();
       });

       function getRoute() {
         var start = [-84.518641, 39.134270];
         var end = [-84.512023, 39.102779];
         var directionsRequest = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start[0] + ',' + start[1] + ';' + end[0] + ',' + end[1] + '?steps=true&geometries=geojson&access_token=' + mapboxgl.accessToken;

         $.ajax({
           method: 'GET',
           url: directionsRequest,
         }).done(function(data) {
           var route = data.routes[0].geometry;
           map.addLayer({
             id: 'route',
             type: 'line',
             source: {
               type: 'geojson',
               data: {
                 type: 'Feature',
                 geometry: route
               }
             },
             paint: {
               'line-width': 2
             }
           });
           map.addLayer({
             id: 'start',
             type: 'circle',
             source: {
               type: 'geojson',
               data: {
                 type: 'Feature',
                 geometry: {
                   type: 'Point',
                   coordinates: start
                 }
               }
             },
           });
           map.addLayer({
             id: 'end',
             type: 'circle',
             source: {
               type: 'geojson',
               data: {
                 type: 'Feature',
                 geometry: {
                   type: 'Point',
                   coordinates: end
                 }
               }
             }
           });

           var instructions = document.getElementById('instructions');
           var steps = data.routes[0].legs[0].steps;
           steps.forEach(function(step){
             instructions.insertAdjacentHTML('beforeend', '<p>' + step.maneuver.instruction + '</p>');
           });

         });

       }

</script>

Вот весь сценарий, который я сейчас использую:)

Я использую Mapbox GL JS, чтобы создать этот маршрут со многими шагами, точкой начала и точкой конца.