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 as a source to the map after it loads. “geoJson” is the imported .json file above.
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.
Thanks all.
