web-dev-qa-db-ja.com

スタイルの読み込みが完了していません：Mapbox GL JS

私の目標は、アフターマップに一連の座標マーカーを表示するビフォーマップとアフターマップを作成することです。

コードを実行すると、コンソールに次のエラーメッセージが表示されます。Style is not done loading

最終的な目標は、ユーザーが水平方向にスワイプしてマップが（前から後へ）変化するのを確認できるカーソルを確認することです。

これがこれまでの私のコードです、どんな助けでも大いに役立つでしょう！

$(document).ready(function() {
    var request_one = $.ajax({
        url: "https://geohack-framework-gbhojraj.c9users.io/ny",
        dataType: 'json'
    })
    var request_two = $.ajax({
        url: "https://geohack-framework-gbhojraj.c9users.io/man",
        dataType: 'json'
    });
    $.when(request_one, request_two).done(function(response_one, response_two) {
        console.log(response_one, response_two);
        //create map of ny state
        var nyGeo = response_one[0];
        var manGeo = response_two[0];
        (function() {
            mapboxgl.accessToken = 'pk.eyJ1IjoiamdhcmNlcyIsImEiOiJjaXY4amM0ZHQwMDlqMnlzOWk2MnVocjNzIn0.Pos1M9ZQgxMGnQ_H-bV7dA';
            //manhattan map
            var manCenter = manGeo.features[0].geometry.coordinates[0][0][0];
            console.log('man center is', manCenter);
            var beforeMap = new mapboxgl.Map({
                container: 'before',
                style: 'mapbox://styles/mapbox/light-v9',
                center: manCenter,
                zoom: 5
            });
            console.log('man geo is ', manGeo);
            //ny state map
            var nyCenter = nyGeo.features[0].geometry.coordinates[0][0];
            console.log('the ny center is ', nyCenter);
            var afterMap = new mapboxgl.Map({
                container: 'after',
                style: 'mapbox://styles/mapbox/dark-v9',
                center: nyCenter,
                zoom: 9
            });
            console.log('ny geo homie', nyGeo);
            afterMap.on('load', function() {
                afterMap.addSource("points", {
                    "type": "geojson",
                    "data": nyGeo
                })
            });
            afterMap.addLayer({
                "id": "points",
                "type": "symbol",
                "source": "points",
                "layout": {
                    "icon-image": "{icon}-15",
                    "text-field": "{title}",
                    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
                    "text-offset": [0, 0.6],
                    "text-anchor": "top"
                }
            });
            var map = new mapboxgl.Compare(beforeMap, afterMap, {
                // Set this to enable comparing two maps by mouse movement:
                // mousemove: true
            });
        }());
    })
});
mapbox-gl-js
12
Johnny G.

問題は、マップがロードされる前にレイヤーをマップに追加していることです。 loadイベントハンドラーでタイルソースとスタイルレイヤーをアタッチしていることを確認してください。

afterMap.on('load', function() {
  afterMap.addSource("points", {
    "type": "geojson",
    "data": nyGeo
  })
  afterMap.addLayer({
    "id": "points",
    "type": "symbol",
    "source": "points",
    "layout": {
      "icon-image": "{icon}-15",
      "text-field": "{title}",
      "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
      "text-offset": [0, 0.6],
      "text-anchor": "top"
    }
  });
});
11
Danny Delott