CODEWITHSUNDEEP
javascriptsvgmapbox-glmapbox-gl-js
Dave Jorgensen
Dave Jorgensen

Reputation: 31

Icon visible in mapbox studio not showing via mapbox gl

I uploaded an svg and can view it in the mapbox studio map and can display the tileset with stock icons using mapbox gl. However, when I try to use my icon the points do not draw. The background still draws and in the case of the code below the points using cafe-15 are drawn. 

'icon-image': 'cafe-15', // stock symbol shows
'icon-image': 'boxy-hourglass', // my uploaded symbol - does not show

Here's my code:

<!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>

Upvotes: 2

Views: 3054

Answers (1)

mollymerp
mollymerp

Reputation: 1602

Custom icons are associated with specific styles in Mapbox Studio, so you would have to save your style with the uploaded custom boxy-hourglass icon, and then update the style URL:

var map = new mapboxgl.Map({
  container: 'map', 
  style: yourNewStyleURLHere, 
  center: [-73.9517, 40.8001], 
  zoom: 17 
});

enter image description here

enter image description here

  • disclaimer - I work at Mapbox

Upvotes: 1

Related Questions