Closed johnghr closed 1 year ago
The issue here is that mapbox is expecting the center
array to be explicitly defined as having 2 numbers like this: [number, number]
but it is being inferred that it is an array of any size (number[]
).
The best way to fix this is to explicitly define your options as the type MapboxComponentOptions
(I need to export this from the module in the next update). You could use MapboxOptions
from the mapbox-gl
module but you will get an error about missing container
The source has a similar issue, but not sure the exact cause (probably just poorly defined by mapbox). This is a similar fix by just defining the type as AnySourceData
(or the proper type of source data you are using) from mapbox-gl.
Here is an example that fixes it for now:
const mapId = 'mapbox-map';
const source: mapboxgl.AnySourceData = {
type: 'vector',
url: 'mapbox://rookenthusiast.postcode_layer',
};
const options = {
center: [-3.5275, 50.726] as [number, number], // starting position
zoom: 10, // starting zoom
style: 'mapbox://styles/mapbox/light-v11', // style URL
};
Once I export the MapboxComponentOptions
type you can use that instead.
MapboxComponentOptions
is now exported in #32
I've just spun up a bare minimum implimentation and I've noticed that when I try and pass props dynamically to components (MapboxMap, MapboxSource and Mapbox layer in this case) I get ts errors. For example
Type '{ center: number[]; zoom: number; style: string; }' is not assignable to type 'MapboxComponentOptions'. Types of property 'center' are incompatible.
in the case of the MapboxMap component, and
Type '{ type: string; url: string; }' is not assignable to type 'AnySourceData'. Type '{ type: string; url: string; }' is not assignable to type 'RasterDemSource'.
in the case of MapboxSource.
Not sure if this is anticipated behaviour and the expectation is that you have to directly pass props as an object (as in your example) rather than as a var?
This is my app.vue file: