'How to get Mapbox GL JS to load all tiles in map extent
I am trying to use some US Census Bureau vector tiles hosted on ArcGIS online (https://gis.data.census.gov/arcgis/rest/services/Hosted/VT_2010_140_00_PY_D1/VectorTileServer) with Mapbox GL JS.
It doesn't seem like all the tiles to cover the map extent are being loaded. Is there an option I need to pass? I'm not sure if this is a Mapbox or ArcGIS Vector Tile Service issue.
Screenshot 1 - I've outlined the "empty" spaces in red
Screenshot 2 - See how the red area from Screenshot 1 loads when I move the map east
mapboxgl.accessToken = MY_TOKEN;
const map = new mapboxgl.Map({
container: 'mapid', // container ID
style: 'mapbox://styles/mapbox/light-v10', // style URL
projection: 'albers',
center: [-97, 39], // starting position
minZoom: 6,
zoom: 6 // starting zoom
});
map.on('load', () => {
map.addSource("ct2010", {
type: "vector",
tiles: ["https://gis.data.census.gov/arcgis/rest/services/Hosted/VT_2010_140_00_PY_D1/VectorTileServer/tile/{z}/{y}/{x}.pbf"],
minzoom: 6,
promoteId: "GEOID" // promote field to be used as a foreign key
})
// Add a new layer to visualize the polygon.
map.addLayer({
'id': 'cdfi',
'type': 'fill',
'source': 'ct2010', // reference the data source
"source-layer": "CensusTract",
'layout': { },
'paint': {
'fill-color': 'rgb(13,40,75)',
'fill-opacity': 0.5
}
});
});
EDIT: I think my problem was trying to use the Albers projection. Removing that option resolves my issue. Maybe related to https://github.com/mapbox/mapbox-gl-js/issues/11284
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
