शैली लोड हो रहा है नहीं किया है: MapBox जीएल जे एस

वोट
6

मेरा लक्ष्य एक पहले और बाद में नक्शा है कि नक्शे के बाद पर मार्कर समन्वय की एक श्रृंखला से पता चलता तैयार करना है।

जब कोड निष्पादित होने पर, मैं कंसोल में यह त्रुटि संदेश दिखाई: 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
            });
        }());
    })
});

11/11/2016 को 20:15
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
5

समस्या यह है कि आप नक्शे को परत जोड़ रहे हैं इससे पहले कि नक्शा लोड होते है। सुनिश्चित करें कि आप टाइल स्रोत और में शैली परत संलग्न कर रहे हैं रहो 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"
    }
  });
});
15/11/2016 को 16:38
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more