Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Marker Assets Loading #100

Open
minhkwan opened this issue Jun 4, 2024 · 0 comments
Open

Marker Assets Loading #100

minhkwan opened this issue Jun 4, 2024 · 0 comments

Comments

@minhkwan
Copy link

minhkwan commented Jun 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant