-1

mapbox GL: I got this error

Error: The sourceLayer parameter must be provided for vector source types.

What is wrong?

0

If the layer-source type = geojson, the map.setFeatureState needs source, id,

if the layer-source type= vector(for example tilesets URL), the map.setFeatureState needs source, id, and for vector sources sourceLayer properties.

sample vector source :

                //===================== add tileset layer ================================


       //var _mapbox_style = 'mapbox://styles/hoogw/cjusyfrn725qp1flhynv414z1';
        var _mapbox_tileset = 'mapbox://hoogw.77wjwdb4';

            var _layer_name ='countries-1ay4zz';

                 map.addSource("_geojson_source",  {
                    type: 'vector',
                    url: _mapbox_tileset
                    });



                map.addLayer({
                    'id': ___id,

                    'type': 'fill',
                    //'type': 'line',

                     "source": "_geojson_source",


                    // for vector-sourced-layer,here, must have "source-layer"
                    // but for geojson-sourced-layer, no need "source-layer"
                    'source-layer': _layer_name,
                    "layout": {},
                    "paint": {

                         "fill-color": ["case",
                                                ["boolean", ["feature-state", "hover"], false],
                                                 __stroke_color_highlight,  // when hover   //"#FF0000",  // red 
                                                 __stroke_color             // when normal//  "#FFFF00" // yellow
                                            ],





                            "fill-opacity": ["case",
                                                ["boolean", ["feature-state", "hover"], false],
                                                0.7,    // when hover
                                                0       // when normal
                                            ]

                            }// paint



                });





                //=====================  end ========= add tileset layer =================================


           // --------- line ---------------



           map.on("mousemove", ___id, function(e) {
                  if (e.features.length > 0) {
                      if (hoveredFeatureId) {
                        map.setFeatureState({source: '_geojson_source', sourceLayer:_layer_name,   id: hoveredFeatureId}, { hover: false});
                        }


                        if (e.features[0].id) {

                          // have feature.id ( converted from properties, OBJECTID)
                          hoveredFeatureId = e.features[0].id;

                          map.setFeatureState({source: '_geojson_source', sourceLayer:_layer_name,   id: hoveredFeatureId}, { hover: true});



                        } else {

                          // missing feature.id, maybe because of feature properties - missing - ObjectID field.
                          // hover effect will failed. 
                          console.log('missing feature.id, maybe because of feature properties - missing - ObjectID field.')
                          console.log('hover effect will failed. feature.id ( converted from properties, OBJECTID)');
                        }


                        //console.log('hoveredFeatureId = ',hoveredFeatureId)



                                //********* show event.feature.properties  *********
                                  //console.log('e.features[0].properties #### ', e.features[0].properties)
                                  var _highlight_feature_properties = e.features[0].properties
                                  show_info_outline_Tab(_highlight_feature_properties)

                                //********* show event.feature.properties  *********


                      } // if
                    }); // mousemove





                map.on("mouseleave", ___id, function() {
                            if (hoveredFeatureId) {
                                            map.setFeatureState({source: '_geojson_source',  sourceLayer:_layer_name,  id: hoveredFeatureId}, { hover: false});
                                            }
                            hoveredFeatureId =  null;


                            empty_info_outline_Tab()
                });







                 map.on("click", ___id, function(e) {


                          //console.log('clicked')   

                          instance_tabs.select('list');   // open up locked tab


                          if (e.features.length > 0) 
                          {

                                if (clickedFeatureId) 
                                {
                                                    map.setFeatureState({source: '_geojson_source',  sourceLayer:_layer_name,  id: clickedFeatureId}, { click: false});
                                }


                                if (e.features[0].id) 
                                {

                                  // have feature.id ( converted from properties, OBJECTID)
                                  clickedFeatureId = e.features[0].id;

                                  map.setFeatureState({source: '_geojson_source', sourceLayer:_layer_name,   id: clickedFeatureId}, { click: true});



                                } else {

                                  // missing feature.id, maybe because of feature properties - missing - ObjectID field.
                                  // hover effect will failed. 
                                  console.log('missing feature.id, maybe because of feature properties - missing - ObjectID field.')
                                  console.log('hover effect will failed. feature.id ( converted from properties, OBJECTID)');




                                } // else 


                                //console.log('hoveredFeatureId = ',hoveredFeatureId)





                                //********* show event.feature.properties  *********
                                  //console.log('e.features[0].properties #### ', e.features[0].properties)
                                  var _highlight_feature_properties = e.features[0].properties
                                  //show_info_outline_Tab(_highlight_feature_properties)  // mouse over hover event
                                  show_listTab(_highlight_feature_properties)  // click event
                                //********* show event.feature.properties  *********




                          } // if
                        }); // click




                 // --------- line ---------------
0

geojson source sample:

         map.addSource("_geojson_source", {
          "type": "geojson",
          "data": ___GeoJson
          });



        if ((geojson_feature_type.toLowerCase() == 'polygon') 
         || (geojson_feature_type.toLowerCase() == 'multipolygon'))
        {


           //  ------------- polygon   -----------------------


              map.addLayer({
                  "id": "polygon-fills",
                  "type": "fill",
                  "source": "_geojson_source",
                  "layout": {},
                  "paint": {
                            "fill-color": [
                                              /*
                                                'case', ['<', ['to-number', ['get', 'Rank2019']],  16 ], '#FFFFFF',   // white

                                                        ['>', ['to-number', ['get', 'Rank2019']],  161 ], '#000000',  // black


                                                        // others
                                                        '#00FF00'

                                               */

                                              //https://materializecss.com/color.html

                                              "step",
                                                        ['to-number', ['get', 'Rank2019']],
                                                        '#FFFFFF',      // white
                                                        16,  '#e6ee9c',  // lime lighten-3
                                                        44,  '#009688',  //  teal
                                                        110, '#d84315', // deep-orange darken-3
                                                        162, '#000000'   // black





                                              ],





                            "fill-opacity": ["case",
                                                ["boolean", ["feature-state", "hover"], false],
                                                0,
                                                0.7
                                            ]
                            }
                  });







              map.addLayer({
                  "id": "polygon-borders-line",
                  "type": "line",
                  "source": "_geojson_source",
                  "layout": {},
                  "paint": {
                                    "line-color": ["case",
                                               /*
                                                ["boolean", ["feature-state", "hover"], false],
                                                 __stroke_color_highlight,  //"#FF0000",  // red
                                                 __stroke_color    //  "#FFFF00" // yellow
                                                */ 


                                                ["boolean", ["feature-state", "click"], false],
                                                __stroke_color_highlight_clicked,   // orange
                                                __stroke_color    //  "#FFFF00" // yellow

                                            ],

                                    "line-width": ["case",
                                              ["boolean", ["feature-state", "hover"], false],
                                              5,
                                              1
                                          ]
                            }// paint
                  });



                  // When the user moves their mouse over the state-fill layer, we'll update the
                  // feature state for the feature under the mouse.
                  map.on("mousemove", "polygon-fills", function(e) {
                    if (e.features.length > 0) {

                          if (hoveredFeatureId) {
                                   map.setFeatureState({source: '_geojson_source', id: hoveredFeatureId}, { hover: false});
                                         }


                          //console.log('hover event e.features[0].id  >>>', e.features[0].id) 


                          if (e.features[0].id) {

                            // have feature.id ( converted from properties, OBJECTID or default feature-array-index-id)
                            hoveredFeatureId = e.features[0].id;

                            map.setFeatureState({source: '_geojson_source', id: hoveredFeatureId}, { hover: true});


                          } else {

                            // missing feature.id, maybe because of feature properties - missing - ObjectID field.
                            // hover effect will failed. 
                            console.log('missing feature.id, maybe because of feature properties - missing - ObjectID field.')
                            console.log('hover effect will failed. feature.id ( converted from properties, OBJECTID)');
                          }

                          //console.log('hoveredFeatureId = ',hoveredFeatureId)



                                //********* show event.feature.properties  *********
                                  //console.log('e.features[0].properties #### ', e.features[0].properties)
                                  var _highlight_feature_properties = e.features[0].properties
                                  show_info_outline_Tab(_highlight_feature_properties)

                                //********* show event.feature.properties  *********


                     } // if
                  }); // mousemove




                  // When the mouse leaves the state-fill layer, update the feature state of the
                  // previously hovered feature.
                  map.on("mouseleave", "polygon-fills", function() {
                              if (hoveredFeatureId) {
                                              map.setFeatureState({source: '_geojson_source', id: hoveredFeatureId}, { hover: false});
                                              }
                              hoveredFeatureId =  null;



                              empty_info_outline_Tab()
                  });








                  map.on("click", "polygon-fills", function(e) {


                          //console.log('clicked')   

                          instance_tabs.select('list');   // open up locked tab


                          if (e.features.length > 0) 
                          {

                                if (clickedFeatureId) 
                                {
                                                    map.setFeatureState({source: '_geojson_source', id: clickedFeatureId}, { click: false});
                                }


                                if (e.features[0].id) 
                                {

                                  // have feature.id ( converted from properties, OBJECTID)
                                  clickedFeatureId = e.features[0].id;

                                  map.setFeatureState({source: '_geojson_source', id: clickedFeatureId}, { click: true});



                                } else {

                                  // missing feature.id, maybe because of feature properties - missing - ObjectID field.
                                  // hover effect will failed. 
                                  console.log('missing feature.id, maybe because of feature properties - missing - ObjectID field.')
                                  console.log('hover effect will failed. feature.id ( converted from properties, OBJECTID)');




                                } // else 


                                //console.log('hoveredFeatureId = ',hoveredFeatureId)





                                //********* show event.feature.properties  *********
                                  //console.log('e.features[0].properties #### ', e.features[0].properties)
                                  var _highlight_feature_properties = e.features[0].properties
                                  //show_info_outline_Tab(_highlight_feature_properties)  // mouse over hover event
                                  show_listTab(_highlight_feature_properties)  // click event
                                //********* show event.feature.properties  *********




                          } // if
                        }); // click





               // ---- end ---- polygon ----

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.