Mapbox Vector Tiles - OpenLayers

A simple vector tiles map. Note: Make sure to get your own Mapbox API key when using this example. No map will be visible when the API key has expired. × ThisexampleusesOpenLayersv6.9.0.Thelatestisv. Edit MapboxVectorTiles simple4 mapbox5 vector66 tiles6 × ExampleofaMapboxvectortilesmap. Asimplevectortilesmap.Note:MakesuretogetyourownMapboxAPIkeywhenusingthisexample.NomapwillbevisiblewhentheAPIkeyhasexpired. main.js import'ol/ol.css'; importMVTfrom'ol/format/MVT'; importMapfrom'ol/Map'; importVectorTileLayerfrom'ol/layer/VectorTile'; importVectorTileSourcefrom'ol/source/VectorTile'; importViewfrom'ol/View'; import{Fill,Icon,Stroke,Style,Text}from'ol/style'; constkey= 'YourMapboxaccesstokenfromhttps://mapbox.com/here'; constmap=newMap({ layers:[ newVectorTileLayer({ declutter:true, source:newVectorTileSource({ attributions: '©Mapbox'+ '©'+ 'OpenStreetMapcontributors', format:newMVT(), url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/'+ '{z}/{x}/{y}.vector.pbf?access_token='+ key, }), style:createMapboxStreetsV6Style(Style,Fill,Stroke,Icon,Text), }), ], target:'map', view:newView({ center:[0,0], zoom:2, }), }); index.html

package.json { "name":"mapbox-vector-tiles", "dependencies":{ "ol":"6.9.0" }, "devDependencies":{ "parcel":"^2.0.0-beta.1" }, "scripts":{ "start":"parcelindex.html", "build":"parcelbuild--public-url.index.html" } }