2016-08-11 8 views
1

Я загрузил 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>

ответ

1

Пользовательские значки связаны с определенными стилями в MapBox Studio, так что вы должны сохранить свой стиль с загруженный пользовательский значок boxy-hourglass, а затем обновите s 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

  • отказ от ответственности - Я работаю в MapBox