Despite my best Google-fu, nowhere in the main tutorial or the KineticJS docs does it explicitly state the difference between a group and a layer. Kinetic's "Getting Started" page sort of addresses this--it mentions that layers have special renderers, although I don't quite understand what that means. So do groups not have those renderers? Can groups not be inside of layers? What makes layers (or groups) different than just a parent to a bunch of nodes for organization/transformation?
Essentially, what's the difference between a group and a layer?
Group is simply a collection of KineticJS defined objects within a layer, while each layer is a separate Canvas (or used to be until version 3.x of KineticJS) you can see the difference by adding multiple layers on a stage. Also, in the framework hierarchy, a group is contained inside a layer and not the other way around. So you can display/render multiple groups at one time but not multiple layers (only the topmost one is visible).
Related
I have a procedurally generated game using tilemaps for easier generation and pathfinding, and I need to be able to have musltiple layers for things like seperate depths for different groups of objects, but the room data is specified at the creation of the map, not at the creation of the layer, unless something like tiled is used, which I can't use due to the fact that my game will be procedurally generated. I could go through the array and place individual tiles with a loop, but is there any other solution that I'm missing? Thanks!
You could do the something I mentioned in this answer, basicly, creating two maps with the same dimensions, set the z-order with setDepth, and if the map above has transparent tiles, or tiles with the ID -1, the map below should be visible.
I personally never used it for larger maps, but I assume it should not cause performance issue, and is an easy solution.
I have two network graphs but placing both of them next to each other is the easiest way to compare if the graphs are small. But as the graph grows, it is making hard for the user to compare the views. I wanted to know the best way to merge two graphs and show the comparison.
In the above picture it can be seen that no of nodes are same but the way they are linked is different.
I would like to know how to present the compared data.
Any ideas about different views to present such comparison using d3.js.
I would suggest not trying to apply force layout or similar method for drawing graphs (that would draw the graph in a fashion similar to the on in the picture in your question). Instead, I wold like to suggest using circular layout for both graphs (similar to chord diagram):
This visual example is made for other purposes, but similar principles could be applied to your problem:
Layout all vertexes on a circle, in equidistant style (if there are some vertices belonging only to one of two graphs, they can be grouped and marked different color)
If there is a link between two vertices in both graphs, connect them in one color (lets say green)
If there is a link between two vertices in one graph only, connect them in appropriate color, dependant on a graph (lets say red and purple)
This method scales well with number of vertices.
Hope this helps.
Following methods for network comparison could be useful in the current scenario:
NetConfer, a web application
Nature Scientific Reports, an article guiding comparisons
CompNet, a GUI tool
So I want to build a map application with backbone(probably using Leaflet.js). I have a few ideas on how to design this, and I was wondering if there was a common design pattern on how to do this.
The map will eventually be integrated with other visualizations - for example if I select a marker on the map something will happen in another visualization. I must also be able to conduct geo-searches on the markers in the map.
There are two ways I thought of doing this -
1.Have a backbone model per marker, have a collection of markers, have a Map View that works on this collection. So whenever this collection changes, re-render the map.
2.Have a model called MapModel that holds json, and have a data function that filters the json (based on a geosearch or something). The Map then simply renders this json.
The advantage of 1 is that I think it would be easy to do selections, but as my map may deal with tens of thousands, to hundreds of thousands of objects, I feel like things would be very very slow.
Is there another way to do this, or which one of the two ideas I've had is preferable?
Thanks
I've been working on exactly the same problem, I do not claim to have found a "common design pattern", but I can tell you what I did.
I created a MapModel which contains the info necessary to make the map: for instance a collection of stores if you want to put stores on your map.
Then I created a View of the map with no collection of markers: the problem is that a group of markers in leaflet is supposed to be grouped in a L.LayerGroup class (for instance to control when they are added or removed - example). So it feels very clumsy to have the markers in a LayerGroup and in a collection disguised as models.
So I created a layerGroup holding all the markers, this layer being a property of the MapView. If your app is complex, you may even create a subView for each layer.
When you want to filter you filter on the model, which is easy since it's a backbone collection, then you render the View.
my map may deal with tens of thousands, to hundreds of thousands of objects
That's problematic. It's impossible to place such a huge number of markers on webmap, you should plan how to deal with it (a popular plugin)
I am developing a HTML5 web application using KineticJS. I read that in KineticJS there are grouping and layering. As far as I know there are no differences between them. Can you tell me the differences?
The basic difference: Groups are containers while Layers are separators.
Group:
A group is a container for shaped objects inside a layer.
For example, a group might contain both a circle and a rectangle.
A group can be manipulated and all elements within that group are similarly manipulated.
For example, dragging a group will simultaneously drag a circle and rectangle contained in that group.
Layer:
Layers are actually separate canvas elements that are stacked atop each other.
This is similar to the way layers work in Photoshop and Illustrator.
Multiple layers are visible simultaneously.
If objects from different layers overlap, the topmost object displays fully (like z-indexing).
Groups are used to contain multiple items so they can be manipulated as a group--like putting circles and lines into a group to create a "stickman". Moving the group will move all the pieces of the stickman.
Layers are used to separate different items--like having a background layer that doesn't change and a top layer where animation is occurring.
Groups are simply group of elements or objects can be stacked in any way normally within a layer.
Layers are different Canvas area that can be added on the stage stacked over each other.
A continuation of my previous question: How to change the layering of KML and Tile Overlays in Google Maps?
I am currently rewriting some of the code regarding the buttons which enable and disable tile overlays using arrays. In doing so, I'm trying to combine all of the button's individual functions into a single function, but since I have two methods of rendering the overlays, I was hoping to try and simply focus on only one method. The first uses "overlayMapTypes":
map.overlayMapTypes.insertAt(0, beloitMapType);
The second, using a script provided in my previous question:
this.getPanes().overlayShadow.appendChild(this.settings.div_);
The former method is my original approach; however, since I use polygons on the Satellite view I needed a way to place icon/name overlays above the colored polygons. To achieve this, I sought something akin to the latter method where certain overlays could be placed onto a pane higher than the polygons and thus appear above them.
However, in the time between my previous question and now, as well as through some of my own research, I've come to realize that the latter method, rather than placing the tiles into their places, estimates the location of the tile and places it as an image overlay. As a result, a part of my accessibility layer which colors in inaccessible paths had been misaligned by a pixel or two, or my building name overlay currently has names on the border of two tiles which have a sharp line through them as those two tiles overlap slightly. In addition, these two issues come and go each time the map is loaded with each tile being placed on the map with a variance of 1-2 pixels in any direction.
Thus, I would very much prefer to use the former method with overlayMapTypes, which is more reliable and accurate, on all of the overlays, but I also need a way to bring some of these overlays higher than the "overlayLayer" pane and above the polygons. Is this possible and, if so, how could it be done?
Addition: I have an additional need to try and find a method to achieve the reassignment of panes with the overlayMapType method: the script I'm using to achieve this doesn't appear to work in IE7/8. I'm going to investigate this angle myself, but I'd still prefer to drop the script entirely if possible.
Well, I've hit upon a possible solution and, for the sake of sharing it, allow me to explain:
Polygons do not necessarily need to be visible to still have click and hover events.
Since the polygons are used to color the buildings and poi in Satellite view, such a visual component could easily be done by an overlay.
Thus, a possible solution is to have all polygons invisible and simply use them for click and hover events. Likewise, a second overlay, or a modification of an existing one, would replace the polygon's original visual component. Since this visual component is now an overlay like everything else, it can be easily layered with any other overlay using the "MapType" method.
(This however doesn't answer the question; namely, can tile overlays and polygons be layered only with the MapType method? I would still like to know that, but in the event that there is no answer, this hopefully is a possible alternative.)