How to handle “Too many glyphs being rendered in a tile.” warning in MAPBOX?
by dollysingh3192
HTML
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">
<div id="map"></div>
CSS
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
JavaScript
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
var latBounds = [-122, -77];
var lngBounds = [30, 50];
var features = [];
for( var i=0; i<80000; i++ ){
var lat = Math.random() * (latBounds[1]- latBounds[0] + 1) + latBounds[0];
var lng = Math.random() * (lngBounds[1]- lngBounds[0] + 1) + lngBounds[0];
features.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [lat, lng]
},
"properties": {
"title": "point_" +i,
"marker-symbol": "harbor"
}
});
}
var geoJSON = {
"type": "FeatureCollection",
"features": features
};
mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
var map = new mapboxgl.Map({
container: 'map',
center: [-7.370968683627908, -86.98521854932295],
style: 'mapbox://styles/mapbox/streets-v11'
});
map.on('load', function() {
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
function(error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addSource('point', {
'type': 'geojson',
'data':geoJSON
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point',
'layout': {
'icon-image': 'cat',
'icon-size': 0.1,
'icon-allow-overlap': true
}
});
}
);
});