Vue with PixiOverlay event is not defined

[lordjack]

Hey guys,

I'm trying to use Pixioverlay with Vue and Vue2-Leaflet, however, some functions do not work. for example the variable "event"

var pixiOverlay = L.pixiOverlay( (utils, event) => {}

if (event.type === "add") {}

In this 'if event.type' is saying indefinite, I do not understand why, below follows my source code. Who can help thank you.

Follow the link, if you prefer to see here
https://github.com/lordjack/introducao_vue/blob/main/src/components/PixiOverlayTeste6.vue

'

Olá {{ msg }}

<div style="height: 500px; width: 100%">
  <div style="height: 200px; overflow: auto">
    <h1>teste6</h1>
    <p>Marcação lugar no Mapa {{ withPopup.lat }}, {{ withPopup.lng }}</p>
    <p>Centro {{ currentCenter }} o zoom é: {{ currentZoom }}</p>
    <button @click="showLongText">Teste</button>
    <button @click="showMap = !showMap">Mostrar/Ocutar</button>
  </div>
  <l-map
    ref="map"
    v-if="showMap"
    :zoom="zoom"
    :center="center"
    :options="mapOptions"
    style="height: 90%"
    @update:center="centerUpdate"
    @update:zoom="zoomUpdate"
  >
    <l-tile-layer :url="url" :attribution="attribution" />
    <l-marker :lat-lng="withPopup">
      <l-popup>
        <div @click="innerClick">
          I am a popup
          <p v-show="showParagraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed
            pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi. Donec finibus
            semper metus id malesuada.
          </p>
        </div>
      </l-popup>
    </l-marker>
    <l-marker :lat-lng="withTooltip">
      <l-tooltip :options="{ permanent: true, interactive: true }">
        <div @click="innerClick">
          Eu sou um teste
          <p v-show="showParagraph">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed
            pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi. Donec finibus
            semper metus id malesuada.
          </p>
        </div>
      </l-tooltip>
    </l-marker>
  </l-map>
</div>
<router-view></router-view>

' `<script> import L, { latLng } from "leaflet"; import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet"; import * as PIXI from "pixi.js"; import "leaflet/dist/leaflet.css"; import "leaflet-pixi-overlay"; import "../assets/js/tools.min.js"; import * as d3 from "d3"; //import json from "./data/communes.json"; import axios from "axios";

export default {
name: "PixiOverlayTeste6",
props: {
msg: String,
},
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
LTooltip,
},
data() {
return {
zoom: 13,
center: latLng(47.41322, -1.219482),
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution:
'© OpenStreetMap contributors',
withPopup: latLng(47.41322, -1.219482),
withTooltip: latLng(47.41422, -1.250482),
currentZoom: 11.5,
currentCenter: latLng(47.41322, -1.219482),
showParagraph: false,
mapOptions: {
zoomSnap: 0.5,
},
showMap: true,
map: null,
info: null,
};
},
methods: {
zoomUpdate(zoom) {
this.currentZoom = zoom;
},
centerUpdate(center) {
this.currentCenter = center;
},
showLongText() {
this.showParagraph = !this.showParagraph;
},
innerClick() {
alert("Click!");
},

draw() {
  var loader = new PIXI.loaders.Loader();
  loader
    .add("plane", "../assets/img/plane.png")
    .add("bicycle", "../assets/img/bicycle.png");

  loader.load(async (loader, resources) => {
    var textures = [resources.plane.texture, resources.bicycle.texture];

    const response = await axios.get("data/cities.json");
    var markers = response.data;

    var vm = this;
    vm.map.attributionControl.setPosition("bottomleft");
    vm.map.zoomControl.setPosition("bottomright");

    var pixiContainer = new PIXI.Container();
    var markerSprites = [];
    var previousZoom = null;
    var colorScale = d3
      .scaleLinear()
      .domain([0, 50, 100])
      .range(["#c6233c", "#ffd300", "#008000"]);
    var doubleBuffering =
      /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

    var pixiOverlay = L.pixiOverlay(
      (utils, eventOrCustomData) => {
        var zoom = utils.getMap().getZoom();
        var container = utils.getContainer();
        var renderer = utils.getRenderer();
        var project = utils.latLngToLayerPoint;
        var scale = utils.getScale();
        var invScale = 1 / scale;

        if (eventOrCustomData.type === "add") {
          // markers.forEach(function (marker) {
          markers.map((marker) => {
            var coords = project([marker.latitude, marker.longitude]);
            var index = Math.floor(Math.random() * textures.length);
            var markerSprite = new PIXI.Sprite(textures[index]);
            markerSprite.textureIndex = index;
            markerSprite.x = coords.x;
            markerSprite.y = coords.y;
            markerSprite.anchor.set(0.5, 0.5);
            markerSprite.scale.set(invScale);
            var tint = d3.color(colorScale(Math.random() * 100)).rgb();
            markerSprite.tint = 256 * (tint.r * 256 + tint.g) + tint.b;
            container.addChild(markerSprite);
            markerSprites.push(markerSprite);
          });
        }

        if (eventOrCustomData.type === "moveend" && previousZoom !== zoom) {
          markerSprites.map((markerSprite) => {
                  markerSprite.scale.set(invScale);
          });
          previousZoom = zoom;
        }

        if (eventOrCustomData.type === "redraw") {
          var delta = eventOrCustomData.delta;
          markerSprites.map((markerSprite) => {
            markerSprite.rotation -= 0.03 * delta;
          });
        }
        renderer.render(container);
      },
      pixiContainer,
      {
        doubleBuffering: doubleBuffering,
      }
    );
    //      };
    //adiciona a sobreposição no mapa de referencia
    pixiOverlay.addTo(this.$refs.map.mapObject);

    var ticker = new PIXI.ticker.Ticker();
    ticker.add(function (delta) {
      pixiOverlay.redraw({ type: "redraw", delta: delta });
    });
    ticker.start();
  });
},

},
mounted() {
this.$nextTick(() => {
this.map = this.$refs.map.mapObject; // work as expected
});
this.draw();
},
};
`

[jeffkkim]

It's most likely undefined because you're not checking if eventOrCustomData contains the type field in the first place, seems like an issue with your syntax:

// It should be:
if (eventOrCustomData?.type && eventOrCustomData.type === "add") {
}