manubb / leaflet.pixioverlay Goto Github PK
View Code? Open in Web Editor NEWBring Pixi.js power to Leaflet maps
License: MIT License
Bring Pixi.js power to Leaflet maps
License: MIT License
Great extention! Thank you! Can you also share original code of tools.min.js
that uses in examples?
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));
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?
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
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/
Any help is welcome and i'm ready to write a post and share it if i reach this goal
Thank you everybody
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
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
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.
Is there any possibilities to draw texture in polygon with out changing the background color
this library working also with pixi 5.0?
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 !
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)
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
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
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
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)
})
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
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 ?
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 ;(
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?
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:
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.
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.
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
_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.
nvm
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/ ♥♥♥
Hi,
Doesn't work click event on map on Mobile.
How can I use?
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
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);
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
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?
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?
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.
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!
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
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.
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:
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?
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.
Lines displaying as straight lines.
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.
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.
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);
});
pixi.js
version: 5.3.3I 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?
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,
This is the json with the points that I was trying to load: (Don't forget to change the file to .json)
communes.txt
Hi,
Please help me to draw millions polygons with click event, and need to update color on click.
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'.
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!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.