Question 177260 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – How to fix "Type 'string' is not assignable to type 'Projection' mapbox-gl" error in vs code using typescript

I am trying to setup mapbox-gl using typescript. I get the following error in VS Code when I try to set the projection value according to the docs.
Basically:

 map = new mapboxgl.Map({
      container: 'mapbox',
      style: 'mapbox://styles/mapbox/outdoors-v12',
      projection: 'naturalEarth'
    })

Even the suggested default value is ‘mercator’, which is clearly a string.
Everything works correctly when running the code, but how can i tell vs code to accept that a string is correct there?

the output from npm list is this:

[email protected]

Also, this is accepted by vs code:

map.setProjection('globe')

which works as good as the other solution, i would still prefer an answer why my original is marked as an error by vs code, especially given that it’s a verbatim copy from the docs and works fine when actually running the code.

Tags:

3

Answers


  1. 0

    A projection should be the type of ProjectionSpecification object, not a string.

    Please refer to the code snippet and this article.

    const map = new mapboxgl.Map({
    style: {
        version: 8,
        name: 'My Projected Style',
        sources: {
            // ...
        },
        layers: [
            // ...
        ],
        projection: {
            name: 'equalEarth'
        }
    }
});
    Login or Signup to reply.
  2. 0

    That’s what worked for me:

    projection as unknown as Projection

    const mapContainer = useRef(null);
  const mapRef = useRef(null);
  const [lng, setLng] = useState(30);
  const [lat, setLat] = useState(50);
  const [zoom, setZoom] = useState(1.5);
  const [projection, setProjection] = useState("globe");

  useEffect(() => {
    if (mapRef.current) return; // initialize map only once
    const map: any = new mapboxgl.Map({
      container: mapContainer.current!,
      style: "mapbox://styles/mapbox/satellite-streets-v11",
      center: [lng, lat],
      zoom: zoom,
      projection: projection as unknown as Projection,
    });
    mapRef.current = map;
    map.on("load", function () {
      const setFog = () =>
        map.setFog({
          // range: [-1, 2],
          // "horizon-blend": 0.3,
          color: "gray",
          // "high-color": "#add8e6",
          // "space-color": "black",
          // "star-intensity": 10.0,
        });
      setFog();
    });
    Login or Signup to reply.
  3. 0

    I’m pretty sure that this is because the DefinitelyTyped package for mapbox-gl is just not that "up-to-date". You’re using [email protected], but at the time of this writing. mapbox-gl doesn’t publish its own types, but the types are available from the DefinitelyTyped project, which is where I’m assuming you’re grabbing your types. Whenever you grab types from there, ideally, you’d be grabbing the types package with matching major and minor version numbers for the version of the package that it provides typings for (see How do Definitely Typed package versions relate to versions of the corresponding library?). Ex. ideally, right now, you’d be doing npm i -D '@types/mapbox-gl@~2.15'. Unfortunately, at the time of this writing, the latest version of @types/mapbox-gl is 2.7.11. Now, when you look at the changelog for mapbox-gl, you’ll see that the feature you’re using was added in v2.9.0. That’s why you aren’t getting types for it. Fee free to submit a PR to the DefinitelyTyped project to add typings for v2.9 of mapbox-gl.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search