Skip to content
Advertisement

Error: The type property must be definedn in mapbox-gl-js

I have problem in adding source to map.

import * as data from "./temp-data";
 map.addSource('source__demo__empty',data.getEmptySource);
        map.addLayer(data.getLayer(false,'source__demo__empty','source__demo__empty',
            'green',true
        ));

./temp-data

export const getLayer=(hovered,layerId,sourceId,color,activeRoute)=>{
    const layer = {
        'id': layerId,
        'type': 'line',
        'source': sourceId,
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': color,
            'line-width': 4,
            'line-dasharray':[1,2,3],
            'line-opacity':activeRoute==true?1:0.5
        }
      }

      return layer
}

export function getEmptySource(){
    return {
      'type':'geojson',
      'data':{
          'type':'Feature',
          'properties':{},
          'geometry':{
              'type':'LineString',
              'coordinates':[
                  [76.993894,31.781929]
              ]
          }
      }
    }
}

With the above code i am getting this error.

Error: The type property must be defined, but only the following properties were given: .

mapbox-gl.js:35 Uncaught Error: The type property must be defined, but only the following properties were given: .
    at i.addSource (mapbox-gl.js:35)
    at r.addSource (mapbox-gl.js:35)
    at r.<anonymous> (DynamicRoute.jsx:8)
    at r.zt.fire (mapbox-gl.js:31)
    at r._render (mapbox-gl.js:35)
    at mapbox-gl.js:35

If i change

map.addSource('source__demo__empty',data.getEmptySource);

to

map.addSource('source__demo__empty', {
            'type':'geojson',
            'data':{
                'type':'Feature',
                'properties':{},
                'geometry':{
                    'type':'LineString',
                    'coordinates':[
                        [76.993894,31.781929]
                    ]
                }
            }
          });

then i am not getting any error.

addSource takes an object and id. I am passing id as the first parameter and object as the second parameter. Then why this error is appearing.

Advertisement

Answer

Your error is because you are passing the function reference, not actually calling it.

Change this:

map.addSource('source__demo__empty',data.getEmptySource);

to this:

map.addSource('source__demo__empty',data.getEmptySource());
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement