Muitos exemplos sempre carregam a imagem do ícone como esta (por exemplo, aqui: https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/ ):
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
Onde esse ícone está armazenado e como posso vincular a um png ou svg local? Ou como posso colocar minha própria markers
fonte? O exemplo não está muito bem documentado.
Respostas:
Se você seguir os exemplos, receberá apenas os sprites carregados com a folha de sprite do seu estilo específico, que NÃO É NECESSARIAMENTE uma correspondência de 1 para 1 com qualquer outro estilo.
ex: emerald-v8 NÃO possui "icon-image": "harbor-15" como o exemplo que usa streets-v8.
Para ver a lista de sprites disponíveis dos estilos correspondentes: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites
Eu posso escolher o ícone "porto" do repositório emerald-v8 da seguinte forma:
Aqui está o recurso que me ajudou a reunir tudo e explica como criar seus próprios ícones: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images
EDITAR:
Basicamente, para adicionar um de seus próprios ícones, entre no Mapbox studio, crie seu próprio estilo ou edite um deles. Basta adicionar um de seus próprios SVGs e esse ícone ficará disponível em sua planilha de sprites personalizada.
fonte
Você também pode usar / ícones externos gerados como
icon-image
se você usarmap.loadImage()
emap.addImage()
em primeiro lugar.Exemplos:
Adicione um ícone ao mapa
Adicione um ícone gerado ao mapa
fonte
Como é dito nos documentos do sprite : Passe
"sprite": "https://link"
para o seu estilo, ondelink
está o link para o json gerado com o spritezero-cli . spritezero-cli gerou png sprite da lista de seus ícones no formato svg. Que você pode usar ícones em camadas de símbolo como'icon-image'
.fonte