visgl / visgl/react-map-gl

[Bug] zoom value causing type warning when using Amazon Location Service map

Open
#2,541 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

Description

Description

When I use the maplibre Map with Amazon Location Service as the tile provider I'm getting some type warnings, when passing zoom to initialViewState:

Expected value to be of type number, but found string instead.

import { Map, } from "react-map-gl/maplibre";

...

  return (
      <Map
        initialViewState={{
          longitude: longitude,
          latitude: latitude,
          zoom: 14,
        }}
        mapStyle={`https://maps.geo.eu-central-1.amazonaws.com/v2/styles/Standard/descriptor?key=${amazonApiKey}&color-scheme=Light`}
        attributionControl={false}
        style={{ width: "100%", height: "100%" }}
        onLoad={() => setLoading(false)}
        onError={(e) => {
          console.error("Error loading map:", e);
          setError(true);
        }}
      />
 )

I noticed when I use remove the zoom param or set it to undefined the warning goes away.

Expected Behavior

No type warnings should be happening when passing the zoom property.

Steps to Reproduce

Can't because I don't want to share a amazon location service api key, but using Amazon as the tile provider and then passing the zoom property to the initialViewState will show the warnings all over console.

Environment
  • Framework version: "react-map-gl": "^8.0.4",
  • Map library: "maplibre-gl": "^5.5.0",
  • Browser: Chrome Version 137.0.7151.55 (Official Build) (arm64)
  • OS: Running in Docker Container (node:20-alpine - Linux)
Logs

Stack in the console after (Expected value to be of type number, but found null instead.)

  | evaluate | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
-- | -- | -- | --
  | filter | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | populate | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | e | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | parse | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | a | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | Promise.then |   |  
  | l | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | e | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | loadTile | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | e | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | processTask | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | process | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | (anonymous) | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1
  | MessageChannel._channel.port2.onmessage | @ | 1f28c7d8-fa56-4e41-85f9-18854632164e:1


Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Map component's initialViewState zoom handling and an Amazon Location Service map style, then follow the reported loadTile and evaluate stack entries. Reproduce the type warnings with a numeric zoom and verify that the warnings no longer occur while zoom remains set.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.