I have been working on a utility library for Mapbox GL JS, that deals with symbols hidden by another symbol on the screen. This is the third blog post of the series that will walk you through the development of the library.
In the last two blog posts of this series, I showed,
- How to recalculate collision boxes of symbols
- How to associate symbol features with recalculated collision boxes
The library (
mapbox-collision-boxes) is available on my GitHub repository.
Please refer to the official website of TypeScript for more details.
I have chosen TypeScript for the implementation language of
Is mapbox-gl-js typed?
Unfortunately, type definitions on Flow are not compatible with TypeScript.
So we need external type definitions of
mapbox-gl-js for TypeScript.
Thanks to the hard work of contributors from the TypeScript community, these types are available as
* The latest version of
@types/mapbox-gl was 2.7.5 when I was writing this blog post, and it was based on
mapbox-gl-js version 2.7 while the then latest version was 2.10.
However, I have not faced any issues related to the version difference so far.
What @types/mapbox-gl missing
@types/mapbox-gl does not expose some properties and types on which
For instance, the class
Map (@types/mapbox-gl/index.d.ts#L201-L602) omits the property
@types/mapbox-gl neither defines the class
How can we circumvent it?
One may be inclined to give up type checks, but this should be a last resort.
We can use module augmentation to enhance existing type definitions of
"Module augmentation" is a slightly advanced TypeScript feature.
Please refer to the TypeScript documentation for more details.
For instance, the following snippet adds the property
style: Style to the class
After the above declaration, you can access
Map#style in a type-safe manner.
SymbolBucket, we can just add interfaces for them since they are simply missing in
I also have introduced a utility function that tests if a given
Bucket is a
SymbolBucket (mapbox-collision-boxes/private/mapbox-types.ts#L232-L234), which uses another TypeScript feature "type predicates".
You can find minimum definitions necessary to implement
mapbox-collision-boxes on my GitHub repository.
In this short blog post, I have shown how to extend existing types in
@types/mapbox-gl) while introducing the following TypeScript features,
mapbox-collision-boxes is available on my GitHub repository.