Я загрузил svg и могу просмотреть его на карте mapbox studio и может отображать панель с иконками акций с помощью mapbox gl. Однако, когда я пытаюсь использовать свой значок, очки не рисуются. Фон все еще рисует, а в случае кода ниже набираются точки с использованием cafe-15.Значок, видимый в mapbox studio, не показывающий через mapbox gl
'icon-image': 'cafe-15', // stock symbol shows
'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show
Вот мой код:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:30px; padding:0; }
#map { position:absolute; top:50px; bottom:50px; width:22%; height:42% }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '{token}';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-73.9517, 40.8001],
zoom: 17
});
map.on('load', function() {
map.addSource('toxsites', {
type: 'vector',
url: 'mapbox://djorgensen.5cvtu32g'
});
map.addLayer({
'id': 'spills',
'type': 'symbol',
'source': 'toxsites',
'source-layer': 'Toxicsites160622',
'filter': ['all', ['==', 'MAP_GROUP', 'SPILLS']],
'layout': {
'visibility': 'visible',
'icon-allow-overlap': true,
'icon-image': 'cafe-15', // stock symbol shows
'icon-size': 1
}
});
map.addLayer({
'id': 'pbs',
'type': 'symbol',
'source': 'toxsites',
'source-layer': 'Toxicsites160622',
'filter': ['all', ['==', 'MAP_GROUP', 'PBS']],
'layout': {
'visibility': 'visible',
'icon-allow-overlap': true,
'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show
'icon-size': 1
}
});
});
</script>
</body>
</html>