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());