manubb/leaflet.pixioverlay

Bring Pixi.js power to Leaflet maps

leaflet.pixioverlay's Issues

How can I move markers programmatically on map?

Hi,

I try to move markers on map with react.js. Markers will move when I change react.js state variables.
How can I do this?

Polygons with events and change color

Hi,
Please help me to draw millions polygons with click event, and need to update color on click.

Black Overlay "background"

Hi,

I'd love to use this little plugin, so thanks for publishing it! : )
Unfortunately I am facing a black overlay, and then the primitives are rendered on top of this black "background". I guess it's something really simple but can't seem to find it.
Please see an example in this codepen. I tried with different tiles and also altering it via CSS, but no luck.
Thanks!

any drawing tool

Demos are broken on 5K displays

The basic demo works in firefox but it is broken in chrome
With chrome, on zoom the shapes will wander of their intended position

Request tools.min.js

Great extention! Thank you! Can you also share original code of tools.min.js that uses in examples?

Collision Issue

Awesome work on this looks great when rendering out data points and has solved an issue with rendering 5k+ markers with leaflet. The issue im having is that im using the demo for the french cities as i like the way the markers are rendered, but when it comes to process collision on my datasets it is either crashing the browser or takes a very long time to calculate. And im assuming its the density of the points that is crashing my browser. As i have some datasets that its rendering 126k markers in about 33s but then i have a dataset of only 2k and the browser crashes during the quadtrees calculation. The largest dataset that i have passed through is 477K markers which actually renders the points but takes 12578s to complete the process. Any suggestions on how to improve the processing of these points faster or more efficiently. I want to continue to use the code in my application but struggling to find a solution to improve the processing of the points.

some examples of the results that im getting, though the first one did take some time to render (477K markers)

Interactivity with Markers using ParticleContainer

Hi.
Is there a way to add click handlers to the markers drawn with the particle container (like the 1 million markers demo?) or if not to the us cities simple example where the markers dont change size on zoom?

Lines are skewed, have sharp edges or totally disappear

Expected Behavior

Lines displaying as straight lines.

Current Behavior

Some lines display like straight lines but many other display as morphed polygon-like shapes like the corners of the line are swapped, which make them have a cut-off, have sharp edges, or totally disappear.

Screenshot:
https://imgur.com/a/UNDZp9V
In the first screenshot I marked the badly behaving lines and the rest is how I would like them to behave.
In the second screenshot I lot of lines are morphed and a few lines are correct at the right middle and the left lower corner.
Also when I move the canvas (while dragging the map), the wrong lines movement is a bit off. i.e. the correct lines move accordingly with the canvas but the wrong lines have a random offset every time I move the canvas a bit

Animated GIF:
https://gyazo.com/262bfddf5ccc9db4d8ca90dba4400b37
Here you can see if I move the canvas, the wrong lines move with a seemingly random offset and the correct lines move accordingly with the canvas.

Possible Solution

I'm not sure but I would like to know what makes the difference between a skewed line and a correctly behaving line.
I would gladly appreciate any input.

Steps to Reproduce

I've been using Pixi Sprites for map markers for a long time without any problem. But Pixi lines have had problem since the beginning. I add them to the container with this code:

let invScale = 1 / pixiLayer.utils.getScale();
let scaleMultiplier = Math.max(0.4, Math.min((0.4 + ((utils.getMap().getZoom() - 12) / 8)), 1.5));

let markerLine = new PIXI.Graphics(); 
markerLine.lineStyle(1 * invScale * scaleMultiplier, 0x3388ff, 1);
info.position.coordinates.forEach(function(point,index){
      point = utils.latLngToLayerPoint([point[0], point[1]]);
      if(index === 0)markerLine.moveTo(point.x, point.y);
      else markerLine.lineTo(point.x,point.y);
});

Environment

• pixi.js version: 5.3.3
• Browser & Version: Chrome 84.0.4147.135
• OS & Version: Windows Microsoft 10 Pro v1909
• Running Example: n/a

PixiOverlay use a lot of GPU

Hi, I have a problem with PixiOverlay. When I ran this example https://manubb.github.io/Leaflet.PixiOverlay/animated-markers.html, my GPU goes 0% to 90%.
I'm running this example in Chorme 71.0.3578.98.
Thank you and i look forward to you answer

Polygon border/ graphics line Scaling

I am drawing around 50K polygon. using graphics object. is there any oprions to scale polygon borders[line] while zoom in /out. redrawing is very bad idea in this case ;(

add popup on a marker

Hello! Thank you for ur plagin, it's amaizing.
Is it possible to add a popup when i click a marker?
I mean right over a marker, not in fix div in a header or another place of a page
Thank u.

Using extract image of pixi

Can someone help with that please, i'm trying to export my pixi layer using:
this.pixiLayer.utils.getRenderer().extract.image();;
it always result in a blank image.

For test purpose, I called this extract method image inside the "L.PixiOverlay.js" I added at _redraw method, there I got the image but mirrored.

Is there another way to export a pixi layer as an image, i tried look for some plugin but i couldn't find

context lost - why?

nvm

zIndex of pixi overlay

So i am having trouble putting Pixi markers on top of other leaflet layers.
I created new map pane for Pixi overlay and can change zIndex successfully. But when i put 999 zIndex for Pixi pane it doesn't go on top of polylines, event though they have lower zIndex by default.

Note:
I see that regular leaflet layers have pane property inside options property while pixi layer has it root of layer object, and in options property it contains only 'forceCanvas'.

Elements on PixiOverlay flickers during panning in iOS

First off, thanks for this plugin. It's awesome. Secondly, I'm not sure if this is the right place to file this issue, and I apologise in advance if it's not.

I'm currently working on a Vue mapping app that handles large numbers of markers that are updated in real-time. I've incorporated the PixiOverlay into a Vue component so that it can react to data changes, and update individual markers accordingly.

The problem is, I'm experiencing some flickering while panning in Safari on iOS devices, and only on iOS devices. Safari on the Mac does not display this behaviour, and neither do any other browser on non-iOS devices, for that matter.

Chrome and Firefox use the Webkit engine on iOS (because Apple), so it didn't make any difference testing with either one. This led me to believe that it's an issue with Webkit browsers, but I'm not sure what the problem is, or how I can fix it.

Here's a short screen recording demonstrating the issue: https://photos.app.goo.gl/S9mQBoMhJGHGdxym8

You can test it out yourself at https://kart.kolumbus.no/

Any help is appreciated.

what to do in order to draw different markers?

Hi, Thanks for this plugin.

Let's say I have a component which I pass markers. And use your code to draw them. Now, parent component's data might change, so prop will change too and on watcher, I want to remove old markers and draw new passed data again.

what do I need to do to achieve this?

What I have tried - created 2 containers,parent and child and put sprites into the child . and add pixilayer to map. This was for the first time. Now when parent data changes, what I do is remove child container from parent container. and run redraw again with my custom event type which does the same thing as if sprites were being added to child container but for new passed array.

Question 1) is It the correct logic of what I mentioned above? I mean removing the whole child container, and when event changes to my event, i add this children into pixicontainer again and then adding new sprites into this child container.

Problem with render sprites in ParticleContainer

I'm currently looking for a way to represent a large number of points, following the example of 'particles' and 'particles-patched' ... these work very well for me, they allow me to zoom in and see the points very well. When you zoom in a lot you can see how the point deforms and disappears, I don't understand why.

By changing the code a little to get the same result as in the example but with the most real coordinates and quantities, the rendering fails me and I get the following:

1. When I zoom, the points disappear.
2. Generate a very different shape than the texture I'm sending you (the same texture I use for the first image)

with this function I generate the texture for both cases:

generateCircleTexture(radius) {
        const gfx = new PIXI.Graphics();
        const tileSize = radius * 3;
        const texture = PIXI.RenderTexture.create(tileSize, tileSize);
        gfx.beginFill(0x000000); // color base
        gfx.drawCircle(tileSize / 2, tileSize / 2, radius);
        gfx.endFill();
        this.rendererPixi.render(gfx, texture);
        return texture;
 }

 this.pixiContainer = new PIXI.Container();
 const innerContainer = new PIXI.ParticleContainer(400000, {vertices: true});
 this.pixiContainer.addChild(innerContainer);

For generate coordinates

const that = this;
function getRandom(min, max) {
    return min + Math.random() * (max - min);
}
const markers = [];
for (let i = 0; i < 1000; i++) {
       markers.push({'latitude': getRandom(35, 55), 'longitude': getRandom(-10, 20)});
 }

This is the route I do in the firstDraw for the example

markers.forEach(function(marker) {
      const projectedCenter = project([marker.latitude, marker.longitude]);
      const circleSprite = new PIXI.Sprite(that.texturePixi);
      circleSprite.x = projectedCenter.x;
      circleSprite.y = projectedCenter.y;
      circleSprite.center = projectedCenter;
      circleSprite.anchor.set(0.5);
      circleSprite.scale.set(invScale);
      innerContainer.addChild(circleSprite);
      cirlceSprites.push(circleSprite);
});

For generate coordinates

function getRandom(min, max) {
    return min + Math.random() * (max - min);
}
const markers = [];
 for (let i = 0; i < 1000; i++) {
       markers.push({'latitude': getRandom(0.051, 0.052), 'longitude': getRandom(37.1311, 37.1317)});
 }

or if you want I made a series of points where some real points of my app will be located

const pointsPIXI = [
            {latitude: 0.05198656799356911, longitude: 37.13110685348511},
            {latitude: 0.05192755941950185, longitude: 37.131171226501465},
            {latitude: 0.05188196188496641, longitude: 37.13123291730881},
            {latitude: 0.05184441097413735, longitude: 37.131291925907135},
            {latitude: 0.051785402399930146, longitude: 37.13135898113251},
            {latitude: 0.05171834720191478, longitude: 37.13142067193985},
            {latitude: 0.051643245380053104, longitude: 37.13149040937424},
            {latitude: 0.052117996181070075, longitude: 37.131198048591614},
            {latitude: 0.052058987607130035, longitude: 37.13127851486206},
            {latitude: 0.05209217992996972, longitude: 37.131233252584934},
            {latitude: 0.05209217992996972, longitude: 37.13125504553318},
            {latitude: 0.052225284497184755, longitude: 37.131654024124146},
            {latitude: 0.05221254400965814, longitude: 37.131669111549854},
            {latitude: 0.05220047407409858, longitude: 37.13168419897556},
            {latitude: 0.05217331671908956, longitude: 37.131714038550854},
            {latitude: 0.05220047407409858, longitude: 37.13168419897556},
            {latitude: 0.05217331671908956, longitude: 37.131714038550854},
            {latitude: 0.0521488415719742, longitude: 37.131746895611286},
            {latitude: 0.05224674216038479, longitude: 37.131757624447346},
            {latitude: 0.05217331671908956, longitude: 37.131714038550854},
            {latitude: 0.0521488415719742, longitude: 37.131746895611286},
            {latitude: 0.05224674216038479, longitude: 37.131757624447346},
            {latitude: 0.05214045967227157, longitude: 37.13180758059025},
            {latitude: 0.05221790842545815, longitude: 37.13177405297756},
            {latitude: 0.052234672224825224, longitude: 37.13176432996988},
            {latitude: 0.05222930780902522, longitude: 37.13174622505903},
            {latitude: 0.052121348940943495, longitude: 37.13179148733616}
];

And this is the route that I already do with what I need

markers.forEach(function(marker, pos) {
       const coords = project([marker.latitude, marker.longitude]);
       const circleSprite = new PIXI.Sprite(that.texturePixi);
       circleSprite.x = coords.x;
       circleSprite.y = coords.y;
       circleSprite.tint = '0xef0a0a';
       circleSprite.anchor.set(0.5);
       innerContainer.addChild(circleSprite);
       cirlceSprites.push(circleSprite);
 });

And for change scale

if (firstDraw || prevZoom !== zoom) {
     cirlceSprites.forEach(function (circle) {
          circle.scale.set(invScale);
     });
 }

I tried with markers instead of points and I get the same result.
Do you have any idea what may be happening?

Pixiv 5 is not supported？

  const pixiContainer = new PIXI.Container();
  pixiContainer.addChild(new PIXI.Text('test'))
  
  var pixiOverlay = L.pixiOverlay(function(utils) {
    var container = utils.getContainer()
    var renderer = utils.getRenderer()
    renderer.render(container)
  }, pixiContainer)

 Vue.mymap.addLayer(pixiOverlay)  

This is my code, and it does not display as expected on the screen. But the console shows that it has been loaded successfully

conosle

    PixiJS 5.2.4 - ✰ WebGL 2 ✰      http://www.pixijs.com/    ♥♥♥ 

Use of Z-order

I am drawing 30.000 markers on the map but the zorder seems to be random or at least the order they are added to the container. I am giving them a property called zOrder based on their Y position on the map but there doesn't seem to be a way to use this property.

Pixi documentation talks about a sortChildren function and the property zOrder I talked about.
Is there a way to change the render order of the sprites?

Pixi 5.0 compatibility fix

Due to some changes in Pixi.js v5 renderer Leaflet.PixiOverlay's code is not working with the newest Pixi.js alpha.

After changing

if (this._renderer.gl) {
this._renderer.resolution = this._renderer.rootRenderTarget.resolution = this.options.resolution;
}

to

if (this._renderer.gl) {
this._renderer.resolution = this.options.resolution;
if (this._renderer.rootRenderTarget != void 0) this._renderer.rootRenderTarget.resolution = this.options.resolution;
}

everything should work on both the current and the alpha version of Pixi.js

rescaling issues

Both in your demo's and locally, the way the icons are positioned at times do not match their location. ie. you can easily see markers in the water at zoom levels - as you zoom closer they are back on land where they belong.

Is this something you are going to fix ?

Click event on "million marker" example

It would be great if the million marker example had a way to add a click event to each marker.

I tried to implement it myself looking at the other examples but no luck so far.

smooth animation on circles

hi, I was wondering if it could be possible to do smooth animation on circles/sprites as I did for hits using D3.js

https://drive.google.com/file/d/10d5L_zR-MyQf1H9CLDg1wKcvnPQd5mvW/view?usp=sharing

With just some circles D3 works fine. Then, browser collapses.
I am completely new to Pixi.js, I guess it should be done changing the scale. I managed to change it, but not smoothly at all. There is something similar to D3.js for animating? thanks in advance

Pixi Ticker availability

I noticed there are methods for getContainer, getRenderer, etc. However if I want to animate something without map interaction (like the change in weather over time) there's no getTicker. Is there a way to add this to the project, instead of using the renderer on a loop?

A small circle looks like an octagon

Hello,

First of all, thank you for making a good library. I'm using this library well.

But I have one issue. In your basic demo,
(https://manubb.github.io/Leaflet.PixiOverlay/leaflet-quickstart.html)

I want to make the red circle smaller like the node circles of OSM.
(https://www.openstreetmap.org/node/25472466#map=19/51.50642/-0.11257)

I changed the radius of the circle to 0.5 (in leaflet-quickstart.html) and it looked like an octagon, not a smooth circle. So I solved this problem temporarily by using circle-shaped markers.

Is there a way to draw a small, smooth circle through pixi.graphics?

Thanks

Hello, I want to ask The funtion: 'utils.correctBlendMode' why not in the PixiOverlay.js; And where can I find the source code about docs/js/example.min.js

Hello, I want to ask The funtion: 'utils.correctBlendMode' why not in the PixiOverlay.js;
And where can I find the source code about docs/js/example.min.js

TypeError with example.min.js and tools.min.js

I am attempting to add the two js files to my application. if i include these two files in the head i am getting typeerror errors in the console

trying to work out what is causing these errors because when i generate my own page with the files i dont get any issues. Any suggestions as to what might be causing it. I know its a bit general just thought i would start here

Polygons little random offsets

Found strange behavior on move map. When you have high zoom, you can see that polygons have random offset when you drag map. Markers do not have this problem. Seems some rounding happens in pixi.js lib, not sure where dig in

you can check this on demo https://manubb.github.io/Leaflet.PixiOverlay/leaflet-quickstart.html

Texture inside polygon

Is there any possibilities to draw texture in polygon with out changing the background color

World wraparound

Hello,

I'm starting to use your PixiOverlay and I'm wondering how you would manage efficiently the world wraparound.
For instance in your example : https://manubb.github.io/Leaflet.PixiOverlay/many-markers.html
if you move 360 degrees East or West to get 'another' Paris back in the viewport, markers are not there, the translation is not done...
What solution would you suggest in your framework ?

Regards

Multiple Overlays

Thats a really nice piece of work but I got stuck with the following. If you wanted to have multiple pixiOverlays how would you do it please?

So, lets say for example in the demo with the French elections (demo.html) we want to filter per region (like Normandy, Brittany, Isle-de-France etc). What I tried is when I am parsing the raw data from the text file I am filtering out any data that do not meet the criteria, obtain a PixiLayer in the same way as in the demo and keep it in an array.
I move then to the next region (lets say Brittany) and repeat the exact same loop again but feeding in data that come from Brittany and I get another PixiLayer. This new layer is then kept in the same array as the previous layer
I repeat that for all regions and at the end I am looping over the array that keeps my PixiLayers and add each one to the map while at the same time I am also adding them to a L.control.Layer as follows:

var cl = L.control.layers(null, {}).addTo(map);
for (j = 0; j < myArray.length; j += 1) {
         var name = "Group " + j ;
         cl.addOverlay(myArray[j], name);
     }

While that works quite well for 2-3 overlays it gets too slow for more than 3 or 4. I guess that depends on the data too, (I have about 52000 polygons, the France demo has half as many. With 19 filters I had to use it was really slow)

Am I doing anything wrong in the whole plan here please?

PS1. Your France demo data do not have regions like Normandy etc, it just mentioned these just as an example. Maybe I should have used apartments instead

PS2. Very nice plugin, many thanks!

not working on mobile

Not sure if anything can be done about this really - but when viewing any of the examples (such as basic demo / 1000 US Cities) the markers take forever to render / re-render when you zoom or pan.

Tested on an Android/Chrome using the latest OS and ~2 years old phone.

marker sprite is not clickable after leaflet draw

Hey. Thanks for your help so far.

I am using this plugin and also leaflet-draw plugin. When drawing sprites, each one of them is clickable. Clicks work fine. Now, after I draw leaflet-draw's one of the inputs(let''s say circle) which happens to include some of the marker sprites, those that got included are no more clickable. Nothing at all.

How Do I achieve this so that they are still clickable?

pixiContainer = new PIXI.Container();
    pixiContainer.interactive = true
    pixiContainer.buttonMode = true;
    childrenCont =  new PIXI.Container();

I got this and childrenCont contains all my marker sprites. each sprite has this:

markerSprite.on('click', _self.clickedMarker.bind(this, markerSprite));

Markers not showing in "One million markers" demo with canvas renderer

The title says it all. I happened to have hardware acceleration off and was wondering why the markers weren't loading on the map. I'm not sure who in the right mind would turn hardware acceleration off, but just bringing this to your attention.

This occurs in the latest version of Google Chrome, "One million markers" demo.

Topojson for polygons

this plugin is great, i am trying to reuse your examples with some other polygonal topojson, but they appear with completely wrong shapes.

I downloaded several shapefiles and converted to topojson using mapshaper. All of them result in weird geographical shapes. Also the topojson downloaded (http://bl.ocks.org/mapsam/raw/6083585/) from the most basic D3.js example (http://bl.ocks.org/mapsam/raw/6083585/) creates this incorrect geometry... (have to zoom out full map to see it)

I assume the plugin uses 4326 projection? so topojson should be in 4326? I also see that the structure from your topojson is different than the standard one (yours doesn't have transform nor translate properties, and big array of arcs are at the beginning, not at the end of the file...)

Thanks in advance for some information

Incorrect position updates on DisplayObjects rendered while not in container

I am trying to render a shape to a texture to generate multiple alpha levels on a display object. Using the pixijs.io sandbox as an example, I am able to execute this code.

document.body.appendChild(app.view);
var stage = app.stage;
var container = new PIXI.Container();
app.stage.addChild(container);

var brush = new PIXI.Graphics();
brush.beginFill(0xdddddd);
brush.drawCircle(0, 0, 300);
brush.position.set(app.screen.width / 2, app.screen.height / 2)
brush.endFill();

var brush2 = new PIXI.Graphics();
brush2.beginFill(0x888888);
brush2.drawCircle(0, 0, 200);
brush2.position.set(app.screen.width / 2, app.screen.height / 2)
brush2.endFill();

var rect = new PIXI.Graphics();
rect.beginFill(0xffaa00);
rect.drawRect(0, 0, app.screen.width, app.screen.height);
rect.endFill();

PIXI.loader.add("t1", "required/assets/bkg-grass.jpg")

PIXI.loader.load(setup);

function setup(loader, resources) {
    var background = new PIXI.Sprite(resources["t1"].texture);
    background.width = app.screen.width;
    background.height = app.screen.height;

    var renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height);
    var renderTextureSprite = new PIXI.Sprite(renderTexture);
    rect.mask = renderTextureSprite;
    container.addChild(background, renderTextureSprite, rect);
    app.renderer.render(brush, renderTexture, false, null, false);
    app.renderer.render(brush2, renderTexture, false, null, false);
}

However, when trying to accomplish this in Leaflet, the brush moves independently of the texture, and instead repositions itself based on the window position (move the map to the left and the circle appears and moves as well, with setView([35.935, -84.271], 16) for the map in Leaflet).

      let self = this
      let circleCenter = [35.956, -84.275]

      var loader = new PIXI.loaders.Loader()
      loader.load(function (loader, resources) {
        var pixiContainer = new PIXI.Container()
        var brush = new PIXI.Graphics()
        var rect = new PIXI.Graphics()
        var projectedBrush

        var firstDraw = true
        var prevZoom

        var pixiOverlay = L.pixiOverlay(function (utils) {
          var zoom = utils.getMap().getZoom()
          var container = utils.getContainer()
          var renderer = utils.getRenderer()
          var project = utils.latLngToLayerPoint

          if (firstDraw) {
            projectedBrush = project(circleCenter)
          }

          let always = true
          if (firstDraw || prevZoom !== zoom || always) {
            brush.clear()
            brush.beginFill(0x555555)
            brush.drawCircle(0, 0, 500)
            brush.x = 0
            brush.y = 0
            brush.endFill()

            var renderTexture = PIXI.RenderTexture.create($(window).width(), $(window).height())
            var renderTextureSprite = new PIXI.Sprite(renderTexture)
            console.log(renderTextureSprite)

            rect.beginFill(0xffaa00)
            rect.drawRect(projectedBrush.x, projectedBrush.y, $(window).width(), $(window).height())
            rect.endFill()
            rect.mask = renderTextureSprite

            container.addChild(rect)
          }
          renderer.render(brush, renderTexture, false, null, false)
          renderer.render(container)

          firstDraw = false
          prevZoom = zoom
        }, pixiContainer)
        pixiOverlay.addTo(self.map)
      })

_renderer is not destroyed

_renderer created at line 106 is not destroyed. On creating multiple PixiOverlays, video memory allocated at this place leaks.

If the field is destroyed by calling _renderer.destroy(), GPU memory is freed.

Probably PixiOverlay should have its own destroy() method that should destroy _renderer and possibly _auxRenderer as well.

How to draw efficiently one million markers?

This is the json with the points that I was trying to load: (Don't forget to change the file to .json)
communes.txt

markers' color on "million marker" example

Is there any way to change the color of the patched ParticleRenderer, the one used in the million markers demo for example. The typical way

var pc = new PIXI.particles.ParticleContainer(n, {vertices: true});
pc.tint = 16711680 // red

doesn't seem to work here.

Many thanks

Error Failed to execute 'shaderSource' on 'WebGL2RenderingContext'.

Hi.
I am developing an application that receives an array of objects, each object has the array of points inside that I am drawing on the map.
For example:

var objExample = [ {'nombre': 'elemento 1', 'coordinates' : [[-74.25325512886047, 4.863067980527789], [-74.25267577171326, 4.863484898738268], [-74.25274014472961, 4.863206953293299], [-74.25227880477905, 4.863217643504837], [-74.25172090530396, 4.863292474980886]]}, {'nombre': 'elemento 2', 'coordinates' : [[-74.25164580345154, 4.861453756304337], [-74.25095915794373, 4.861688941531293], [-74.24997210502625, 4.861667561059506], [-74.24995064735413, 4.860887173374973]]}, ];

It is assumed that the system automatically chooses a date which loads the object and has data to draw, user can choose a new date and the system must erase drawn data and draw new data.

The code I am working with is the following:

`$scope.pixiOverlay = undefined;
$scope.layers = [];
_.map(objExample, function(feature, position){
var firstDraw = true;
var prevZoom;
var cirlceSprites = [];
var pixiContainer = new PIXI.Container();
$scope.pixiOverlay = L.pixiOverlay(function(utils, event) {
var zoom = utils.getMap().getZoom();
var container = utils.getContainer();
var renderer = utils.getRenderer();
var project = utils.latLngToLayerPoint;
var scale = utils.getScale();
function generateCircleTexture(renderer, radius, color) {
var gfx = new PIXI.Graphics();
var tileSize = radius * 3;
var texture = PIXI.RenderTexture.create(tileSize, tileSize);
gfx.beginFill(color);
gfx.drawCircle(tileSize / 2, tileSize / 2, radius);
gfx.endFill();
renderer.render(gfx, texture);
return texture;
}
function drawPoint(center) {
var projectedCenter = project(center);
var circleSprite = new PIXI.Sprite(circleTexture);
circleSprite.x = projectedCenter.x;
circleSprite.y = projectedCenter.y;
circleSprite.anchor.set(0.5);
circleSprite.scale.set(1 / scale);
container.addChild(circleSprite);
cirlceSprites.push(circleSprite);
}
var circleTexture = generateCircleTexture(renderer, 5, 0xef0a0a);
if(firstDraw){
angular.forEach(feature.coordinates, function (point) {
drawPoint([point[1], point[0]]);
})
}

                        if (firstDraw || prevZoom !== zoom) {
                            angular.forEach(cirlceSprites, function (circle) {
                                circle.scale.set(1 / scale);
                            })
                        }
                        firstDraw = false;
                        prevZoom = zoom;
                        renderer.render(container);
                    }, pixiContainer, {clearBeforeRender: true, preserveDrawingBuffer: true, forceCanvas: true});
                    $scope.layers.push(pixiContainer);
                    $scope.pixiOverlay.addTo($scope.mapTracker2);
                });`

But after changing the date several times and having the system draw and delete the data, I get the following error:
angular.js:13920 TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'. at compileShader (compileProgram.js:67) at compileProgram (compileProgram.js:13) at Program.extractData (Program.js:97) at new Program (Program.js:75) at BatchShaderGenerator.generateShader (BatchShaderGenerator.js:66) at BatchPlugin.contextChange (AbstractBatchRenderer.js:270) at Runner.emit (Runner.js:71) at ContextSystem.initFromContext (ContextSystem.js:90) at ContextSystem.initFromOptions (ContextSystem.js:104) at new Renderer (Renderer.js:236)

I use:

• Angularjs -> 1.5.8
• Leaflet -> 1.3.1
• leaflet-pixi-overlay -> ^1.8.1
• pixi.js -> 5.1.1

Doesn't work click event on map on Mobile

Hi,
Doesn't work click event on map on Mobile.
How can I use?

pixiJS v5

this library working also with pixi 5.0?

1 million rotated markers

Hi,
First thanks for this nice plugin!

I would like to display many arrows on a map, but i don't manage to do it with the 1 million marker demo.
Would a quick fix of markerContainer.js enable to achieve that?

Best,

Multiple Overlays Issue

I need an urgent help regarding pixi Overlay. i am using two layers with some markers .. i only could select the markers of last layer. I would need to select both select layer's marker

The html generated

No layer update during flyTo

When map.flyTo or map.flyToBounds pixi scene updated only on last frame. During "flying" no animation at all. The same problem with fast zoom scrolling.

Why?

Compatibility with Leaflet tooltips and popups

Hi, I created a layer with this plugin containing a renderer of PIXI.mesh.Rope instances and tried to use bindTooltip() and bindPopup() without success. Not sure if it is related to events not being managed or underlying DOM container structure.

I've seen that in this example that popups are managed manually, but I did not find anything similar for tooltip. If someone can help detailing more how we could bring to PixiOverlay the tooltip/popup features of standard Leaflet layers it would be great.

Thanks for this great work anyway !

Example for Polyline (ideally with arrows)

Hi,

After having hit the performance border with leaflet standard drawing I found your project and it really looks amazing!

Before starting to work on migrating my app I would like to ask for an example of drawing a Polyline. Ideally with having arrows ever n-th point. Is something like this available?

Thanks for your kind support

Integration with Existing Leaflet Canvas

I'm using the utils.getRender inside my code (see below), however, I'm also using leaflet canvas circle markers. When I add my pixiContainer, it adds a second canvas. I end up losing my interactive sprint mousedown events since I have 2 canvas's instead of a shared canvas.

Is there a way to have pixiOverlay use the existing map canvas instead of creating its own ?

Thanks

var renderer = utils.getRenderer();
...
renderer.render(container);

animated origin-destination

Not an issue, more a call for help

First, @manubb, thank you for this leaflet overlay, really

@manubb (tu descends ? :D ), @community

Looking for ways to start/suggestions/code inspiration - skeleton/strategies, to do something like https://threatmap.fortiguard.com/

1. First challenge : put an (animated - but in a second step perhaps) circle (any shape in fact) at point A (origin), and let a transparent png at this latLng after circle animation done (like https://www.tweetping.net/)
2. Second challenge: animate a Bezier curve to go point B (animation duration for bezier curve and circle/point A can be the same)
3. Third challenge: animate point B when bezier curve start to hit point B

Any help is welcome and i'm ready to write a post and share it if i reach this goal

Thank you everybody