How to set up with Typescript (`Uncaught TypeError: PIXI.utils is undefined`)

GniLudio commented 3 months ago

How do I set up the PixiOverlay in a TypeScript project? I always get the error Uncaught TypeError: PIXI.utils is undefined.

Setup

`index.ts`

import * as L from 'leaflet';
import 'leaflet-pixi-overlay';
import * as PIXI from 'pixi.js';

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const pixiOverlay = L.pixiOverlay((utils) => {
    // your drawing code here
}, new PIXI.Container());
pixiOverlay.addTo(map);

`types.d.ts`

declare module 'leaflet-pixi-overlay' {
    import * as PIXI from 'pixi.js';
    import * as L from 'leaflet';

    interface LeafletPixiOverlay extends L.Layer {
        redraw: (data?: any) => void,
    }

    interface LeafletPixiOverlayOptions {
        pane?: string,
    }

    interface LeafletPixiOverlayUtils {
        latLngToLayerPoint(latLng: L.LatLngExpression, zoom?: number): L.Point,
        layerPointToLatLng(point: L.Point, zoom?: number): L.LatLng,
        getScale(zoom?: number): number,
        getRenderer(): PIXI.Renderer,
        getContainer(): PIXI.Container,
        getMap(): L.Map,
    }

    module "leaflet" {
        function pixiOverlay(
            drawCallback: (utils: LeafletPixiOverlayUtils) => void,
            container: PIXI.Container,
            options?: LeafletPixiOverlayOptions
        ): LeafletPixiOverlay;
    }
}

`index.html`

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Hello World</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
</head>
<body style="width: 100vw; height: 100vh; margin: 0px;">
  <div id="map" style="width: 100vw; height: 100vh;"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

Project (Zip)

hello_pixi.zip

ptkz commented 3 months ago

Hi! I have the same error in an Angular project. When initializing L.pixiOverlay it fails at isWebGLSupported as PIXI.utils is undefined

TypeError: Cannot read properties of undefined (reading 'isWebGLSupported') at NewClass.initialize (L.PixiOverlay.js:102:39)

UPDATE: I managed to make it work. This lib does not support the latest Pixi version (8.1.6) so I installed pixi.js@7.4.2 and it worked

GniLudio commented 3 months ago

Hi! I have the same error in an Angular project. When initializing L.pixiOverlay it fails at isWebGLSupported as PIXI.utils is undefined

TypeError: Cannot read properties of undefined (reading 'isWebGLSupported') at NewClass.initialize (L.PixiOverlay.js:102:39)

UPDATE: I managed to make it work. This lib does not support the latest Pixi version (8.1.6) so I installed pixi.js@7.4.2 and it worked

Thanks, that fixed it.

manubb / Leaflet.PixiOverlay