Add a Geo Json Feature Collection to Mapbox with Typescript and Vue 3

Mapbox is a powerful tool for developers to create customized maps. One feature Mapbox provides is the ability to create a geo json fills layer with custom polygons. — We will discuss the required setup to create an display this layer on the map. Below is the full vue 3 component as reference.

Initialize the map

We first need to create our Vue component that contains the Mapbox map. If you have already initialized the map you can skip this step.

Add the Geo JSON Source

Add a sample geo JSON feature collection as a source to the map. Click view raw to copy this json file as a test.

Add the geo JSON fills and outlines as layers

Add a fills layer to the map while referencing the source we created above.

Conclusion

At this point you should have the geo json feature collection showing up as fills on the map.

Finished map

Hi there, I am a developer based in Canada.