manubb / Leaflet.PixiOverlay

Bring Pixi.js power to Leaflet maps
MIT License
463 stars 85 forks source link

Marker Assets Loading #100

Open minhkwan opened 1 month ago

minhkwan commented 1 month ago

I'm trying to implement drawing marker using PixiOverlay. It works well when i use the draw triangle example. But when i'm trying to use Marker Example. It seems does not work.

` const markerTexture = await PIXI.Assets.load('img/marker-icon.png'); alert('Marker'); const markerLatLng = [51.5, -0.09]; const marker = new PIXI.Sprite(markerTexture); marker.anchor.set(0.5, 1);

const pixiContainer = new PIXI.Container(); pixiContainer.addChild(marker);

let firstDraw = true; let prevZoom;

const pixiOverlay = L.pixiOverlay((utils) => { const zoom = utils.getMap().getZoom(); const container = utils.getContainer(); const renderer = utils.getRenderer(); const project = utils.latLngToLayerPoint; const scale = utils.getScale();

if (firstDraw) {
    const markerCoords = project(markerLatLng);
    marker.x = markerCoords.x;
    marker.y = markerCoords.y;
}

if (firstDraw || prevZoom !== zoom) {
    marker.scale.set(1 / scale);
}

firstDraw = false;
prevZoom = zoom;
renderer.render(container);

}, pixiContainer);

pixiOverlay.addTo(map); `

It seems that anything that after the 'await' does not run. I'm pretty sure that I load the image correctly because I'm using default leaflet map to display that marker with that path.