शैली लोड नहीं हो रही है: मैपबॉक्स जीएल जेएस

Question

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

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

Answer 1

समस्या यह है कि आप नक्शे को परत जोड़ रहे हैं इससे पहले कि नक्शा लोड होते है। सुनिश्चित करें कि आप 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" 
    } 
    }); 
});