Set image (png, jpg, svg icon) to label.

[franciscosierra1915]

Is your feature request related to a problem? Please describe. I want to use this template https://globe.gl/example/world-cities/ but instead of orange circle labels, I want to have a png image as my label. The image I want is a pin icon, so I can make my globe look like Google Maps https://cdn5.vectorstock.com/i/1000x1000/20/49/location-pin-icon-on-transparent-location-pin-vector-20942049.jpg

I couldn't make it work with any of these options:

customLayerLabel([str or fn]) labelLabel([str or fn])

[vasturiano]

@franciscosierra1915 nice idea! It should be possible to do this with the custom layer, but perhaps even easier is if you use the tiles layer. To each of the individual icons you can assign a separate tile, center it on the desired coordinates, and use the tileMaterial to load a pin image onto it. You can regulate image width/height via tileWidth and tileHeight.

You'd probably also want to set tileUseGlobeProjection to false so that the images do not appear distorted.

[franciscosierra1915]

Hi!

I was able to figure out how to use customLayerLabel() properly, like so:

const pinTexture = new THREE.TextureLoader().load('./assets/pin.png');

.customThreeObject(() => new THREE.Mesh( new THREE.PlaneGeometry(4,4), new THREE.MeshBasicMaterial({ map: pinTexture, side: THREE.DoubleSide, transparent: true, }) ))

It works perfectly now. Thank you so much for your reply and suggestion to use tiles. I'll surely use tiles in the future too. :)

[ismaildkc]

how can i use this property, i cant handele it my codes like this;

`const world = Globe()
    .pointLat('lat')
    .pointLng('lon')
    .pointAltitude(getAlt)
    .pointRadius(0.12)
    .pointColor(d => catColor(d.type))
    .pointLabel(getTooltip)
    .customThreeObject(() => new THREE.Mesh(
    new THREE.PlaneGeometry(4,4),
    new THREE.MeshBasicMaterial({ map: pinTexture, side: THREE.DoubleSide, transparent: true, })
    ))
    .labelLat('lat')
    .labelLng('lon')
    .labelAltitude(d => getAlt(d) + 1e-6)
    .labelDotRadius(0.5)
    .labelDotOrientation(() => 'bottom')
    .labelColor(d => catColor(d.type))
    .labelText('name')
    .labelSize(1)
    .labelResolution(1)
    .labelLabel(getTooltip)
    (document.getElementById('globeViz'))
    .pointOfView(MAP_CENTER, 4000)
    .backgroundColor('rgba(0,0,0,0)')
    .showGlobe(false)
    .showAtmosphere(false);

  fetch('//unpkg.com/world-atlas/land-110m.json').then(res => res.json())
    .then(landTopo => {
      world
        .polygonsData(topojson.feature(landTopo, landTopo.objects.land).features)
        .polygonCapMaterial(new THREE.MeshLambertMaterial({ color: '#7bbfd7', side: THREE.DoubleSide }))
        .polygonSideColor(() => 'rgba(0,0,0,0)');
    });

  fetch('/js/data.json').then(res => res.json()).then(volcanoes => {
    world.pointsData(volcanoes)
      .labelsData(volcanoes);
  });`