1
svgをアップロードし、マップボックスのスタジオマップで表示でき、マップボックスglを使用してストックアイコンでタイルセットを表示できます。しかし、私のアイコンを使用しようとすると、ポイントは引かれません。背景は引き続き描画され、下のコードの場合はcafe-15を使用する点が描画されます。あなたとあなたのスタイルを保存しなければならないので、マップボックスに表示されるアイコンマップボックス経由で表示されないgl
<!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>
