Как правильно выбирать и стилизовать маркеры на Mapbox GL JS?

Я работаю с картой Mapbox, на которой есть точки. Хотелось бы узнать, как правильно добавлять маркер-символ. Вот мой GeoJSON:

  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89.12312324,
          13.686886
        ]
      },
      "properties": {
        "title": "Random Location",
        "description": "Individual"
      }
    }
]

Вот пример из документации Mapbox:

map.addLayer({
        "id": "airport",
        "source": "airports",
        "source-layer": "ne_10m_airports",
        "type": "symbol",
        "layout": {
            "icon-image": "airport-15",
            "icon-padding": 0
        },
        "filter": ["in", "abbrev", ""]
    });

Когда я использую это

"layout": {
                "icon-image": "marker-11",
                "icon-allow-overlap": true,
            }

Вместо классического маркера получаются маленькие коричневые точки. Я использую

<script src='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />

и я использую

style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location

Весь мой сценарий выглядит так:

mapboxgl.accessToken = 'pk.mylongAkey';

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
        center: [-88.866245, 13.770391], // starting position
        zoom: 6 // starting zoom
    });

    var url = '/maps/index.json';
        var source = new mapboxgl.GeoJSONSource({
        data: url
    });

    map.on('load', function () {
        map.addSource('location', source);
        map.addLayer({
            "id": "map",
            "type": "symbol",
            "source": "location",
            "source-layer": 'location',
            "layout": {
                "icon-image": "marker-11",
                "icon-allow-overlap": true,
            }
        });
    });

    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['map'] });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        // Populate the popup and set its coordinates
        // based on the feature found.
        var popup = new mapboxgl.Popup()
            .setLngLat(feature.geometry.coordinates)
            .setHTML(feature.properties.title)
        .addTo(map);
    });

    // Use the same approach as above to indicate that the symbols are clickable
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['map'] });
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });

Я что-то упускаю? Кроме того, всплывающие окна не появляются над точками, они появляются поверх значка. Вы не можете сказать с помощью этой маленькой коричневой точки, но, например, с ракетой всплывающее окно находится в середине ракеты. Спасибо!

Вот скриншот