Muchos de los ejemplos siempre cargan la imagen del icono de esta manera (por ejemplo, aquí: 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"
}
});
¿Dónde se almacena este icono y cómo puedo vincularlo a un png o svg local? ¿O cómo puedo poner el mío markers
en la fuente? El ejemplo no está muy bien documentado.
Respuestas:
Si sigues los ejemplos, solo obtienes los sprites que se cargan con la hoja de sprites de tu estilo particular, que NO ES NECESARIAMENTE una coincidencia 1 a 1 con ningún otro estilo.
ex: emerald-v8 NO tiene "icon-image": "harbor-15" como el ejemplo que usa streets-v8.
Para ver la lista de sprites disponibles de los estilos correspondientes: https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites
Puedo elegir el icono "puerto" de su repositorio emerald-v8 de esta manera:
Aquí está el recurso que me ayudó a reunirlo todo, y explica cómo crear sus propios iconos: https://www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images
EDITAR:
Básicamente, para agregar uno de sus propios iconos, vaya al estudio Mapbox, cree su propio estilo o edite uno de los suyos. Simplemente agregue uno de sus propios SVG, luego ese icono estará disponible para usted en su hoja de sprites personalizada.
fuente
También puede usar iconos externos / generados como
icon-image
si usaramap.loadImage()
ymap.addImage()
primero.Ejemplos:
Agregar un ícono al mapa
Agregar un icono generado al mapa
fuente
Como se dice en los documentos de sprite : Pase
"sprite": "https://link"
a su estilo, dondelink
hay un enlace a json generado con spritezero-cli . spritezero-cli generó png sprite de la lista de sus iconos en formato svg. Que puede usar iconos en capas de símbolos como'icon-image'
.fuente